6. 편집기를 사용하여 타입 시스템 탐색하기
7. 타입이 값들의 집합이라고 생각하기
타입 단위의 크기
•
공집합: never
•
unit 타입, 리터럴 타입: type A = 'A'
•
union 타입: type AB = 'A' | 'B'
& : 교집합, | : 합집합
인터페이스의 속성이 아닌, 속성의 값이 교집합이라고 생각해야합니다.
type A = {
a: string;
b: 'A' | 'B';
};
type B = {
b: 'B' | 'C';
c: string;
};
type C = A & B;
const c: C = {
a: '1',
b: 'B',
c: '1',
};
type D = A | B;
const d: D = {
a: '1',
b: 'A',
c: '2'
} // 에러
JavaScript
복사
타입 연산자는 인터페이스의 속성이 아닌, 값의 집합에 적용됩니다.
keyof (A&B) = (keyof A) | (keyof B)
keyof (A|B) = (keyof A) & (keyof B)
JavaScript
복사
extends
타입에선 부분 집합이라고 생각하면 됩니다.
Vector2D extends Vector1D {};
Vector1D ⊂ Vector2D
JavaScript
복사
extends는 제네릭에선 한정자로 쓰입니다.
function getKey<K extends string>(val: any, key: K){}
JavaScript
복사
8. 타입 공간과 값 공간의 심벌 구분하기
•
타입스크립트는 값과 타입을 구분해줘야하며, class, enum은 값과 타입 두가지 모두 사용할 수 있습니다.
•
class는 값으로 쓰일 땐 생성자, 타입으론 형태(속성, 메서드)가 됩니다.
9. 타입 단언보단 타입 선언을 사용하기
•
단언보단 선언을 사용해야합니다.
•
화살표 함수의 명시방법을 익혀야합니다.
const people = ['a', 'b', 'c'].map((name):Person => ({name}));
JavaScript
복사
•
타입스크립트보다 타입을 더 잘아는경우(ex. dom)에선 사용해도됩니다.
10. 객체 래퍼 타입 피하기
•
String = string은 가능하지만 string = String은 불가합니다.
•
객체타입은 지양하고, 기본형 타입을 사용해야합니다.
•
symbol과 bigint의 경우 기본형을 생성하기 때문에 사용해도 됩니다.
11. 잉여 속성 체크의 한계 인지하기
•
객체 리터럴을 변수에 할당하거나, 매개변수로 사용시 잉여 속성 체크가 됩니다.
const a: { a: string } = { a: 'ㅁ' } // 에러 발생
const b: { a: string } = a; // 정상 동작
JavaScript
복사
•
정해진 속성외에 다른 속성이 없는지 확인합니다.
•
단, 변수에 할당 후 다시 할당하는 방식은 체크하지 못합니다.
const a: { title: string } = document; // 정상
JavaScript
복사
12장 함수 표현식에 타입 적용하기
•
매개 변수나 반환값에 타입을 명시하기 보다 함수 표현식 전체에 타입 구문을 적용하는 것이 좋습니다.
const a: MouseEventHandler = (e) => {}
JavaScript
복사
13장 타입과 인터페이스의 차이점 알기
•
타입은 유니온( | ), 배열 등 복잡한 타입확장이 가능합니다.
•
인터페이스는 선언 병합이라는 보강(augument) 기법이 가능합니다.
interface IState {
name: string;
capital: string;
}
interface IState {
poluation: number;
}
JavaScript
복사
14. 타입 연산과 제네릭 사용으로 반복 줄이기
•
keyof, typeof, 인덱싱, 매핑된 타입등 도구 사용하기
•
Pick, Partial, ReturnType 같은 제네릭 타입에 익숙해지기
◦
Partial<T>
◦
ReadOnly<T>
◦
Record<K,T>
◦
Pick<T,>
◦
Omit<T,K> : 프로퍼티 중 K 제거
▪
type T = Omit<{a: ‘a’, b: ‘b’}, ‘b’>
◦
Exclude<T,U> : 속성 중 U 제거
▪
type T = Exclude<’a’ | ‘b’ | ‘c’, ‘b’> // ‘a’ | ‘c’
◦
Extract<T,U>
◦
NonNullable<T>
▪
null과 undefined를 제외한 타입
◦
Parameters<T>
▪
매개변수 타입들의 튜플 타입 구성
•
declare f({a: string, b: number}): void
•
type T = Parameters<typeof f>; // [{a: string, b: number}]
◦
ConstructorParameters<T>
▪
생성자 함수의 매개변수 타입 추출
•
type T = ConstructorParameters<ErrorConstructor>; // [(string | undefined)?]
•
type T = ConstructorParameters<FunctionConstructor>; // string[]
•
type T = ConstructorParameters<RegExpConstructor>; // [string, (string | undefined)?]
◦
ReturnType<T>
▪
T의 반환타입
◦
InstanceType<T>
▪
생성자 타입 T의 인스턴스 타입
•
class C = {a = 1} ; InstanceType<typeof C>;
◦
Required<T>
15. 동작 데이터에 인덱스 시그니처 사용하기
•
가능하다면 인터페이스, Record 보단 정확한 타입을 사용하는 편이 좋습니다.
16. number 인덱스 시그니처보다는 Array, 튜플, ArrayLike 사용하기
•
number 인덱스를 속성 이름으로 사용지말고, Array, 튜플 등 사용하는 편이 좋습니다.
•
배열의 키는 숫자가 아닌 문자열입니다.
17. 변경 관련된 오류 방지를 위해 readonly 사용하기
•
변경하지 않는 경우 readonly 사용 권장합니다.
•
readonly는 얕게 동작한다는 것을 고려해야합니다.
18. 매핑된 타입을 사용하여 값을 동기화하기
•
매핑된 타입을 사용해서 값과 타입 동기화 REQUIRE_UPDATE: {[k in keyof ScatterProps]: boolean}
•
새로운 속성 추가 시 선택을 강제하도록 매핑된 타입 사용
// 필요없는 속성이나, 키 조건에 따른 연산이 가능해집니다.
const REQUIRE_UPDATE: {[k in keyof ScatterProps]: boolean} = {
ys: true,
...,
onClick: false
};
function shouldUpdate(oldProps: Scatter, newProps: Scatter){
...
if(oldProps[k] !== newProps && REQUIRE_UPDATE[k])
...
}
JavaScript
복사