Generic

TS, 명시적 타입 지정

TS는 JS의 슈퍼셋으로 JS에는 없는 타입을 명시적으로 지정할 수 있다.

에러 예제

function fun(a: string): string {
  return a;
}

fun(123);
// type 'number' is not assignable to type 'string'.

위의 코드처럼 인자 a에 string 타입을 명시적으로 지정해 주면 a에 123, 즉 숫자를 넣으면 'number 유형은 string 유형에 할당할 수 없습니다.'라고 에러알림이 뜬다.
즉, 123(number 유형)은 a(string유형)에 할당할 수 없다는 것이다.

에러 해결

그러면 에러를 해결하는 방법을 알아보자.

function fun(a: string | number): string | number {
  return a;
}

fun(123);

인자a에 타입을 string 또는 number이라는 유니온타입으로 명시하면 에러가 사라진다.

문제점

하지만 fun(123)에다가 마우스를 올려보면

위의 그림처럼 나온다. 123을 부여하면 number타입이 되고 return타입도 number가 되야하는데 ts는 정확히 타입을 읽지 못한다.

또한 any타입으로 지정하는 방법도 있다.

function fun(a: any): any {
  return a;
}

fun(123);

하지만 여전히 타입은 그냥 any로 나온다.

정확히 타입을 읽어주기 위해 generic type을 적용해보자

Generic 사용

function fun<T>(a: T): T {
  return a;
}

fun<number>(123);
fun(123);

위의 코드와 같이 generic을 설정해주고 fun(123)을 사용할때 방법은 2가지가 있다.

위의 그림과 같이 generic을 설정해 주면 타입을 정확히 인지한다.

Generic을 사용하는 이유

함수를 하나의 용도가 아닌 여러 용도로 사용하려면 타입을 유연하게 지정해야한다. 그때 함수의 인자는 어떤 타입이고, return은 어떤 타입인지 알기 위해서 사용한다.