__[TypeScript] 01. 타입스크립트와 자바스크립트 관계 이해하기__

📚 Effective TypeScript 책을 읽고 공부한 내용을 정리한 글입니다.

💡

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

타입스크립트와 자바스크립트의 관계

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

• 자바스크립트 프로그램에 문법 오류가 없다면
  • 유효한 타입스크립트 프로그램이라고 할 수 있다.

문법의 유효성과 동작의 이슈는 독립적인 문제

• 자바스크립트 프로그램에 어떤 이슈가 존재한다면 문법 오류가 아니더라도 타입 체커에게 지적 가능성 높음

• 하지만, 타입스크립트는 여전히 작성된 코드를 파싱하고 자바스크립트로 변환 가능

확장자의 차이

• 자바스크립트 파일은 .js 또는 .jsx 확장자

• 타입스크립트 파일은 .ts 또는 .tsx 확장자

• 하지만 타입스크립트는 상위집합이기 때문에 main.js를 main.ts로 바꾼다고 해도 달라지는 것은 없다.
  • 따라서 마이그레이션하는 데 엄청난 이점
  • 기존 코드를 그대로 유지하면서 일부분에만 타입스크립트 적용이 가능하기 때문

모든 자바스크립트 프로그램은 타입스크립트 프로그램

• 위 명제는 참이지만, 반대는 성립하지 X
  • 타입스크립트가 타입을 명시하는 추가적인 문법을 가지기 때문

아래 코드는 유효한 타입스크립트 프로그램

function greet(who: string) {
    console.log('Hello', who);
}

TypeError를 발생시키는 자바스크립트

let city = 'new york city';
console.log(city.toUppercase());

하지만, 타입스크립트의 타입체커는 문제를 찾아낸다.

• toUppercase 속성이 'string' 형식에 없습니다.

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

즉, 타입스크립트는 초깃값으로부터 타입을 추론한다.

타입 시스템의 목표

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

• 타입스크립트가 '정적' 타입 시스템이라는 것도 하나의 특징

오류가 발생하지 않지만 의도와 다르게 동작하는 코드

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

• 유효한 자바스크립트이며 오류 없이 실행된다.

• 하지만, 루프 내의 state.capitol 은 의도한 코드가 아님
  • 타입스크립트 타입 체커는 추가적인 타입 구문이 없어도 오류를 찾아낸다.

// HIDE
export const foo = true;
const states = [
  {name: 'Alabama', capital: 'Montgomery'},
  {name: 'Alaska',  capital: 'Juneau'},
  {name: 'Arizona', capital: 'Phoenix'},
// ...
];
// ENDfor (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'?
}

• 하지만 이처럼 어느쪽이 오타인지 판단하지 못할 때가 있다.

• 따라서 명시적으로 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);
}

• 의도를 명확히 해서 타입스크립트가 잠재적 문제점을 찾을 수 있게 함.

// HIDE
export const foo = true;
interface State {
  name: string;
  capital: string;
}
// END

const states: State[] = [
  {name: 'Alabama', capital: 'Montgomery'},
  {name: 'Alaska',  capitol: 'Juneau'},
// ~~~~~~~~~~~~~~~~~ Did you mean to write 'capital'?
  {name: 'Arizona', capital: 'Phoenix'},
// ...
];

• 타입 구문 없이 배열 안에서 딱 한 번 capitol이라고 썼다면 오류가 되지 않음
  • 그런데 타입 구문을 추가하면 오류를 찾을 수 있음

타입 체커를 통과한 타입스크립트 프로그램

타입스크립트 타입 시스템은 자바스크립트의 런타임 동작을 '모델링' 한다.

const x = 2 + '3';  // OK, type is string
const y = '2' + 3;  // OK, type is string

오류가 될 코드이지만, 타입스크립트의 타입 체커는 정상으로 인식한다.

반대로 정상 동작하는 코드에 오류를 표시하기도 한다.

const a = null + 7;// Evaluates to 7 in JS// ~~~~ Operator '+' cannot be applied to types ...const b = [] + 12;// Evaluates to '12' in JS// ~~~~~~~ Operator '+' cannot be applied to types ...
alert('Hello', 'TypeScript');// alerts "Hello"// ~~~~~~~~~~~~ Expected 0-1 arguments, but got 2

타입스크립트 채택 여부는 우리들의 선택

단순히 런타임 동작을 모델링하는 것 뿐 아니라 의도치 않은 이상한 코드가 오류로 이어질 수 있음

• 타입스크립트의 도움을 받으면 오류가 적은 코드 작성 가능

• null과 7을 더한다거나, []과 12를 더하는 등을 당연하게 여기면 타입스크립트를 쓰지 않는게 좋음

작성된 프로그램이 타입체크를 통과하더라도 여전히 런타임에 오류 발생 가능하다.

const names = ['Alice', 'Bob'];
console.log(names[2].toUpperCase());

TypeError: Cannot read property 'toUpperCase' of undefined

배열이 범위 내에서 사용될 것이라 가정했지만 실제로는 X, 오류가 발생했다.

=> 타입스크립트가 이해하는 값의 타입과 실제 값에 차이가 있기 때문

Uploaded by N2T