[TypeScript] 제네릭 문법

💡 제네릭은 C#, Java 등의 언어에서 재사용성이 높은 컴포넌트를 만들 때 자주 활용되는 특징이다. 특히, 한가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는데 사용된다.

제네릭 타입

type GenericType<T> = T;
let generic1: GenericType<number> = 1;
let generic2: GenericType<string> = "1";
let generic3: GenericType<boolean> = true;
let generic4: GenericType<number[]> = [1];

GenericType 이라는 타입에 <T> 가 바로 제네릭 문법이다. generic1,2,3,4 네 가지 모두 다 GenericType 타입이지만 "<>" 안에 어떤 타입을 넣느냐에 따라서 변수에 할당 할 수 있는 타입이 달라진다.

 

제네릭 인터페이스

interface Ten<T> {
  arr: T[];
}
let genericArr: Ten<number> = { arr: [1, 2, 3] };

  genericArr은 Ten 타입이지만, number형의 Ten 타입이다.

 

제네릭 함수 

function genericFn<T>(param: T): T | void {
  if (typeof param === "number") {
    console.log(param);
  } else {
    return param;
  }
}
genericFun(1) //console.log(1)
let genericFnReturn1 = genericFn('text') //return 'text'
let genericFnReturn2 = genericFn(true) //return true

genericFun은 제네릭 함수이다. genericFun함수 뒤의 "<>" 에 어떤 타입을 넣는지에 따라 return 이 달라진다.

 

제네릭 클래스

class GenericClass<T, U> {
  constructor(public numberData: T, public StringData: U) {}
}
const GenericInstance = new GenericClass<number, string>(1, "one");
console.log(GenericInstance);

여러 가지 유동적인 타입을 넣어야 할 경우에는 위와 같이 "<>" 안에 T, U 등등을 넣어서 사용하면 된다.

 

제네릭을 사용하는 이유

제네릭은 언뜻 보면 any와 비슷해 보인다.

function anyFn(param:any):any{
  return param
}

anyfun 함수의 파라미터타입은 any이고 return 타입도 any이기 때문에 어떤 파라미터를 넣어도 상관이 없다, 하지만 이렇게 함수, 혹은 변수 등등을 작성했을 경우 어떤 타입을 사용하는지, 어떤 타입이 반환되는지 확인하기 어렵다. 

anyfun(genericFunReturn1)//??

이렇게 실행했을 때 파라미터 genericFunReturn1이 어떤 타입인지 확인하기 위해서 코드를 찾아보거나 콘솔에 찍어봐야 알 수 있다.