함수를 만들어보자.
홀화살괄호 내에는 T뿐만아니라 2개, 여러 개를 포함시킬 수 있다.
function helloGeneric<T, U, K>
T, U, K
는 함수 내에서 유효한 제네릭이다.
작성하는 방법은 클래스
, array
, 함수
등 더 많아질 수 있으나 사용하는 방법은 명확하다.
function helloGeneric<T>(message: T): T{
return message;
}
helloGeneric<string>("Hey");
helloGeneric<string>(39); // Error
string
으로 타입을 지정했으니, 39
라는 숫자를 넣으면 에러가 뜬다.
제네릭을 가져다써서 변수처럼 지정해 쓰는 방식
과 그렇지 않은 방식
이 있다.
helloGeneric<string>("Hey");
(string
으로 지정된다.)
helloGeneric(36);
(36
으로 지정된다.)
위와 같이 제네릭을 쓰지 않으면 <T>
가 자동적으로 추론이 된다. 추론 규정에 따라서 T
가 36
이 된다.
우리의 생각으로는 36
이면 Number
로 출력이 되어야 한다고 생각하겠지만 TypeScript는 가장 좁은 범위의 타이핑을 추론하기 때문에 36
을 넣게 되면 T
자체는 36
이 된다. 결과물인 return type도 36
이 된다.
그러니, 넣어서 사용하면 <T>
뒤의 인자가 제한이 되고, 넣지 않고 사용하면 <T>
가 추론된다고 이해하면 된다.
또한, 아래 그림과 같이 T
뿐만 아니라 더 많은 인자를 넣어줄 수 있다.
현재, U
를 리턴타입에 사용하지 않고 있기에 의미가 없긴 하지만 T
와 조합해서 사용하면 의미가 있을 수 있다.
위와 같이 두 가지 제네릭을 사용하는 경우엔
인자를 U
까지 채워라는 에러 메세지가 발생하는 것을 볼 수 있다.
string, number
로 T, U
를 채워 주었고, 인자로 "Hey"
와 12
를 넣어주니 에러가 사라졌다.
또한 변수를 지정하지 않은 방식 또한 21, 31
을 넣어줌으로써 T, U
를 21, 31
로 만들어 주었다.
와우 역시 민영님 최고!!