[TypeScript] JavaScript 슈팅게임에 TypeScript 적용하기! #1

이번에는 타입스크립트를 공부한걸 토대로 기존에 작업했었던
JavaScript 슈팅게임을 TypeScript로 변경하는 것을 해보려고 합니다.
물론 제가 작성하는 코드가 최적화된 TypeScript코드가 아닐지는 몰라도
최대한 자료들을 찾아가면서 적용하려고 하는 중입니다.
틀린부분이 있으면 댓글에 남겨주시거나 github에 남겨주시면 적극 반영하겠습니다! 감사합니다!
그럼 시작하겠습니다. :)

게임소개

슈팅게임 바로가기
Github 소스 보러가기
JavaScript 코드가 궁금하신 분들은 github에서 확인 가능합니다.

변수설정 및 DOM 제어

const $startScreen = document.querySelector<HTMLDivElement>("#start_screen")
const $canvasScreen = document.querySelector<HTMLDivElement>("#canvas_screen")
const $manualScreen = document.querySelector<HTMLDivElement>("#manual_screen")
const $gameOver = document.querySelector<HTMLDivElement>(".game_over")
const $gameBtn = document.querySelector<HTMLButtonElement>(".game_btn")
const $replayBtn = document.querySelector<HTMLButtonElement>(".replay_btn")
const $manualBtn = document.querySelector<HTMLButtonElement>(".manual_btn")
const $okBtn = document.querySelector<HTMLButtonElement>(".ok_btn")

interface Keys {
  [key:string]: boolean;
}

interface MeteorList {
  x: number;
  y: number;
}

interface BulletList extends MeteorList {
  alive: boolean;
}

let game: Game | null = null;
let keysDown: Keys = {};
let bulletList: BulletList[] = []; // 총알 저장 리스트
let meteorList: MeteorList[] = []; // 몬스터 리스트
let score: number = 0;
let interval; // 추후에 설정할 예정
let gameOver: boolean = false;
let clickable: boolean = true;

keysDown 변수에서는 사용자가 누를 키("ArrowUp", "ArrowLeft" 등등) string타입이 들어오기 때문에
key의 타입은 string으로 지정하고 객체가 가지고 있는 값의 타입은 boolean으로 지정을 하였습니다.

bulletList와 meteorList에서는 총알과 운석의 위치값이 담긴 객첼를 배열로 받고 있기 때문에

interface MeteorList {
  x: number;
  y: number;
}

interface BulletList extends MeteorList {
  alive: boolean;
}

let bulletList: BulletList[] = []; // 총알 저장 리스트
let meteorList: MeteorList[] = []; // 몬스터 리스트

Meteor interface를 만들고 Bullet에 상속하여 같은 값인 x,y를 같이 사용하고 Bullet에만 alive를 추가해주는 형태로 구성했습니다.

추가 수정

초기에 인터페이스로 만든 BulletList와 MeteorList를 배열의 타입으로 지정을 해서 작업을 하다보니
중간에 bulletList의 담겨있는 각각의 객체에 접근하려고 보니 잘 못 코드가 짜여져 있다는 것을 알게 되었습니다.

if (bulletList[i].alive) {
  bulletList[i].update(); // Property 'update' does not exist on type 'BulletList'
  bulletList[i].checkHit(); // Property 'checkHit' does not exist on type 'BulletList'.
} else {
  bulletList.splice(i, 1);
};

한마디로 인터페이스로 지정해둔 BulletList에는 update(), checkHit()등의 속성이 없다는 오류였으며,
그래서 다음과 같이 class로 만든 Bullet과 Meteor를 연결 해주는 것으로 문제를 해결했습니다.

// class로 만든 Bullet과 Meteor를 타입으로 지정
let bulletList: Array<Bullet> = []; 
let meteorList: Array<Meteor> = []; 

참고

ZeroCho/ts-all-in-one
typescript 에서 DOM 제어