Typescript Generic

Generic

Typescript의 Generic은 재사용성이 높은 컴포넌트를 만들 때 자주 활용되는 특징입니다.

Generic이란 타입을 마치 함수의 파라미터처럼 사용하는 것을 의미합니다.

Generic의 장점

• 클래스나 메소드 내부에서 사용되는 객체의 타입 안정성을 높일 수 있습니다

• 반환값에 대한 타입 변환 및 타입 검사에 들어가는 노력을 줄일 수 있습니다.

Generic 실습 예제

아래는 Typescript의 원시 타입 문자/ 숫자/ 불린 타입과 any 타입, unkown 타입의 예시와 Generic 타입의 비교를 적어 놓았습니다.

// 1. 문자/숫자/불린 기본타입
const getPrimitive = (arg1: string, arg2: number, arg3: boolean): [boolean, number, string] => {
  return [arg3, arg2, arg1];
};

const result1 = getPrimitive("철수", 123, true);


// 2. any 타입(그냥 자바스크립트랑 같음)
const getAny = (arg1: any, arg2: any, arg3: any): [any, any, any] => {
  console.log(arg1 + 100); // any는 아무거나 다 됨! => 오류 발생이 쉬움
  return [arg3, arg2, arg1];
};

const result2 = getAny(123, 123, true);


// 3. unknown 타입(any 타입과 비슷하지만 조금 더 안전함)
const getUnknown = (arg1: unknown, arg2: unknown, arg3: unknown): [unknown, unknown, unknown] => {
  if (typeof arg1 === "number") console.log(arg1 + 100); // 중괄호 생략 가능

  return [arg3, arg2, arg1];
};

const result3 = getUnknown("철수", 123, true);


// 4. generic 타입
function getGeneric<MyType1, MyType2, MyType3>(arg1: MyType1, arg2: MyType2, arg3: MyType3): [MyType3, MyType2, MyType1] {
  return [arg3, arg2, arg1];
}

const result4 = getGeneric<string, number, boolean>("철수", 123, true);
// <> 안에 만들어준 타입을 쓸거라고 선언을 해주는것, 값 을 넣는대로 그 값의 타입으로 지정된다. -> 값을 넣는대로 타입을 명시
// 함수 실행문에 <>로 타입을 지정해줄수있다. -> 값이 들어가기전에 타입을 명시


// 5. generic 타입 - 2
function getGeneric2<T1, T2, T3>(arg1: T1, arg2: T2, arg3: T3): [T3, T2, T1] {
  return [arg3, arg2, arg1];
}
const result5 = getGeneric2<string, number, boolean>("철수", 123, true);


// 6. generic 타입 - 3
function getGeneric3<T, U, V>(arg1: T, arg2: U, arg3: V): [V, U, T] {
  return [arg3, arg2, arg1];
}
const result6 = getGeneric3<string, number, boolean>("철수", 123, true);


// 7. generic 타입 - 4
const getGeneric4 = <T, U, V>(arg1: T, arg2: U, arg3: V): [V, U, T] => {
  return [arg3, arg2, arg1];
};
const result7 = getGeneric4<string, number, boolean>("철수", 123, true);