[TypeScript] Generic과 any의 차이

 

타입스크립트 강의중 제네릭에 관해 배우고 있는데 문득 의문이 들었다.

제네릭은 한가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는데 사용하는데, 모든 타입

을 허용하는 any와 무엇이 다른지 궁금했다.

타입스크립트 공식홈페이지에 가니 친절하게 설명이 나와있었다.

  

    
    
    
    
  
function logText(text: any): any {
  return text;
}

위 코드를 보면 함수의 동작에는 문제가 없다. 다만, 함수의 인자로 어떤 타입이 들어갔고 어떤 값이 반환되는지 알 수 가 없다.

any라는 타입은 타입 검사를 하지 않기 때문이다.

이러한 문제점을 해결할 수 있는 것이 제네릭이다.

  

    
    
    
    
  
function logText<T>(text: T): T {
  return text;
}

함수의 이름 바로 뒤에 <T>라는 코드를 추가한다. 그리고 함수의 인자와 반환 값에 모두 T라는 타입을 추가한다. 이렇게되면 함수를 호출할 때 넘긴 타입에 대해 타입스크립트가 추정할 수 있게 된다.

따라서, 함수의 입력 값에 대한 타입과 출력 값에 대한 타입이 동일한지 검증이 가능한 것이다.

  

    
    
    
    
  
// #1
const text = logText<string>("Hello Generic");
// #2
const text = logText("Hello Generic");

위에서 선언한 함수는 이렇게 2가지 방법으로 호출을 할 수 있다.

보통 두 번째 방법이 코드도 더 짧고 가독성이 좋기 때문에 흔하게 사용되지만, 복잡한 코드에서 두 번째 코드로 타입 추정이 되지 않는다면 첫 번째 방법을 사용할 수 있다.