So deklarieren Sie Funktionstypen in Typescript-Schnittstellen. Schrieb diesen Artikel wegen verwirrender Informationen da draußen und Typoskript-Dokumentation ist nicht direkt über die Syntax.
(Beachten Sie, dass die folgenden Beispiele Typescript-React-Klassen nur als Beispiele verwenden, da Funktionstypen dort besonders nützlich sind, die Syntax jedoch für jede Typescript-Schnittstelle gilt.)
Beispiel 1: Funktion, die keine Argumente akzeptiert und keinen Wert zurückgibt:
Im folgenden BeispielonChange ist die Funktionsdeklaration. Die Funktion gibt nichts zurück (void), daher deklarieren wir den Rückgabetyp als any . Dies liegt daran, dass void und never in verschiedenen Kontexten unterschiedlich bewertet werden (über den Rahmen dieses Artikels hinaus). (Nachfolgend finden Sie einige Beispiele für typisierte Rückgabewerte.)
interface MyClassProps {
someProp: string;
onChange(): any;
}class MyClass extends React.Component<MyClassProps, MyClassState> ...
Beispiel 2: Funktion, die ein Argument akzeptiert:
Geben Sie den Namen des Arguments und seinen Typ an. Der Argumentname ist erforderlich, muss aber nicht übereinstimmen, wenn Sie die reale Funktion instanziieren, aber der Typ muss übereinstimmen. Es ist Ente getippt wie alles in Typoskript.
interface MyClassProps {
anotherProp: number;
onChange(name: string): any;
}
Beispiel 3: Funktion, die ein Argument akzeptiert und einen Wert zurückgibt:
Diese Funktion akzeptiert einen String als Argument und gibt eine Zahl zurück.
interface MyClassProps {
onChange(name: string): number;
}
Beispiel 4: Optionale Funktion:
Ergänzen Sie den Eigenschaftsnamen mit dem optionalen Operator ?. Setzen Sie die ? nach dem Eigenschaftsnamen und vor der Argumentliste. In TypeScript React sind alle Requisiten erforderlich, es sei denn, Sie verwenden den optionalen Operator. Wie bei jeder nicht erforderlichen Requisite in React müssen Sie überprüfen, ob die Requisite undefined bevor Sie sie verwenden.
interface MyClassProps {
onChange?(name: string): number;
niceProp: boolean;
}
Beispiel 5: Verwenden des Schlüsselworts type:
Manchmal ist es praktisch, zuerst den Typ der Funktion zu deklarieren und dann den Typ in einer Schnittstelle zu verwenden. Um eine Funktion als Typ zu deklarieren, unterscheidet sich die Syntax geringfügig. Verwenden Sie den Pfeiloperator.
type MyFunctionType = (name: string) => number;interface MyClassProps {
onChange: MyFunctionType;
niceProp: string;
}
Viel Spaß.