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

1import { style } from '../assets';
2import { eventbus } from '../eventbus';
3import { page, RootObject } from '../vm/page';
4import * as d3 from 'd3'
5import * as d3g from 'd3-shape'
6import * as signalr from "@aspnet/signalr";
7export class AreaMain {
8    main: HTMLMainElement;
9    constructor(private stp: style, private bus: eventbus, private vm: page) {
10        this.main = document.createElement('main');
11        this.bus.load(this);
12        let uid: RootObject;
13        if (this.vm.uidata != undefined) {
14            uid = this.vm.uidata
15            this.initialView(this.main, uid);
16            this.setCss(uid)
17        }
18        this.conn = undefined        
19    }
20    initialView(parent: HTMLMainElement, uid: RootObject): void {
21        let div1 = document.createElement('div')
22        let div2 = document.createElement('div')
23        let div3 = document.createElement('div')
24        this.init1(div1, uid)
25        this.init2(div2, uid)
26        this.init3(div3, uid)
27        for (var i of [div1, div2, div3]) {
28            parent.appendChild(i)
29        }
30    }
31    //#region ui components
32    init1(parent: HTMLElement, uid: RootObject): void {
33        var svg = d3.select(parent).append('svg')
34            .attr('width', '100%')
35        var g = svg.append('g')
36            .attr('transform', 'translate(250,10)')
37        var r = g.append('rect')
38            .attr('fill', 'skyblue')
39            .attr('width', 100)
40            .attr('height', 100)
41            .attr('transform', 'rotate(20,10,10)')   
42        r.on('click',()=>{
43            if(this.conn!=undefined){
44                this.testkk(this.conn)  // 这里都不会执行的！
45            }
46        })
47    }
48    init2(parent: HTMLElement, uid: RootObject): void {
49        parent.setAttribute('id', 'div2')
50        var ul = document.createElement('ul')
51        parent.appendChild(ul)
52        const connection = new signalr.HubConnectionBuilder()
53            .withUrl("http://localhost:61866/chatHub")
54            .build();
55        this.conn = connection
56        console.log(2250)
57        console.log(this.conn)
58        connection.on("ReceiveMessage", function (user, message) {
59            var encodedMsg = user + " says " + message;
60            var li = document.createElement("li");
61            li.textContent = encodedMsg;
62            ul.appendChild(li);
63        });
64        this.conn.start().then(x=>{
65            console.log(x)
66        })
67    }
68    init3(parent: HTMLElement, uid: RootObject): void {
69
70    }
71    //#endregion
72    //#region change
73    conn: signalr.HubConnection | undefined
74    async testkk(connection: signalr.HubConnection) {
75        await connection.start();
76        await connection.invoke("SendMessage", 'user', 'message');
77    }
78    //#endregion
79    setCss(uid: RootObject): void {
80        this.stp.create('#div2')
81        .insert('height','600px')
82        .insert('background-color','#e8e8e9')
83        this.stp.create('#div2>ul')
84            .insert('list-style', 'none')
85    }
86}

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

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

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