Typescript Generic

[any] vs [unKnown]

[any] = 어떤 타입의 입력 값이라도 전부 허용됨 (오류발생 가능하기에 가급적 사용을 자제해야 함!)

[unKnown] = 알 수없음, 모름을 뜻하며 타입이 지정되지 않았음으로 오류가 발생할 수 있음을 경고하는 타입

// 3. unknown 타입 => 받을 때는 그대로 타입 상관없이 받지만, 실행될 때는 특정 조건이 붙어야함

const getUnknown = (arg1: unknown, arg2: unknown, arg3: unknown): [unknown, unknown, unknown] => {
  if (typeof arg1 === "number") console.log(arg1 * 1000);
  return [arg3, arg2, arg1];
};

• unKnown의 경우 타입 지정은 any처럼 다 되지만, 타입 지정된 것이 실행될 때는 특정 조건을 붙여야만 허용 됨
  *즉, 타입이 지정된 조건에 부합할 때만 실행되도록 하여 간접적으로 타입을 명시하는 꼴

Typescript Generic

// Generic 사용 예제
export function getGeneric<MyType>(arg: MyType): MyType {
  return arg;
}
const aaa: string = "철수";
const bbb: number = 8;
const ccc: boolean = true;
const result41 = getGeneric(aaa);
const result42 = getGeneric(bbb);
const result43 = getGeneric(ccc);

• 함수 실행 시 타입스크립트의 Generic 타입을 이용하면 값이 인자로 들어올 때마다 들어오는 인자의 타입에 맞게 해당 타입을 명시 가능

Generic Type 사용방법

const getGeneric3 = <T, U, V>(arg1: T, arg2: U, arg3: V): [V, U, T] => {
  return [arg3, arg2, arg1];
};

• 함수의 매개변수 자리(소괄호) 앞에 <T, U, V> 를 작성해서 이 함수에 들어오는 값의 타입을 T, U, V 라는 변수로 지정 (그때그때 들어오는 값에따라 타입이 바뀔 수 있음)

• 들어오는 인자의 타입을 아까 지정한 T, U, V 로 지정

• return 되는 값을 순서에 맞게 V, U, T 로 지정

[이런 식으로 작성함으로써 매번 들어오는 값의 타입이 바뀌면, 그 타입에 맞게 T, U, V에 들어오는 인자의 각 타입이 알맞게 지정됨]

Generic Type 응용 - withAuth

• Component 인자의 타입은 React에서 자체적으로 제공하는 ComponentType 사용
  
  
  
• props 매개변수의 인자로는 반드시 객체형태가 들어가야 하기에 (이후 return 부분에서 spread로 뿌려줘야 함) <P extends { }> 를 사용해 P의 Generic 타입이 반드시 객체여야 함을 명시해 줌