[이펙티브 타입스크립트] 1장 타입스크립트 알아보기

 

이펙티브 타입스크립트 정주행 스터디 1주차.

 

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

타입스크립트는 자바스크립트의 superset이다. 즉, 자바스크립트는 타입스크립트의 subset이다.

모든 자바스크립트는 타입스크립트 이지만, 모든 타입스크립트가 자바스크립트인 것은 아니다. 지금보다 자바스크립트가 지원하는 문법이 적었던 시절 타입스크립트에만 추가된 문법이 있다는 것을 알아두자. 

타입스크립트는 자바스크립트 런타임 동작을 모델링하는 타입시스템을 가진다. 런타임 오류를 발생시키는 코드를 찾아내려 하지만 모든 오류를 찾아낼 수 있는 것은 아니다.

 

02 타입스크립트 설정 이해하기

tsconfig 설정에 따라 거의 다른 언어로 사용할 수 있다.

undefined is not an Object 와 같은 런타임 오류를 방지하기 위해서는 strictNullChecks 플래그를 켜두는 것이 좋다. noEmitOnError 플래그를 설정하면 오류가 있을 때 컴파일하지 않는다.

+ strict: true 하면 true로 설정되는 플래그들

- alwaysStrict
- strictNullChecks
- strictBindCallApply
- strictFunctionTypes
- strictPropertyInitialization
- noImplicitAny
- noImplicitThis
- useUnknownInCatchVariables

 

 

03 코드 생성과 타입이 관계없음을 이해하기

타입스크립트 컴파일러는 (1) 트랜스파일 (2) 타입체크 두 가지 역할을 수행하고, 이 두 역할은 서로 완전히 독립적이다.

코드에 오류가 있다면 '컴파일에 문제가 있다.'는 표현보다 '타입 체크에 문제가 있다.'는 표현이 맞다.

런타임 타입은 선언된 타입과 다를 수 있다. 예를 들어 API를 잘못 파악한 경우, 배포된 후에 API가 변경된 경우 등과 같이 선언된 타입이 언제든지 달라질 수 있다는 것을 명심해야 한다.

타입스크립트 타입은 자바스크립트로 변환되는 시점에 제거되어 런타임 성능에 전혀 영향을 주지 않는다.

 

04 구조적 타이핑에 익숙해지기

자바스크립트는 덕타이핑(duck typing) 기반이다. 덕타이핑이란, 어떤 타입에 부합하는 프로퍼티들을 가지고 있으면 해당 타입에 속하는 것으로 간주하는 타이핑 방식이다.

이러한 자바스크립트의 동작을 모델링하기 위해 타입스크립트는 구조적 타이핑(structural typing)을 사용한다. (nominal typing과 상대되는 개념이다.)

구조적 타이핑을 따르면서, 지정한 타입이 필요로 하는 프로퍼티보다 실제로 더 많은 프로퍼티를 가지는 타입을 받게 되는 것은 문제가 되지 않는다. 

이러한 이유로 인자 x를 받고나서 for (const key of Object.keys(x)) 로 순회를 하면서 x[key]로 접근하려고 하는 경우, 사실상 key에는 지정한 타입에는 없는 외딴 프로퍼티의 키값이 올 수 있다. 이러한 이유로 타입 에러가 발생한다. (const [key, value] of Object.entries(x))로 value 값을 사용하는 방법이 있다.)

이러한 구조적 타이핑은 유닛테스팅을 더욱 쉽게 해준다. 해당 인터페이스만 충족한다면 실제 구현에 대한 정보가 불필요하다. 비슷한 관점에서 라이브러리 간의 의존성도 분리할 수 있다는 장점도 있다.

 

05 any 타입 지양하기

타입스크립트의 any 타입은 타입시스템을 점진석(gradual)이고 선택적(optional)하게 만들어준다. 이러한 any타입이나 as 타입 단언문을 남발하는 것은 타입스크립트를 사용하는 수많은 장점을 포기하는 것과 같다.

명료한 코드를 작성하기 위해서는 제대로 된 타입설계가 필수이다. any 타입을 사용하면 이 타입설계가 불명확해지는 문제가 있다. 설계가 명확히 드러나도록 타입을 일일이 작성하는 것이 좋다.

타입 지정을 해두면 VS Code 상에서 오토컴플릿으로 도움을 받을 수 있고, F2로 Rename 하더라도 연동이 된다. (any타입이면 되지 않는다.)