如何設置構造函數中未知的打字稿成員變量

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作為“空或非-存在價值”