如何设置构造函数中未知的打字稿成员变量

Question

我正在学习 Typescript，想知道如何正确定义类成员变量。

目前，我在类中声明它们，在构造函数之上，但为了确保它们在构造函数中实例化（或者我收到警告），我将它们声明为任何类型 | 空值。 这意味着，如果我可以在构造函数中通过将成员变量设置为 null 来实例化该成员变量，然后在可能的情况下将其设置为适当的值。

我不知道这是声明成员变量的正确方法。 举个例子 ：

export default class FlowerBed {
  canv:HTMLCanvasElement | null;
  ctx:CanvasRenderingContext2D | null;
  p2d:Path2D;
  t:number;
  currentPoint:Array<number>;
  to:number = 0;
  image:HTMLImageElement | null;
  imagesrc:CanvasImageSource | null;
  pattern:CanvasPattern | null;

  constructor (garden:HTMLCanvasElement) {
    this.image = null;
    this.imagesrc = null;
    this.canv = null;
    this.ctx = null;
    this.pattern = null;
    this.to = 0;
    this.p2d = new Path2D();
    this.t = 0;
    this.currentPoint = [160,350];  
  }

我在构建时没有画布、ctx、图案等的价值。

有没有更正确的处理方式？

非常感谢...

Answer 1

因此，如果您不需要使用具有特殊含义的null ，您可以简化您的课程

export default class FlowerBed {
  canv?: HTMLCanvasElement;
  ctx?: CanvasRenderingContext2D;
  p2d: Path2D = new Path2D();
  t: number = 0;
  currentPoint: Array<number> = [160, 350];
  to: number = 0;
  image?: HTMLImageElement;
  imagesrc?: CanvasImageSource;
  pattern?: CanvasPattern;

  constructor(garden: HTMLCanvasElement) {
    // ...
  }

  someMethod() {
    // Note the exclamation mark – it tells ts you are sure the property has a value
    return this.canv!.getBoundingClientRect();
  }
}

? 在字段名称之后意味着该字段可能会丢失几乎与undefined相同的内容。 根据您的经验，您可能更喜欢将值分配给构造函数，但您仍然可以在此处避免空分配。

值得注意的是，对象中不存在未初始化的属性，因此运行时检查（例如hasOwnProperty返回false 。

const fb = new FlowerBed(canvasEl);
fb.hasOwnProperty('ctx'); // false

因此，如果很重要，您可以初始化它们，但不必在构造函数中进行。

export default class FlowerBed {
  canv?: HTMLCanvasElement;
  ctx?: CanvasRenderingContext2D = undefined;
  // ...
}

当属性在运行时可能获得一些空值时它可能很有用，这也是一些开发人员区分undefined和null值的原因之一，使用undefined作为“尚未初始化”和使用null作为“空或非-存在价值”