화살표 함수에 제네릭을 추가하는 방법

function fn<T>(args: T): T {
	return args;
}

const fn2 = <T>(args: T): T => {
	return args;
};
// 에러 발생: JSX element 'T' has no corresponding closing tag.

위의 두 함수는 타입 파라미터로 제네릭을 받는 동일한 함수이지만, 이를 화살표 함수로 작성할 경우에는 에러가 발생합니다.

화살표 함수 앞의 타입 파라미터를 감싼 <> 태그가 컴파일시, JSX 요소로 처리되어 발생하는 문제인데요.

구글링을 해보면,

1. <T,> 와 같이 제네릭 뒤에 콤마를 붙이거나
2. T extends {} 와 같이, extends 구문을 통해 제네릭에 제약을 추가하라고 되어있습니다.

개인적으로 위의 2가지 해결책 모두 에러를 빗겨 나가기 위한 살짝 편법스러운(?) 느낌이 들어서, 다른 방법을 찾아보았습니다.

function fn<T>(args: T): T {
	return args;
}
// 제네릭 타입 파라미터를 가진 함수는, 위와 같이 함수 선언문으로 작성하는 것이 일반적입니다.

const fn2: <T>(args: T) => T = (args) => args;
// 화살표 함수에서 제네릭 타입 파라미터를 쓰기 위해서는
// 변수의 할당 부분에 제네릭을 쓰는 것이 아니라, 변수의 타입 선언부에 타입을 미리 선언해주면 됩니다.

함수는 객체이기 때문에, 객체처럼 프로퍼티를 선언할 수 있습니다.
이때는, () => {} 와 같은 형태가 아닌 객체 리터럴 형태로 작성해야 하는데요.

const fn2: { <T>(args: T): T } = (args) => args;

객체 리터럴 형태의 타입 선언이 가능하니, 이를 인터페이스로 빼서 타입을 선언하는 것도 가능합니다.

interface Fn {
	<T>(args: T): T;
}

const fn2: Fn = (args) => args;

- 참고자료

Generic Types
Call Signatures