Typescript/JSX with React에서 화살표 기능이 있는 제네릭을 사용하는 방법은 무엇입니까?

Typescript/JSX with React에서 화살표 기능이 있는 제네릭을 사용하는 방법은 무엇입니까?

Visual Studio에서 ".ts" 파일에 입력하는 Typescript를 사용하여 다음 선언을 고려합니다.

export const foo = <T>(myObject: T) => myObject.toString();

이것은 잘 작동하고, 유형 검사도 괜찮고, 모든 것이 좋습니다.

이제 정확하게 동일한 코드를 JSX 및 React에 사용되는 ".tx" 파일에 넣습니다.

IntelliSense는 <T>를 React JSX 요소로 만들려고 하기 때문에 매우 화가 나서 불평합니다.하지만 제 의도는 컴파일러가 그것을 제네릭 형식 지정자로 취급하도록 하는 것입니다.

컴파일러에서 다음 문제가 발생합니다.

[gulp-typescript] 17008 JSX 요소 'T'에 해당하는 닫는 태그가 없습니다.

저는 IDE와 컴파일러가 JSX를 탈출하게 하고 컴파일러가 JSX를 사용하지 않는 경우처럼 <T>를 제네릭으로 이해하도록 하기 위해 수많은 구문 해결 방법을 시도했습니다.하지만 이걸 할 수 있는 마법의 소스를 찾을 수가 없습니다.

나보다 똑똑한 사람 중에 이걸 알아낼 수 있는 사람?

단일 유형 매개 변수가 있는 경우 TypeScript는 JSX 여는 태그인지 여부를 확신하지 못합니다.하나를 선택해야 하기 때문에 JSX와 함께 합니다.

정확하게 동일한 의미를 갖는 함수를 원한다면 다음의 제약 조건을 명시적으로 나열할 수 있습니다.T:

const foo = <T extends {}>(myObject: T) => myObject.toString();

이렇게 하면 일반 형식 매개 변수를 사용할 수 있도록 TypeScript의 모호성이 해소됩니다.또한 형식 매개 변수는 항상 다음과 같은 암묵적 제약 조건을 가지기 때문에 동일한 의미를 갖습니다.{}.

해결 방법은 뒤에 쉼표를 추가하는 것입니다.

export const foo = <T,>(myObject: T) => myObject.toString();

개인적으로 사용합니다.extends unknown가장 안전하게 들립니다.

const foo = <T extends unknown>(myObject: T) => myObject.toString();

나는 그것을 피할 방법을 생각해 낼 수가 없고, 당신이 그것을 알게 되어 기쁠 것입니다.
그러나 동일한 목표를 달성하기 위한 다른 방법은 다음과 같습니다.

export const foo = function<T>(myObject: T) { return myObject.toString(); }

컴파일러는 제네릭에 대해 불평하지 않을 것입니다.

언급URL : https://stackoverflow.com/questions/41112313/how-to-use-generics-with-arrow-functions-in-typescript-jsx-with-react