Wie Generics mit Pfeilfunktionen in Typescript/JSX mit React verwenden?

Question

Mit Typoskript, in Visual Studio eingeben, in eine „.ts“ Datei, sollten Sie die folgende Erklärung ab:

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

Dies funktioniert gut, Typprüfung ist in Ordnung, alles ist groß.

Platzieren Sie jetzt genau denselben Code in eine ".tsx" -Datei, die für JSX und React verwendet wird.

Intellisense wird sehr verärgert und beschwert sich, weil es versucht, die < T> in ein React JSX-Element zu machen. Aber ich beabsichtige, den Compiler als generischen Typbezeichner behandeln zu lassen.

Der Compiler beschwert mit:

[schlucken-Maschinenschrift] 17008 JSX Element 'T' hat keine Schließ entsprechenden Tags.

Ich habe zahlreiche syntaktische Abhilfen versucht, um zu versuchen, sowohl die IDE und die Compiler, um mir die JSX entgehen zu lassen und sie zwingen, die < T> durch den Compiler als Gattungs zu verstehen, wie es wäre, wenn JSX ist Nicht in Gebrauch. Aber ich kann die magische Soße nicht finden, um dies zu tun.

Wer schlauer als ich da draußen wer kann das herausfinden?

Answer 1

Wenn Sie einen einzelnen Typparameter haben, ist TypeScript nicht sicher, ob es sich um ein JSX-Ersetzungsetikett handeln könnte oder nicht. Es muss eins gewählt werden, also geht es mit JSX.

Wenn Sie eine Funktion mit der exakt gleichen Semantik möchten, können Sie explizit die Einschränkung von T Liste:

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

Dies bricht die Mehrdeutigkeit für Typoskript, so dass Sie einen generischen Typ Parameter verwenden können. Es hat auch die gleiche Semantik, weil Typparameter immer eine implizite Einschränkung von {} haben.

Answer 2

Ich kann nicht um einen Weg herum denken, und werde froh sein, wenn Sie von einem lernen.
aber hier ist eine andere Art und Weise, das gleiche zu erreichen:

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

Der Compiler wird nicht über die Generika beschweren.