Verwirrung über den TypeScript -Typ Inferenz: Warum sind die Definitionen der Rückgabewerttypen der vier Funktionen gleich und wie vermeiden Sie Typfehler im Gewerkschaftstyp -Szenario?

Erforschen Sie tief die Feinheiten des Typs -Skriptyps -Inferenz: Die Äquivalenz der Definition des Rückgabewerttyps der vier Funktionen und der Type Sicherheit unter dem Gewerkschaftstyp

Dieser Artikel analysiert den Inferenzmechanismus vom TypeScript -Typ, wie scheinbar unterschiedliche Funktionen des Funktionstyps das gleiche Ergebnis erzielen können, und löst Typfehler im gemeinsamen Typ -Typ -Szenario.

Zunächst beobachten wir vier Arten von getReturnType -Definitionen:

 Typ GetReturnType1<t> = T erweitert (... Argumente: nie) => inferen r? R: niemals;
Typ GetReturnType2<t> = T erweitert (... Argumente: nie []) => infer R? R: niemals;
Typ GetReturnType3<t> = T erweitert (... Argumente: irgendwelche []) => inferen r? R: niemals;
Typ GetReturnType4<t> = T erweitert (... Argumente: Any) => infer R? R: niemals;</t></t></t></t>

Alle vier Typdefinitionen sind so konzipiert, dass sie den Rückgabewerttyp aus dem Funktionstyp extrahieren. Obwohl Parametertypen ( never , never[] any[] , any ) unterschiedlich sind, haben sie keinen Einfluss auf das Inferenzergebnis des Rückgabewerttyps R in Typ in Inferenz. Das extends Schlüsselwort konzentriert sich auf die Struktur von Funktionstypen und nicht auf die spezifischen Arten von Parametern. Solange der Funktionstyp übereinstimmt, kann infer R den Rückgabewerttyp korrekt schließen. Daher sind diese vier Definitionen tatsächlich gleichwertig.

Als nächstes analysieren wir einen Code, der die Typfehler zeigt, die auftreten können, wenn Gewerkschaftstyp und bedingter Typ kombiniert werden:

 Type tippen<t extends major rescategorylabel> = {{
  Etiketten: T [];
  setSelect: (Index: Nummer, Etikett: T erweitert Major? Major: SPRECATEGORYLABEL) => void;
  xxx: any; // andere Attribute werden weggelassen};

const Änderung = (
  Index: Nummer,
  Etikett: Major | SPRECATIKORYLABEL,
  E: React.MouseEvent<htmlanchorelement> | React.touchEvent<htmlanchorelement>
) => {
  setSelect (Index, Etikett);
  activeTabtocenter (e.currentTarget als htmlelement);
};</htmlanchorelement></htmlanchorelement></t>

Es gibt ein Problem mit der Typ -Inferenz der setSelect label in der Props -Typdefinition. Bedingter Typ T extends Major ? Major : ResCategoryLabel Versucht, die Art der label zu bestimmen, basierend auf der Art von T Da T jedoch eine gemeinsame Art von Major | ResCategoryLabel Bei Major | ResCategoryLabel kann der Compiler nicht feststellen, ob T Major oder ResCategoryLabel ist, was dazu führt, dass die Typ T des label fehlschlägt. Das Problem ist nicht der bedingte Typ selbst, sondern seine Anwendung im Kontext des Gewerkschaftstyps.

Die Lösung besteht darin Major | ResCategoryLabel zu verwenden Major | ResCategoryLabel Direkt als label :

 Type tippen<t extends major rescategorylabel> = {{
  Etiketten: T [];
  setSelect: (Index: Nummer, Kennzeichnung: Major | scategoryLabel) => void;
  xxx: any; // andere Attribute werden weggelassen};</t>

Auf diese Weise sind die Parametertypen setSelect -Funktion klar, wodurch Typfehler vermieden und die Lesbarkeit und Wartbarkeit des Codes verbessert werden. Dies spiegelt die Notwendigkeit wider, die raffinierte Typregelung aufzugeben, die von bedingten Typen beim Umgang mit gemeinsamen Typen im Austausch für klarere und sicherere Typdefinitionen eingeführt wird.

Das obige ist der detaillierte Inhalt vonVerwirrung über den TypeScript -Typ Inferenz: Warum sind die Definitionen der Rückgabewerttypen der vier Funktionen gleich und wie vermeiden Sie Typfehler im Gewerkschaftstyp -Szenario?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!