TypeScript类构造函数this属性赋值报错及接口声明咨询

你的问题出在两个关键点上：泛型的错误使用和类实例属性未声明，下面一步步帮你修正：

错误根源分析 #

1. 泛名遮蔽了接口：你写的class Nodes<ClassInterface>是在定义一个泛型类，这里的<ClassInterface>是一个泛型参数占位符，和你之前定义的interface ClassInterface完全无关——相当于你用接口名重新定义了一个泛型变量，导致类根本没有实现你想要的接口。
2. 实例属性未声明：TypeScript是静态类型语言，类的实例属性必须显式声明（或通过参数属性隐式创建），否则编译器不知道this.canvasWidth和this.canvasHeight的存在，自然会报错。

修正方案 #

方案1：显式实现接口+声明属性 #

先让类实现你定义的ClassInterface，同时显式声明实例属性：

interface ClassInterface { 
  canvasWidth: number; 
  canvasHeight: number; 
};

// 用implements关键字让类实现接口，而不是把接口当泛型参数
class Nodes implements ClassInterface {
  // 显式声明实例属性，匹配接口的类型
  canvasWidth: number;
  canvasHeight: number;

  constructor(canvasWidth: number, canvasHeight: number) {
    console.log(canvasWidth); // 820
    console.log(canvasHeight); // 620
    this.canvasWidth = canvasWidth;
    this.canvasHeight = canvasHeight;
  }
  // 给方法参数添加类型，避免隐式any的警告
  update(tick: number) { }
  draw(ctx: CanvasRenderingContext2D) { }
}
export { Nodes };

方案2：使用参数属性简化代码 #

TypeScript支持参数属性，在构造函数参数前添加public/private/protected修饰符，就能自动创建并赋值对应的实例属性，省去单独声明的步骤：

interface ClassInterface { 
  canvasWidth: number; 
  canvasHeight: number; 
};

class Nodes implements ClassInterface {
  // 用public修饰构造函数参数，自动生成实例属性并完成赋值
  constructor(public canvasWidth: number, public canvasHeight: number) {
    console.log(canvasWidth); // 820
    console.log(canvasHeight); // 620
    // 无需手动写this.canvasWidth = canvasWidth; 参数属性已处理
  }
  update(tick: number) { }
  draw(ctx: CanvasRenderingContext2D) { }
}
export { Nodes };

关于接口的必要性 #

如果你需要约束Nodes类必须拥有canvasWidth和canvasHeight这两个属性，那么这个接口是有用的——它能确保类的实现符合预期，也能给其他使用这个类的地方提供类型提示。如果只是简单存储这两个值，也可以不用接口，直接在类里声明属性即可：

class Nodes {
  constructor(public canvasWidth: number, public canvasHeight: number) {
    console.log(canvasWidth, canvasHeight);
  }
  update(tick: number) { }
  draw(ctx: CanvasRenderingContext2D) { }
}

你的React组件代码不需要修改，调用new Nodes(canvasWidth, canvasHeight)就能正常工作了。

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