Funksjoner For Typescript-Grensesnitt

slik deklarerer du funksjonstyper i Typescript-grensesnitt. Skrev denne artikkelen på grunn av forvirrende informasjon der ute og Typescript dokumentasjon er ikke direkte om syntaks.

(Merk at Følgende eksempler bare bruker Typescript React-klasser som eksempler fordi funksjonstyper er spesielt nyttige der, men syntaksen gjelder For Alle Typescript-grensesnitt.)

Eksempel 1: Funksjon som ikke tar argumenter og ikke returnerer en verdi:

i eksemplet nedenforonChange er funksjonsdeklarasjonen. Funksjonen returnerer ingenting (ugyldig), så vi erklærer returtypen som noen. Dette er fordi ugyldig og aldri vurderes annerledes i ulike sammenhenger (utenfor rammen av denne artikkelen). (Nedenfor er noen eksempler på typede returverdier.)

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

Eksempel 2: Funksjon som godtar et argument:

Inkluder argumentnavnet og dets type. Argumentnavnet er nødvendig, men trenger ikke å samsvare når du instansierer den virkelige funksjonen, men typen må samsvare. Det er duck skrevet som er alt I Typescript.

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

Eksempel 3: Funksjon som godtar et argument og returnerer en verdi:

denne funksjonen godtar en streng som argument og returnerer et tall.

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

Eksempel 4: Funksjon som er valgfri:

Suffiks egenskapsnavnet med Den Valgfrie Operatoren ?. Sett ? etter egenskapsnavnet og før argumentlisten. I TypeScript React kreves alle rekvisitter med mindre Du bruker Den Valgfrie Operatøren. Som med enhver ikke-nødvendig prop I React må du sjekke om prop er undefined før du bruker den.

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

Eksempel 5: Bruk typeordet:

Noen ganger er det praktisk å deklarere funksjonens type først, og bruk deretter typen i et grensesnitt. For å erklære en funksjon som en type er syntaksen litt annerledes. Bruk pilen operatør.

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

Nyt.