Generic Arrow function in .tsx

function fn1<T = any>(arg: T): T {
    return arg;
}
const fn2 = function <T = any>(arg: T): T {
    return arg;
}
const fn3 = <T = any>(arg: T): T => {
    return arg;
}

보통 타입스크립트에서 제네릭 함수는 이런 문법으로 정의해서 사용하곤 한다.

하지만 .tsx 확장자를 가진 파일에서는 ES6에서 도입된 화살표 함수에서 제네릭을 사용할 때 위와 같은 식으로 기술하면 에러가 발생한다.

그 이유인즉슨, .tsx 확장자는 TypeScript와 JSX가 결합된 형태이기 때문에, <T = any> 제네릭에서 문제가 발생할 가능성이 있다는 것이다.

const fn4 = <T extends any>(arg: T): T => {
    return arg;
}
const fn5 = <T,>(arg: T): T => arg;

그렇기에 .tsx 확장자를 가진 파일에서 화살표 함수에 제네릭을 사용할 경우, 위처럼 제네릭 매개 변수에 extends를 사용해 타입스크립트 컴파일러에게 제네릭 화살표 함수라는 암시를 주어야 한다.

간단하게 사용한다면 fn5 함수처럼 후행 쉼표를 기술해서 사용하는 방법도 있다.

What is the syntax for Typescript arrow functions with generics?

원문: Medium