아이템 1. 타입스크립트와 자바스크립트의 관계 이해하기(p.2~p.9)

타입스크립트란?

• 타입스크립트는 자바스크립트의 상위집합(superset)이다.
• 타입스크립트는 타입이 정의된 자바스크립트의 상위집합이다.

<aside> 💡 타입스크립트?

• 타입스크립트 공식문서에서 설명하는 타입스크립트의 정의는?

JavaScript With Syntax For Types.

• TypeScript is JavaScript with syntax for types.

  • 타입스크립트는 타입에 대한 구문이 있는 자바스크립트입니다.

• TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.

  • 타입스크립트는 자바스크립트를 기반으로 하는 강력한 타입의 프로그래밍 언어로, 규모에 상관없이 더 나은 툴을 제공합니다. </aside>

• 타입스크립트는 문법적으로도 자바스크립트의 상위집합이다.

  • 자바스크립트 프로그램에 문법 오류가 없다면, 유효한 타입스크립트 프로그램이다.
  • 자바스크립트 프로그램에 어떤 이슈가 존재한다면, 문법 오류가 아니라도 타입 체커에게 지적당할 가능성이 높다.
    • 그러나 문법의 유효성과 동작의 이슈는 독립적인 문제이다. 타입스크립트는 여전히 작성된 코드를 파싱하고 자바스크립트로 변환할 수 있다.

• 자바스크립트 파일은 .js(또는 .jsx) 확장자를 사용하고, 타입스크립트는 .ts(또는 .tsx) 확장자를 사용한다.

  • main.js 파일명을 main.ts로 바꾼다고 해도 달라지는 건 없으며, 이는 마이그레이션 하는 데 엄청난 이점이 된다. (기존 코드를 그대로 유지하면서 일부분만 타입스크립트 적용이 가능하기 때문에)

타입 체커

• 타입 구문이 없지만, 타입스크립트의 타입 체커는 문제점을 찾아낸다.
  • city 변수가 문자열이라는 것을 알려주지 않아도 타입스크립트는 초깃값으로부터 타입을 추론한다.
  • 타입 추론은 타입스크립트에서 중요한 부분이다.

let city = 'new york city';
console.log(city.**toUppercase()**);
// Property 'toUppercase' does not exist on type 'string'. 
// Did you mean 'toUpperCase'?

<aside> 💡 타입스크립트 에러 이쁘게 보기

• Pretty TypeScript Errors </aside>

• 타입 시스템의 목표 중 하나는 런타임에 오류를 발생시킬 코드를 미리 찾아 내는 것이다.

  • 그러나 타입 체커가 모든 오류를 찾아내는 것은 아니다.
  • 오류가 발생하지는 않지만 의도와 다르게 동작하는 코드도 있다.

const states = [
  { name: 'Alabama', capital: 'Montgomery' },
  { name: 'Alaska', capital: 'Juneau' },
  { name: 'Arizona', capital: 'Phoenix' },
];

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

// undefined
// undefined
// undefined

• 위 코드는 유효한 자바스립트이며 어떠한 오류 없이 실행된다.
  • 타입 체커는 추가적인 타입 구문 없이도 오류를 찾아내며, 꽤 훌륭한 해결책을 제시해준다.

// TypeScript
for (const state of states) {
  console.log(state.**capitol**); 
  // Property 'capitol' does not exist on type '{ name: string; capital: string; }'. 
  // Did you mean 'capital'?
}

• 타입 구문 없이도 오류를 잡을 수 있지만, 타입 구문을 추가한다면 훨씬 더 많은 오류를 찾아낼 수 있다.

const states = [
  { name: 'Alabama', capitol: 'Montgomery' },
  { name: 'Alaska', capitol: 'Juneau' },
  { name: 'Arizona', capitol: 'Phoenix' },
];

for (const state of states) {
  console.log(state.**capital**); // ✅ 어느 쪽이 오타인지 알 수 없다.
  // Property 'capital' does not exist on type '{ name: string; capitol: string; }'. 
  // Did you mean 'capitol'?
}

• capital을 capitol으로 잘못 타이핑 했지만, 타입스크립트는 어느 쪽이 오타인지 판단하지 못한다.
  • 따라서 명시적으로 states를 선언하여 의도를 분명하게 하는 것이 좋다.

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

const states: State[] = [
  { name: 'Alabama', **capitol: 'Montgomery'** },
  { name: 'Alaska', **capitol: 'Juneau'** },
  { name: 'Arizona', **capitol: 'Phoenix'** },
  // Object literal may only specify known properties, but 'capitol' does not exist in type 'State'. 
  // Did you mean to write 'capital'?
];

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