Typescript Interface functies

Dit is hoe functietypen binnen Typescript interfaces te declareren. Schreef dit artikel vanwege de verwarrende informatie die er zijn en Typscript documentatie is niet direct over de syntaxis.

(Opmerking: De volgende voorbeelden gebruiken Typescript React classes alleen als voorbeelden omdat functietypes daar bijzonder nuttig zijn, maar de syntaxis is van toepassing op elke Typescript interface.)

Voorbeeld 1: functie die geen argumenten aanneemt en geen waarde retourneert:

in het onderstaande voorbeeldonChange is de functiedeclaratie. De functie retourneert niets (void) dus verklaren we het retourtype als eender welk. Dit komt omdat leegte en nooit anders worden beoordeeld in verschillende contexten (buiten het toepassingsgebied van dit artikel). (Hieronder zijn enkele voorbeelden van getypte retourwaarden.)

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

Voorbeeld 2: functie die een argument accepteert:

inclusief de argumentnaam en het type. De naam van het argument is vereist, maar hoeft niet overeen te komen wanneer u de echte functie instantiate, maar het type moet overeenkomen. Het is eend getypt zoals alles in Typescript.

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

Voorbeeld 3: Functie die een argument accepteert en een waarde retourneert:

Deze functie accepteert een tekenreeks als argument en geeft een getal terug.

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

Voorbeeld 4: functie die optioneel is:

achtervoegsel de eigenschapsnaam met de optionele Operator ?. Plaats de ? achter de eigenschapsnaam en voor de lijst met argumenten. In TypeScript React zijn alle rekwisieten vereist, tenzij u de optionele Operator gebruikt. Zoals met elke niet-vereiste prop in React moet je controleren of de prop undefinedis voordat je het gebruikt.

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

Voorbeeld 5: met behulp van het trefwoord type:

soms is het handig om eerst het type van de functie te declareren en vervolgens het type in een interface te gebruiken. Om een functie als een type te verklaren is de syntaxis iets anders. Gebruik de pijl operator.

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

Enjoy.