2022년 2월 6일 https://www.youtube.com/watch?v=ViS8DLd6o-E

1부 - 타입스크립트 문법

2부 - 실전 타입스크립트 코드 작성하기 2022년 2월 21일

1. conditional type 을 활용하기

Item<T> - T 에 따라 달라지는 container

interface StringContainer {
  value: string;
  format(): string;
  split(): string[];
}

interface NumberContainer {
  value: number;
  nearestPrime: number;
  round(): number;
}

// T 는 type을 변수로 받는다
type Item1<T> = { //generic
  id: T,
  container: any; // any는 문제가 된다 🚨
};

//string이면 StringContainer를 받고싶고
//number이면 NumberContainer를 받고싶다
const item1: Item1<string> = {
  id: "aaaaaa",
  container: null
};

Item<T> T 가 string 이면 StringContainer, 아니면 NumberContainer

type Item2<T> = {
  id: T;
  // 3항 연산자로 받아버림 👀
  container: T extends string ? StringContainer : NumberContainer;
};

const item2: Item2<string> = {
  id: 'aaaaaa',
  container: null, // Type 'null' is not assignable to type 'StringContainer'.
};

Item<T> T 가 string 이면 StringContainer, T 가 number 면 NumberContainer 아니면 사용 불가

• never : 어떤 값도 넣을 수 가 없음

type Item3<T> = {
  // string | number이면 T를 사용하고 아니면 아무 형식도 받을 수 없다
  id: T extends string | number ? T : never;
  container: T extends string
    ? StringContainer
    : T extends number
    ? NumberContainer
    : never;
};

const item3: Item3<boolean> = {
  id: true, // Type 'boolean' is not assignable to type 'never'.
  container: null, // Type 'null' is not assignable to type 'never'.
};

ArrayFilter<T>

// T extends any[] : T가 array 형태면? T를 반환 아니면 never
type ArrayFilter<T> = T extends any[] ? T : never;

type StringsOrNumbers = ArrayFilter<string | number | string[] | number[]>;

// => 배열이 아니면 무시한다
// 1. string | number | string[] | number[]
// 2. never | never | string[] | number[]

// => 결론
// 3. string[] | number[]