TypeScript에서 <T>란 무엇일까? - Generic Type

 

 

들어서며

TypeScript는 단순하게 JavaScript에서 Type을 추가해준 언어이다.

하지만 TypeScript를 쓰면서 <T>라는 새로운 아이를 만나게 된다.

 

처음에는 <T>를 만나거나 쓸 일이 없어 단순하게 넘겼지만 TypeScript로 개발을 하면서 자연스럽게 <T>를 만나게 되었다.

그럼 <T>가 무엇이고 왜 TypeScript에서는 이걸 쓰는지에 대해서 이야기해보도록 하자.

 

 

쓰는 이유

JavaScript는 다른 언어들과 달리 type을 입력하지 않기 때문에 자유롭다.

그만큼 위험부담이 높기 때문에 JavaScript 개발자들은 필수적으로 TypeScript를 이용해서 type에 따른 위험 요소를 줄이고자 한다.

 

TypeScript는 함수나 클라스를 사용하기 위해서는 미리 Type을 지정해줘야 한다.

그렇지만 함수나 클래스를 정의하는 시점에 Type을 선언하기 어렵거나 번거로운 경우가 있다.

어떤 경우인지 아래 코드를 보면서 이야기해보자.

 

const useGeneric = <T>(a: T) => {
    if(typeof a === 'string') {
        console.log('string입니다.')
    } else if(typeof a === 'number'){
        console.log('number입니다.')
    }
    ...
}
  
useGeneric('i')

사용자로부터 입력한 값에 따라 결과값이 달라지는 함수를 작성했다.

어떤 값을 useGeneric에 넣어도 Type으로 오류가 날 이유가 없다.

선언 시점이 아닌 생성한 시점에서 타입을 부여하기 때문에 효율적인 코드를 작성할 수 있다.

 

 

쓰지 않는다면

 

첫번째는 Type을 미리 지정한다.

Type을 미리 지정할 경우 위와 같이 다른 Type을 사용할 경우 오류가 발생한다.

그렇기 때문에 범용성이 많이 떨어진다.

 

 

두번째는 any를 이용한다.

TypeScript에서 any를 쓰겠다는 것은 그냥 TypeScript를 안 쓰겠다는 말과 같다 😅

모든 타입 검증을 무력화하기 때문에 any 자체를 안 쓰는것이 좋다.

 

 

 

개념

이처럼 Type 검증을 유용하게 해주는 아이를 Generuc 즉, 제너릭이라고 명칭한다.

제너릭을 쓰는 방법은 아래와 같다.

 

// 위와 아래가 같은거다
const generic = <T>(b: T) => {
    ...
}

const generic = <U>(b: U) => {
    ...
}

제너릭을 쓰고 싶다면 < >로 표시해주면 된다.

<T>에서 T는 관용적으로 사용하지만 원한다면 다른 이름으로 해줘도 된다!

 

더 자세한 제너릭 사용법은 TypeScript 공식문서에서 확인해보자.

https://www.typescriptlang.org/ko/docs/handbook/2/generics.html#%EC%A0%9C%EB%84%A4%EB%A6%AD-%ED%83%80%EC%9E%85-generic-types

Documentation - Generics