2024-07-02

Generic on Arrow Function

파라미터 앞에 <>를 사용해서 제네릭을 선언한다.

<> 위치를 함수명 뒤라고 기억하면, 화살표 함수에서는 함수명이 없기 때문에 헷갈릴 수 있다.

일반 함수에서:

ts
function identity<T>(arg: T): T {
  return arg;
}Try

ts
function identity<T>(arg: T): T {
  return arg;
}Try

화살표 함수에서:

ts
const identity = <T>(arg: T): T => {
  return arg;
};Try

ts
const identity = <T>(arg: T): T => {
  return arg;
};Try

특이사항은 tsx 파일에서의 사용법.

tsx 에서 화살표 함수에 제네릭을 사용할 때 <> 문법이 JSX 태그로 인식되어 오류가 발생해서 혼란스러워 했던 적이 있다.

<T, > 처럼 trailing comma를 사용하면 오류가 발생하지 않는다.

이 방법을 지원하기전에는 컴파일러가 제네릭을 JSX 태그와 구별해서 인식하도록 extends 같은 키워드를 사용했다:

• <T extends {}>
• <T extends unknown>

코드 베이스에서 이런 라인을 발견해도 당황하지 말자.

참고

• What is the syntax for Typescript arrow functions with generics?