sådan erklæres funktionstyper inden for Typescript-grænseflader. Skrev denne artikel på grund af forvirrende oplysninger derude og Typescript dokumentation er ikke direkte om syntaksen.
(bemærk, at følgende eksempler kun bruger Typescript React-klasser som eksempler, fordi funktionstyper er særligt nyttige der, men syntaksen gælder for enhver Typescript-grænseflade.)
eksempel 1: funktion, der ikke tager argumenter og ikke returnerer en værdi:
i eksemplet nedenforonChange er funktionsdeklarationen. Funktionen returnerer intet (ugyldig), så vi erklærer returtypen som enhver. Dette skyldes, at ugyldig og aldrig evalueres forskelligt i forskellige sammenhænge (uden for denne artikels anvendelsesområde). (Nedenfor er nogle eksempler på indtastede returværdier.)
interface MyClassProps {
someProp: string;
onChange(): any;
}class MyClass extends React.Component<MyClassProps, MyClassState> ...
eksempel 2: funktion, der accepterer et argument:
Inkluder argumentnavnet og dets type. Argumentnavnet er påkrævet, men behøver ikke at matche, når du instantierer den rigtige funktion, men typen skal matche. Det er And skrevet som er alt i Typescript.
interface MyClassProps {
anotherProp: number;
onChange(name: string): any;
}
eksempel 3: Funktion, der accepterer et argument og returnerer en værdi:
denne funktion accepterer en streng som et argument og returnerer et tal.
eksempel 4: funktion, der er valgfri:
suffiks egenskabsnavnet med den valgfri operatør?. Sæt ? efter egenskabsnavnet og før argumentlisten. I TypeScript React kræves alle rekvisitter, medmindre du bruger den valgfri operatør. Som med enhver ikke-påkrævet prop i React skal du kontrollere, om prop er undefinedfør du bruger den.
interface MyClassProps {
onChange?(name: string): number;
niceProp: boolean;
}
eksempel 5: brug af nøgleordet type:
Nogle gange er det praktisk at erklære funktionens type først og derefter bruge typen i en grænseflade. For at erklære en funktion som en type syntaksen er lidt anderledes. Brug piloperatøren.
type MyFunctionType = (name: string) => number;interface MyClassProps {
onChange: MyFunctionType;
niceProp: string;
}
Nyd.