#1 타입스크립트와 자바스크립트의 관계 이해하기

이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리

📍JS와 TS의 관계

JS로 작성한 코드의 확장자를 .ts로 바꿔도 실행 가능하다.

반면, TS로 작성한 코드의 확장자를 .js로 바꾸면 에러가 발생한다. (타입스크립트 별도의 문법 존재)

 

📍타입 구문을 통해 타입스크립트에게 코드의 의도를 전달

TS 자체적으로 해결책을 제시하는데, 합당해보이긴 하지만, 완벽한 해결책은 아님

const states = [
  // capital 대신 오타가 발생
  {name: "Alabama", capitol: "Montgomery"},
  {name: "Alaska", capitol: "Juneau"},
  {name: "Arizona", capitol: "Phoenix"},
  // ...
];

for (const state of states) {
  console.log(state.capital); // "capital" 이 없습니다. "capitol" 을 사용하시겠습니까?
}

 

코드 앞에서 타입을 명시적으로 지정해주면, 훌륭한 해결책을 제시

interface State {
  name: string;
  capital: string; // capital
}

const states: State[] = [
  // capital 대신 오타가 발생하면 자동 추천
  {name: "Alabama", capitol: "Montgomery"}, // "State 형식에 "capitol" 이 없음,
  {name: "Alaska", capitol: "Juneau"},	// "capital" 을 쓰려고 했습니까?
  {name: "Arizona", capitol: "Phoenix"},
  // ...
];

for (const state of states) {
  console.log(state.capital);
}