[이펙티브 타입스크립트] 아이템1 ~ 아이템4

[아이템1] 타입스크립트와 자바스크립트의 관계 이해하기

모든 자바스크립트 프로그램이 타입스크립트라는 명제는 참이지만, 그 역은 성립하지 않는다. 이는 타입스크립트가 타입을 명시하는 추가적인 문법을 가지기 때문이다.

에러에서의 TS / JS 차이점

• 자바스크립트

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

❌ TypeError: city.toUppercase is not a function

• 타입스크립트

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

❌ 'toUppercase'속성이 'string' 형식에 없습니다. 'toUpperCase'를 사용하시겠습니까?

👉 타입스크립트의 타입 체커는 city 변수가 문자열이라는 것을 알려 주지 않아도 초깃값인 'new york city'로부터 타입을 추론한다.

타입 시스템의 목표 중 하나는 런타임에 오류를 발생시킬 코드를 찾아내는 것이다. 그러나 타입 체커가 모든 오류를 찾아내지는 않는다.

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

❌ TypeError: Cannot read property 'toUpperCase' of undefined

❗ 타입 시스템이 정적 타입의 정확성을 보장해 줄 것 같지만 그렇지 않다.

정확성을 보장하는 것이 중요하다면 Reason이나 Elm 같은 언어를 선택하는 것이 좋다. 하지만 이러한 언어는 런타임 안정성을 보장하는 대신 자바스크립트의 상위집합이 아니기 때문에 마이그레이션 과정이 훨씬 복잡하다.

[아이템2] 타입스크립트 설정 이해하기

tsx --init // 설정 파일 생성 방법

"noImplicitAny": true, // 암묵적 any ❌
"strictNullChecks": true, // null, undefined 타입 허용 ❌

마이그레이션 등과 같은 작업에서 strictNullChecks 설정 없이 개발을 한다면 "undefined는 객체가 아닙니다" 라는 런타임 오류를 주의하기!

위의 두 설정을 한번에 설정하는 방법

"strict": true,

[아이템3] 코드 생성과 타입이 관계없음을 이해하기

타입스크립트 컴파일러의 두 가지 역할

• 최신 ts/js를 브라우저에서 동작할 수 있도록 구버전의 js로 트랜스파일
• 코드의 타입 오류를 체크

✔ 타입 오류가 있는 코드도 컴파일이 가능하다
🤷‍♂️ 컴파일은 타입체크와 독립적으로 동작하기 때문이다.

❓ 타입 오류가 있을 때 컴파일하지 않으려면?
👉 설정파일에서 noEmitOnError을 설정한다.

✔ 런타임에는 타입체크가 불가능하다
🤷‍♂️ 실제로 js로 컴파일되는 과정에서 모든 interface, type, type구문은 제거 된다.

✔ 타입 연산은 런타임에 영향을 주지 않는다

function asNumber(val: number | string): number {
  return val as number;
} // ❌ 정제 안됨

이 타입스크립트를 코드를 자바스크립트로 변환하면

function asNumber(val){
  return val;
}

로 아무런 정제 과정이 없다. 정제하기 위해서는 런타임의 타입을 체크해야 하고 자바스크립트 연산을 통해 변환을 수행해야 한다.

function asNumber(val: number | string): number {
  return tyepof(val) === 'string' ? Number(val) : val;
}

✔ 런타임 타입은 선언된 타입과 다를 수 있다

✔ 타입스크립트 타입으로는 함수를 오버로드 할 수 없다
🤷‍♂️ 타입스크립트에서는 타입과 런타임의 동작이 무관하기 때문이다. 타입스크립트가 함수 오버로딩 기능을 지원하기는 하지만, 온전히 타입 수준에서만 동작한다.

✔ 타입스크립트 타입은 런타임 성능에 영향을 주지 않는다
🤷‍♂️ 타입과 타입 연산자는 자바스크립트 변환 시점에 제거되기 때문이다.

[아이템4] 구조적 타이핑에 익숙해지기

✔ 자바스크립트가 덕 타이핑(duck typing) 기반이고 타입스크립트가 이를 모델링하기 위해 구조적 타이핑을 사용함을 이해해야 한다.

❓ 덕 타이핑이란?
👉 객체가 어떤 타입에 부합하는 변수와 메서드를 가질 경우 객체를 해당 타입에 속하는 것으로 간주하는 방식

✔ 타입스크립트는 타입에 열려있다. 타입이 열려 있다는 것은 타입의 확장에 열려 있다는 의미로 타입에 선언된 속성 외에 임의의 속성을 추가하더라도 오류가 발생하지 않는다는 것이다.

✔ 구조적 타이핑의 장점은 테스트를 손쉽게 할 수 있고 라이브러리 간의 의존성을 완벽히 분리할 수 있다는 점이다.