TS - all in one : 제네릭

https://github.com/ZeroCho/ts-all-in-one

ts 문법

• 제네릭
  타입을 변수처럼 만드는 것! → 함수를 사용할 때 타입이 정해질 수 있도록 해줌
  위치는? → 선언 시 이름 뒤에 위치

function a<T>() {}
class B<T>() {}
interface C<T> {}
type D<T> = {};
const e = <T>() => {};

• 제네릭 extends → 제네릭에 제한 걸기
  매개변수에서처럼 기본 타입 지정도 가능

function add<T extends string>(x: T, y: T): T { return x + y }

// <T extends {...}> // 특정 객체
// <T extends any[]> // 모든 배열
// <T extends (...args: any) => any> // 모든 함수
// <T extends abstract new (...args: any) => any> // 생성자 타입
// <T extends keyof any> // string | number | symbol

• 공변성 / 반공변성
  함수 간에 서로 대입 가능한가! 
  • 리턴값은 더 넓은 타입으로 대입 가능
  • 매개변수는 더 좁은 타입으로 대입 가능

function a(x: string | number): number {
  return 0;
}
type B = (x: string) => number | string;
let b: B = a;

• ts 타입 지정
  • as로 타입 지정 - 일회성(당장 다음 줄에서도 유지x) → 변수에 저장해서 사용하자

try {
  await axios.get();
} catch (err) {
  console.error((err as customError).response?.data);
  err.response?.data // err
}

try {
  await axios.get();
} catch (err) {
  const customError = err as customError
  console.error(customError.response?.data);
  customError.response?.data 
}

• 또는 as 대신 if문 통한 type narrowing
  (as는 실수 여지가 너무 많으므로...!)

try {
  await axios.get();
} catch (err) {
  if (err instanceof CustomError){
  	 // 이 때 interface는 js변환 시 사라지니 - type narrowing 으로 사용 불가
     // class를 사용해주자
     console.error(err.response?.data);
     err.response?.data 
  }
}