[TypeScript] JavaScript 슈팅게임에 TypeScript 적용하기! #2 - Canvas 활용하기

Canvas 사용하기

// 기존 코드
class Game {
  constructor() {
    this.canvas = document.querySelector("canvas");
    this.ctx = this.canvas.getContext("2d");
    this.canvas.width = 500;
    this.canvas.height = window.innerHeight;
  }
}

class Game {
  public canvas: HTMLCanvasElement;
  public ctx: CanvasRenderingContext2D;

  constructor() {
    this.canvas = document.querySelector("canvas") as HTMLCanvasElement;
    this.ctx = this.canvas.getContext("2d");
    this.canvas.width = 500;
    this.canvas.height = window.innerHeight;
  }
}

작동은 되지만 this.ctx에서 오류가 발생하게 되었습니다.
오류의 내용은

Type 'CanvasRenderingContext2D | null' is not assignable to type 'CanvasRenderingContext2D'.
Type 'null' is not assignable to type 'CanvasRenderingContext2D'.

즉, this.ctx의 타입이 null 일수도 있기 때문에 'CanvasRenderingContext2D' 유형에 할당할 수 없다라는 오류였습니다.
그래서 ctsRes라는 변수를 만들어 null이 아닌 경우를 판별하는 한번의 안전장치를 추가해주는 것으로 문제를 해결했습니다.

class Game {
  public canvas: HTMLCanvasElement;
  public ctx: CanvasRenderingContext2D;

  constructor() {
    this.canvas = document.querySelector("canvas") as HTMLCanvasElement;
    const ctsRes = this.canvas.getContext("2d");
    if (!ctsRes || !(ctsRes instanceof CanvasRenderingContext2D)) {
      throw new Error('Failed to get 2D context');
    }
    this.ctx = ctsRes;
    this.canvas.width = 500;
    this.canvas.height = window.innerHeight;
    this.start();
  }
}

참고

React TypeScript: Type 'null' is not assignable to type 'CanvasRenderingContext2D'