TypeScript接口中函数无法通过this访问数据的解决办法

你的问题核心在于TypeScript接口仅用于定义类型结构，不能包含函数的具体实现——接口里的函数只能声明签名，不能写函数体，所以你直接在接口里写func的实现会编译报错，更不用说通过this访问成员了。

以下是几种可行的解决办法：

1. 用类实现接口 #

把接口作为契约，在类中实现具体的函数逻辑，类里的函数可以正常通过this访问类成员：

export interface A {
  data: any;
  func(): void;
}

export class AImpl implements A {
  data: any;

  func(): void {
    this.data = 'xxx'; // 此处可正常编译并访问this.data
  }
}

2. 用对象字面量实现接口 #

如果不需要类，直接用对象字面量实现接口，函数放在对象内部，this会指向当前对象实例：

export interface A {
  data: any;
  func(): void;
}

const aInstance: A = {
  data: null,
  func(): void {
    this.data = 'xxx'; // 正常访问this.data
  }
};

3. 用抽象类替代（需要默认实现时） #

如果想给所有实现提供默认的函数逻辑，用抽象类更合适——抽象类既可以定义成员，也能包含函数实现：

export abstract class A {
  data: any;

  // 带默认实现的方法
  func(): void {
    this.data = 'xxx';
  }
}

// 继承抽象类并使用（可重写func方法）
export class AImpl extends A {}

内容的提问来源于stack exchange，提问作者xymzh