6. 편집기를 사용하여 타입 시스템 탐색하기

7. 타입이 값들의 집합이라고 생각하기

7-1. 타입은 할당 가능한 값들의 집합이다.

• never - 공집합
• 유닛 타입 (리터럴 타입) - 한 가지 값만 포함
  • ex) type A = ‘A’;
• 유니온 타입 - 여러 가지의 값
  • ex) type AB = ‘A’ | ‘B’;
• A & B - A 와 B의 교집합
• A | B - A 값의 집합과 B 값의 집합의 합집합
• A extends B - A는 B의 부분집합 (B 속성의 값 +알파)
  • A는 B를 상속
  • A는 B에 할당 가능
  • A는 B의 서브타입

참고 - https://joshua1988.github.io/ts/guide/operator.html#union-type을-쓸-때-주의할-점

7-2. keyof

• (기본개념) 객체 형태의 타입을, 속성들만 뽑아 유니온 타입으로 만들어주는 연산자
  • 예시

keyof (A&B) 는
(keyof A) | (keyof B) 와 같다

keyof (A|B) 는
(keyof A) & (keyof B) 와 같다

8. 타입 공간과 값 공간의 심벌 구분하기

• (기본개념) 제네릭
  • 정의 - 타입을 마치 함수의 파라미터처럼 사용하는 것
  • 예시

8-1. 타입스크립트 플레이그라운드 활용하기

• TS → JS 결과물을 보여주기 때문에 심벌이 사라진다면 타입임을 알 수 있다

8-2. class 와 enum

• 타입 - 속성과 메서드 사용

• 값 - 생성자 사용

• 생성자 타입과 인스턴스 타입을 전환

  type C = InstanceType<typeof Cylinder>;

8-3. typeof

• 타입 - 타입스크립트 타입
• 값 - 자바스크립트 런타임의 typeof 연산자

8-4. 타입의 속성을 얻을 때에는 속성 접근자 [] 사용하기

8-5. 구조 분해 할당

• 예시

9. 타입 단언보다는 타입 선언을 사용하기

interface Person {
	name: string
};

9-1. 타입 선언과 타입 단언

• 타입 선언

  const alice: Person = { name: ‘Alice’ };
  

  → 할당되는 값이 해당 인터페이스를 만족하는지 검사

  → 지향

• 타입 단언

  const alice = { name: ‘Alice’ } as Person;
  

  → 강제로 타입을 지정

  → 지양

9-2. 화살표 함수

const people = ['a', 'b', 'c'].map(name => ({name}));

// { name: string; }[] 으로 추론됨

→ 화살표 함수의 반환 타입 선언

const people = ['a', 'b', 'c'].map(
	(name): Person => ({name})
);

// Person[] 으로 추론됨

• 타입스크립트보다 타입 정보를 더 잘 알고 있는 상황에서만 타입 단언문과 null 아님 단언문(!) 사용

10. 객체 래퍼 타입 피하기

10-1. 기본형과 객체 래퍼 타입

• string 기본형에는 메서드가 없지만, JS에서 String이라는 객체 래퍼 타입을 정의하여 메서드를 갖도록 했다

10-2. 기본형 타입을 사용하자

• 기본형 타입은 객체 래퍼 타입에 할당 가능하지만 반대는 불가능
• string, number, boolean, symbol, bigint 를 사용하자!

11. 잉여 속성 체크의 한계 인지하기

11-1. 잉여 속성 체크

• 타입이 명시된 변수에 객체 리터럴을 할당할 때, 해당 타입 외의 속성은 없는지 확인

11-2. 잉여 속성 체크의 적용범위

• 적용 O
  • 객체 리터럴을 변수에 할당 / 함수 매개변수로 전달할 때
• 적용 X
  • 임시 변수를 사용한 할당
  • 타입 단언문

11-3. 공통 속성 체크

• 예시
• 약한 타입과 관련된 할당문마다 수행

12. 함수 표현식에 타입 적용하기

12-1. 함수 표현식 사용하기

• 타입스크립트에서는 함수 표현식과 함수 선언문 중 함수 표현식 지향

• 함수의 매개변수, 반환값 전체를 함수 타입으로 선언할 수 있기 때문

  type DiceRollFn = (sides: number) => number;
  const rollDice: DiceRollFn = sides => { /* ... */ };
  

12-2. 같은 타입 시그니처를 반복적으로 작성했다면 함수 타입을 분리하기

13. 타입과 인터페이스의 차이점 알기

13-1. 유사점

• 인덱스 시그니처 O
• 함수 타입 정의 O
• 제네릭 O
• 타입은 인터페이스를 확장, 인터페이스는 타입을 확장 가능

13-2. 차이점

13-3. 어떨 때 type, 어떨 때 interface를 써야 할까?

14. 타입 연산과 제네릭 사용으로 반복 줄이기