ts 与 C#的 一个差异的地方

Easter79
• 阅读 666
import { style } from '../assets';
import { eventbus } from '../eventbus';
import { page, RootObject } from '../vm/page';
import * as d3 from 'd3'
import * as d3g from 'd3-shape'
import * as signalr from "@aspnet/signalr";
export class AreaMain {
    main: HTMLMainElement;
    constructor(private stp: style, private bus: eventbus, private vm: page) {
        this.main = document.createElement('main');
        this.bus.load(this);
        let uid: RootObject;
        if (this.vm.uidata != undefined) {
            uid = this.vm.uidata
            this.initialView(this.main, uid);
            this.setCss(uid)
        }
        this.conn = undefined        
    }
    initialView(parent: HTMLMainElement, uid: RootObject): void {
        let div1 = document.createElement('div')
        let div2 = document.createElement('div')
        let div3 = document.createElement('div')
        this.init1(div1, uid)
        this.init2(div2, uid)
        this.init3(div3, uid)
        for (var i of [div1, div2, div3]) {
            parent.appendChild(i)
        }
    }
    //#region ui components
    init1(parent: HTMLElement, uid: RootObject): void {
        var svg = d3.select(parent).append('svg')
            .attr('width', '100%')
        var g = svg.append('g')
            .attr('transform', 'translate(250,10)')
        var r = g.append('rect')
            .attr('fill', 'skyblue')
            .attr('width', 100)
            .attr('height', 100)
            .attr('transform', 'rotate(20,10,10)')   
        r.on('click',()=>{
            if(this.conn!=undefined){
                this.testkk(this.conn)  // 这里都不会执行的!
            }
        })
    }
    init2(parent: HTMLElement, uid: RootObject): void {
        parent.setAttribute('id', 'div2')
        var ul = document.createElement('ul')
        parent.appendChild(ul)
        const connection = new signalr.HubConnectionBuilder()
            .withUrl("http://localhost:61866/chatHub")
            .build();
        this.conn = connection
        console.log(2250)
        console.log(this.conn)
        connection.on("ReceiveMessage", function (user, message) {
            var encodedMsg = user + " says " + message;
            var li = document.createElement("li");
            li.textContent = encodedMsg;
            ul.appendChild(li);
        });
        this.conn.start().then(x=>{
            console.log(x)
        })
    }
    init3(parent: HTMLElement, uid: RootObject): void {

    }
    //#endregion
    //#region change
    conn: signalr.HubConnection | undefined
    async testkk(connection: signalr.HubConnection) {
        await connection.start();
        await connection.invoke("SendMessage", 'user', 'message');
    }
    //#endregion
    setCss(uid: RootObject): void {
        this.stp.create('#div2')
        .insert('height','600px')
        .insert('background-color','#e8e8e9')
        this.stp.create('#div2>ul')
            .insert('list-style', 'none')
    }
}

这是我自己做的小项目里的代码 ,用C#来做这个是走得通的,但ts不行,见红字那里, 

原因我猜测是因为,r.on(...  这里这个r 的作用域只是属性 Init1 方法的,在js, ts里方法的权限很大,它和 this.conn不在同一个作用域里,所以在r的作用域中,this.conn的值 只是处于 constructor本部

里设置的那个值,不知道 有没有朋友 也遇到 过类似 的情形,欢迎跟贴讨论

点赞
收藏
评论区
推荐文章
Easter79 Easter79
3年前
Taro下拉刷新,上拉加载更多
1、引入插件importTaro,{Component}from'@tarojs/taro'import{View,Text,ScrollView}from'@tarojs/components'import{AtActivityIndicator}from'taroui'imp
Stella981 Stella981
3年前
Python import与from import使用及区别介绍
Python程序可以调用一组基本的函数(即内建函数),比如print()、input()和len()等函数。接下来通过本文给大家介绍Pythonimport与fromimport使用及区别介绍,感兴趣的朋友一起看看吧下面介绍下Pythonimport与fromimport使用,具体内容如下所示:Python程序可以调用一组基本的函数(即内建函
Stella981 Stella981
3年前
ReactNative—Text标签中的Style学习
1.引用需要的组件这里用到_AppRegistry,StyleSheet,Text,View_importReact,{Component}from'react';import{AppRegistry,//JS运行所有ReactNative应用的入口,必须引用Style
Stella981 Stella981
3年前
Python脚本 from collections import namedtuple 失败
脚本collections.py代码如下!/usr/bin/python3coding:utf8collectionsfromcollectionsimportnamedtuplePointnamedtuple('Point','x','y')
Stella981 Stella981
3年前
AngularJS5.0 (第五篇)
新建approuting.module.tsimport{NgModule}from'@angular/core';import{CommonModule}from'@angular/common';import{RouterModule,Routes}from'@angular/router
可莉 可莉
3年前
200多个js技巧代码(2)
51.向文件中写内容<%@ page import"java.io." %<% String str  "print me"; //always give the path from root. This way it almost always works. String nameOfTex
Stella981 Stella981
3年前
D3(v5) in TypeScript 坐标轴之 scaleBand用法
在学习d3时候,发现在TS中实现D3的坐标轴中遇到一些错误,而这些错误却不会存在于js(因为ts的类型检查)写法中,因此做下笔记:importasd3from'd3';importasReactfrom'react';classTestGraphextendsReact.Component{publicc
Stella981 Stella981
3年前
Angular技巧汇总
一、声明全局的类型定义  声明项目的全局类型,同时不需要在各个Ts文件中import{XXX}from'xxx' ,就能直接引用!方法是:     增加src/typings.d.ts文件,在文件中增加 interfaceIName{ name:string;}的类型定义。   那么
Wesley13 Wesley13
3年前
ES6特性
7.import与export的复合写法//如果在一个模块中,先输入后输出同一个模块,import语句和export语句可以写一起export{varName,varAge}from'./xx.js'//等同于import{varName,varAge}from'./xx.js'
Stella981 Stella981
3年前
200多个js技巧代码(2)
51.向文件中写内容<%@ page import"java.io." %<% String str  "print me"; //always give the path from root. This way it almost always works. String nameOfTex
Easter79
Easter79
Lv1
今生可爱与温柔,每一样都不能少。
文章
2.8k
粉丝
5
获赞
1.2k