TypeScript-gränssnittsfunktioner

Så här deklarerar du funktionstyper i typescript-gränssnitt. Skrev den här artikeln på grund av förvirrande information där ute och Typescript dokumentation är inte direkt om syntaxen.

(Obs! följande exempel använder TypeScript React-klasser endast som exempel eftersom funktionstyper är särskilt användbara där, men syntaxen gäller för alla TypeScript-gränssnitt.)

exempel 1: funktion som inte tar argument och returnerar inte ett värde:

i exemplet nedanonChange är funktionsdeklarationen. Funktionen returnerar ingenting (ogiltigt) så vi deklarerar returtypen som någon. Detta beror på att void och never utvärderas annorlunda i olika sammanhang (utanför ramen för denna artikel). (Nedan följer några exempel på typade returvärden.)

interface MyClassProps {
someProp: string;
onChange(): any;
}class MyClass extends React.Component<MyClassProps, MyClassState> ...

exempel 2: funktion som accepterar ett argument:

inkludera argumentets namn och dess typ. Argumentnamnet krävs men behöver inte matcha när du instansierar den verkliga funktionen, men typen måste matcha. Det är anka skrivit som är allt i Typescript.

interface MyClassProps {
anotherProp: number;
onChange(name: string): any;
}

exempel 3: Funktion som accepterar ett argument och returnerar ett värde:

den här funktionen accepterar en sträng som ett argument och returnerar ett tal.

interface MyClassProps {
onChange(name: string): number;
}

exempel 4: funktion som är valfri:

suffix egenskapsnamnet med den valfria operatorn ?. Sätt ? efter egenskapsnamnet och före argumentlistan. I TypeScript React krävs alla rekvisita om du inte använder den valfria operatören. Som med alla icke-nödvändiga prop i React måste du kontrollera om prop är undefinedinnan du använder den.

interface MyClassProps {
onChange?(name: string): number;
niceProp: boolean;
}

exempel 5: Använda typnyckelordet:

Ibland är det bekvämt att deklarera funktionens Typ först och sedan använda typen i ett gränssnitt. För att deklarera en funktion som en typ är syntaxen något annorlunda. Använd piloperatören.

type MyFunctionType = (name: string) => number;interface MyClassProps {
onChange: MyFunctionType;
niceProp: string;
}

Njut.