TypeScript Generic

• Generic 타입 : 인자에 들어오는 타입을 그대로 사용할 수 있다.

(기본)

// 1. 들어온 타입을 그대로 사용
// argument로 데이터가 들어갈 때 타입이 지정됨
function getGeneric<MyType>(arg: MyType): MyType {
  return arg;
}

const aaa: string = "철수";
const result_1 = getGeneric(aaa);
const bbb: number = 123;
const result_2 = getGeneric(bbb);
const ccc: boolean = true;
const result_3 = getGeneric(ccc);

사용자가 원하는 이름으로 타입 지정 가능

// 2. 인자가 여러개일 때 (1)
function getGenerics<T1, T2, T3>(arg1: T1, arg2: T2, arg3: T3): [T3, T2, T1] {
  return [arg3, arg2, arg1];
}

// return 순서 -> 8,true,"철수"
const result2 = getGenerics("철수", true, 8); 

일반적으로는 T,U,V 같이 간결하게 사용한다.

// 3. 인자가 여러개일 때 (2)
function getGenericsTUV<T, U, V>(arg1: T, arg2: U, arg3: V): [V, U, T] {
  return [arg3, arg2, arg1];
}

// return 순서 -> 8,true,"철수"
const result3 = getGenericsTUV("철수", true, 8); 

응용

// 4. 화살표 함수에서의 제네릭
const getGenericsArrow = <T, U, V>(arg1: T, arg2: U, arg3: V): [V, U, T] => {
  return [arg3, arg2, arg1];
};
const result4 = getGenericsArrow("철수", true, 8);

// 5. useState에서의 제네릭
const [aaa, setAaa] = useState<number>(11);