как установить переменные-члены машинописного текста, которые неизвестны в конструкторе - PullRequest
Новая
       1

как установить переменные-члены машинописного текста, которые неизвестны в конструкторе

0 голосов
/ 27 марта 2020

Я изучаю 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];  
  }

У меня нет значения canvas, ctx, pattern et c во время построения.

Есть ли более правильный способ продолжения ?

Большое спасибо ...

1 Ответ

0 голосов
/ 27 марта 2020

Таким образом, если вам не нужно использовать 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 return false. 

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

Так что, если это важно, вы можете инициализировать их, но не обязательно делать это в конструкторе. 

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

Это может быть полезно, когда есть случай, когда свойство может получить некоторое значение nulli sh во время выполнения, и это одна из причин, по которой некоторые разработчики различают значения guish undefined и null, используя undefined в качестве "еще не инициализировано" и null как "пустое или несуществующее значение"

...