똑같은 삽질은 2번 하지 말자
Effective Typescript vol.1 (타입 스크립트 알아보기 Item 1 ~ 5) 본문
개요
이펙티브 타입스크립트라는 책을 읽고 장별(각각의 장안에 아이템별)로 학습한 내용 정리하기
이 책의 목표: 독자에게 타입스크립트나 자바스크립트를 가르치는 것이 아니라, 초급자나 중급자가 전문가로 발전할 수 있게 돕는 것
프로그래밍에서 어떤 방법을 가르치는게 아니라 어떤 방법을 사용할 때 왜 그래야 하는지를 알려준다.
1장 타입스크립트 알아보기
Item1. 타입스크립트와 자바스크립트의 관계 이해하기
타입스크립트에 대해 공부를 해본 사람이라면 타입스크립트는 자바스크립트의 상위집합(super set)이라는 말을 많이 들었을건데,
그게 무슨 말이냐면, 모든 자바스크립트는 타입스크립트이지만, 타입스크립트는 별도의 문법을 가지고 있기 때문에 유효한 자바스크립트 프로그램은 아니라는 말이다.
위의 그림을 보면 타입체커를 통과한 타입스크립트 프로그램이 우리가 평소에 쓰는 interface나 type을 이용해 타입구문을 추가하는 프로그램을 짤때 그러한 부분들은 자바스크립트가 아니라는 것.
타입스크립트는 자바스크립트 런타임 동작을 모델링하는 타입 시스템을 가지고 있기 때문에 런타임 오류를 잡아낼 수 있지만,
모든 런타임 오류를 잡아낼 수는 없다. 또 타입스크립트를 사용하면 우리가 평소에 느끼던 자바스크립트의 관대한 성격?을 잃어버릴 수 있는데 그런게 짜증나면 타입스크립트를 굳이 안써도 된다고 말하고 있다.
Item2. 타입스크립트 설정 이해하기
noImplicitAny는 변수들이 미리 정의된 타입을 가져야 하는지 여부를 제어한다는 설정인데 즉, "암시적 any가 금지된다" 라는 설정이다. 타입스크립트는 타입 정보를 가질 때 가장 효과적이기 때문에 이 옵션은 되도록 설정하도록 권장되어진다.
strictNullChecks는 null과 undefined가 모든 타입에서 혀용되는지 확인하는 설정인데 null, undefined 관련된 오류를 잡아 내는 데 많은 도움이 되지만, 코드 작성이 어려워진다.. 새 프로젝트라면 설정하는게 좋지만 마이그레이션하는 프로젝트라면 힘들어 질 수 있을거 같다.
위의 2개의 설정이 아무래도 가장 핵심적인 설정이며, 이 설정들과 또 훨씬 더 엄격하게 타입스크립트를 사용하고 싶다면 strict 설정을 하면 된다. 물론 이것도 초반에 설정해야 한다!
Item3. 코드 생성과 타입이 관계없음을 이해하기
흔히 우리가 babel로 최신 javascript를 구버전의 자바스크립트로 변환하는 작업과 typescript -> javascript로 변환하는 작업은 완벽하게 독립적이며 webpack에서도 이 작업은 완전히 분리되어 단계적으로 이루어지고 있다. 이건 타입이 빌드결과물(코드생성)과는 관련이 없다라는 것. (타입에러가 나도 컴파일은 가능할 수 있다.)
3-1. 런타임에는 타입 체크가 불가능하다.
다음과 같은 코드가 있다.
shape instanceof Rectangle이라는 부분을 주목하자면 instanceof는 런타임에서 사용할 수 있는 javascript의 기능이며 typescript의 interface로는 사용할 수 없다. typescript의 interface는 런타임 시점에 아무런 역할을 못하는데, 그 이유는 이미 컴파일하면서 "삭제" 되어 버렸기 때문이다.
대안으로는
Shape라는 인터페이스에 타입 정보를 명시적으로 저장하는 '태그' 기법이 있다. 이렇게 하면 런타임시점에서도 kind라는 구문은 아직 살아있기 때문에 사용할 수 있다.
또 하나의 대안으로는 interface 대신에 class를 사용하는 방법이다. 클래스는 타입과 값으로 모두 사용할 수 있다.
3-2. 타입 연산은 런타임에 영향을 주지 않는다.
밑의 코드와 같이 as number를 한다고 해도 인자로 문자열이 들어오면 문자열이 반환된다.
3-3. 타입스크립트 타입으로는 함수를 오버로드 할 수 없습니다.
좀더 설명을 덧 붙이자면 밑의 사진과 같이 "a, b가 number이거나 string으로 각각 오면 그 파라미터의 타입에 따라 return의 타입도 정해진다" 라는 타입수준의 오버로드는 되지만, 구현체(실제 더하는 기능의 함수)는 결국 하나! 라는 것이다.
3-4. 타입스크립트의 타입은 런타임 성능에 영향을 주지 않는다. (다만, 빌드타임 오버헤드는 있다.)
Item4. 구조적 타이핑에 익숙해지기
자바스크립트가 덕 타이핑* 기반이고 타입스크립트가 이를 모델링하기 위해 구조적 타이핑을 사용한다.
구조적 타이핑이란 어떤 인터페이스(타입)에 할당 가능한 값이라면 타입 선언에 명시적으로 나열된 속성들을 가지고 있을꺼고 그 이상의 값들도 가지고 있을지도 모른다는 것이 구조적 타이핑이다. 즉, 타입은 '봉인'되어 있지 않고 언제나 확장 가능하다.
자바스크립트의 클래스 역시 이와 같은 특성을 띄며, 구조적 타이핑의 특성 덕분에 유닛 테스팅을 오히려 손쉽게 할 수도 있다.
Item5. any 타입 지양하기
any 타입을 사용하면 타입 체커와 타입스크립트를 쓰는 목적과 기능자체를 상실해 버린다.
any 타입은 진짜 문제점을 감추며, 개발 생산성에 악영향을 미치며, 타입 시스템의 신뢰도를 떨어뜨린다. 최대한 지양하자.
writed 2022/06/18