类中的打字稿外部回调绑定

Posted

技术标签:

【中文标题】类中的打字稿外部回调绑定【英文标题】:typescript external callback binding within classes 【发布时间】:2021-12-23 21:57:01 【问题描述】:

我正在尝试将类的属性绑定到该类中的回调。

快速示例:

// caller
const first = (): void => 
  const testClass = new TestClass();
  testClass.second(() => 
    console.log(this.member) // error TS2532: Object is possibly 'undefined'
  


// TestClass
...
member: string = 'test';

second(cb: () => void) 
 const self = this;
 cb.bind(self)();

this 似乎可能未定义。

如何从外部回调访问类成员?

【问题讨论】:

【参考方案1】:

Arrow Functions 用于自动绑定到当前作用域和父对象,因此您不能使用回调绑定来调用它们。 所以这里 javascript interpreter 试图找到之前定义了回调的父级。

// caller
const first = (): void => 
  const testClass = new TestClass();
  testClass.second(function() 
    console.log(this.member)
  

【讨论】:

【参考方案2】:

在控制台日志前添加条件,避免打印未定义的对象。

从你的例子:

// caller
const first = (): void => 
  const testClass = new TestClass();
  testClass.second(() => 
    if (this.member) console.log(this.member)
  


// TestClass
...
member: string = 'test';

second(cb: () => void) 
   const self = this;
    cb.bind(self)();


【讨论】:

以上是关于类中的打字稿外部回调绑定的主要内容,如果未能解决你的问题,请参考以下文章

当“@”用于打字稿类组件模板中的事件绑定时,Vetur 未正确读取函数名称

打字稿:传递类函数时如何检查它们是不是绑定

在 Angular 1.5 中绑定组件函数时如何利用打字稿?

映射打字稿参数:绑定元素“列”隐式具有“任何”类型

如何在打字稿中定义敲除绑定处理程序?

使用打字稿在 Angular 2 中将接口与 html 绑定