아이템6. 편집기를 사용하여 타입 시스템 탐색하기
편집기를 사용하면 어떻게 타입 시스템이 동작하는지, 그리고 타입스크립트가 어떻게 타입을 추론하는지 개념을 잡을 수 있다.
타입스크립트가 동작을 어떻게 모델링하는지 알기 위해 타입 선언 파일을 찾아보는 방법을 터득해야하낟.
아이템7. 타입이 값들의 집합이라고 생각하기
타입을 값의 집합으로 생각하자.
이 집합은 유한하거나 무한하다.
타입스크립트 타입은 엄격한 상속 관계가 아니라 겹쳐지는 집합으로 표현된다.
두 타입은 서로 서브타입이 아니면서도 겹쳐질 수 있다.
한 객체의 추가적인 속성이 타입 선언에 언급되지 않더라도 그 타입에 속할 수 있다.
타입 연산은 집합의 범위에 적용된다.
A와 B의 인터섹션은 A의 범위와 B의 범위의 인터섹션이다. 객체 타입에서는 A & B인 값이 A와 B의 속성을 모두 가짐을 의미한다.
'A는 B를 상속', 'A는 B에 할당 가능','A는 B의 서브타입'은 A는 B의 부분 집합과 같은 의미이다.
타입스크립트 용어와 집합 용어 비교
| 타입스크립트 용어 | 집합 용어 |
|---|---|
| never | 공집합 |
| 리터럴 타입 | 원소가 1개인 집합 |
| 값이 T에 할당 가능 | 값이 T의 원소 |
| T1이 T2에 할당 가능 | T1이 T2의 부분 집합 |
| T1이 T2를 상속 | T1이 T2의 부분 집합 |
| T1 or T2 | T1과 T2의 합집합 |
| T1 & T2 | T1과 T2의 교집합 |
| unknown | 전체 집합 |
아이템8. 타입 공간과 값 공간의 심벌 구분하기
타입스크립트 코드를 읽을 때 타입인지 값인지 구분하는 방법을 터득해야 한다.
타입스크립트 플레이그라운드를 활용해 개념을 잡는 것이 좋다.
모든 값은 타입을 가지지만, 타입은 값을 가지지 않는다. type과 interface같은 키워드는 타입 공간에만 존재
class나 enum같으 ㄴ키워드는 타입과 값 두 가지로 사용될 수 있다.
"foo"는 문자열 리터럴이거나, 문자열 리터럴 타입일 수 있다.
typeof, this 그리고 많은 다른 연산자들과 키워드들은 타입 공간과 값 공간에서 다른 목적으로 사용될 수 있다.
두 공간 사이에서 다른 의미를 가지는 코드 패턴들
- 값으로 쓰이는 this는 자바스크립트의 this 키워드이다. 타입으로 사용되는 this는 일명 다형성 this 라고 불리는 this의 타입스크립트 타입이다. 서브클래스의 메서드 체인을 구현할 때 유용하다.
- 값에서 &와 |는 AND와 OR 비트연산이다. 타입에서는 인터섹션과 유니온이다.
- const는 새 변수를 선언하지만, as const는 리터럴 또는 리터럴 표현식의 추론된 타입을 바꾼다.
- extends는 서브클래스 또는 서브타입 또는 제너릭 타입의 한정자를 정의할 수 있다.
- in은 루프 또는 매핑된 타입에 등장한다.
아이템9. 타입 단언보다는 타입 선언을 사용하기
interface Person { name: string };
const alice:Person = { name: 'Alice' }; // 타입 선언
const bob = { name: 'Bob' }; // 타입 단언
const alice:Person = {} // type error
const bob = {} as Person // no error첫 번째는 타입 선언을 하여 그 값이 선언된 타입임을 명시하고, 두 번째는 타입 단언을 수행하여 타입스크립트가 추론한 타입이 있더라도 Person 타입으로 간주한다.
const elNull = document.getElementById('foo'); // 타입은 HTMLElement | null
const el = document.getElementById('foo')! // 타입은 HTMLElement
// 접미사로 쓰인 !는 그 값이 null이 아니라는 단언문으로 해석된다.타입 단언보다 타입 선언을 사용해야 한다.
화살표 함수의 반환 타입을 명시하는 방법을 터득해야 한다.
타입스크립트보다 타입 정보를 더 잘 알고 있는 상황에서는 타입 단언문과 null 아님 단언문을 사용하면 된다.
아이템10. 객체 래퍼 타입 피하기
기본형 값에 메서드를 제공하기 위해 객체 래퍼 타입이 어떻게 쓰이는지 이해해야 한다. 직접 사용하거나 인스턴스를 생성하는 것은 피해야 한다.
타입스크립트 객체 래퍼 타입은 지양하고, 대신 기본형 타입을 사용해야 한다.
String => string, Number => number, Boolean => boolean, Symbol => symbol, BigInt => bigint
frontend-react