React에서 `(v : T) => v`를 쓰면 오류가 발생하는 이유

소개

Dwango에서 니코니코 생방송의 프론트 개발을 담당하고 있는 @ 미스켄 입니다.

React에서 개발하는 동안 매우 간단한 Generics 함수를 작성하면 오류가 발생하여 빌드가 통과하지 못했다는 경험이 없습니까?

그것도 항상 다니지 않는 것이 아니라 지나갈 때도 있다. . . 라는 같은 이상한 현상.

이번에는 처음 만났을 때는 확실히 당황하는 이 현상에 대해 설명합니다.

오류가 발생한 예

예를 들어, 이것만큼 간단한 코드에서도 오류가 발생합니다.
구문적으로는 잘못되지 않을 것 같지만.

const F1 = <T>(v: T) => v;

playground로 확인

오류가 되지 않는 예

다음에 에러가 되지 않는 예를 소개합니다. (그렇다고해도 코드는 변하지 않지만)

const F1 = <T>(v: T) => v;

playground로 확인

두 가지 예의 차이

에러가 되는 예와 에러가 되지 않는 예의 차이는, 구문을 JSX 로서 인식할지 어떨지의 차이입니다.
playground의 설정에서 말하는 곳의 다음.

오류가 발생할 때

오류가 없을 때

tsx와 ts의 차이에주의

즉 문제의 코드는 tsx 라면 <T> 의 부분이 JSX 라고 인식되므로, 이후의 기술이 부적절하기 때문에 구문 에러가 됩니다만, ts 라면 JSX 라고는 인식되지 않기 때문에 구문 에러가 되지 않습니다.

대처법

원인은 모르겠지만, 에러를 없애기 위해서 아래와 같이 재기록하고 있는 분도 있는 것은 아닐까요.

const F1 = <T extends any>(v: T) => v;

playground로 확인

여기에는 더 간단한 해결책이 있으며 쉼표를 더하면 됩니다.

const F1 = <T,>(v: T) => v;

playground로 확인

이굴을 모르면 이해하기 어렵지만, 코드 자체에 의미를 가지지 않는다는 의미에서는 이것이 적절할지도 모르겠네요.

자신은 TypeScript issue 를 바라보고 있을 때 이 쓰는 법을 알았습니다.