Typescript Interface Functions

näin ilmoitetaan Funktiotyypit Typescript-rajapinnoissa. Kirjoitti tämän artikkelin, koska sekava tietoa siellä ja Typescript dokumentaatio ei ole suora noin syntaksi.

(huomaa, että seuraavissa esimerkeissä käytetään Typescript React-luokkia vain esimerkkeinä, koska funktiotyypit ovat siellä erityisen hyödyllisiä, mutta syntaksi koskee mitä tahansa Typescript-rajapintaa.)

Esimerkki 1: funktio, joka ei ota argumentteja eikä palauta arvoa:

alla olevassa esimerkissäonChange on funktion ilmoitus. Funktio ei palauta mitään (mitätön), joten ilmoitamme palautustyypin olevan mikä tahansa. Tämä johtuu siitä, että void ja koskaan arvioidaan eri yhteyksissä (soveltamisalan ulkopuolella tämän artikkelin). (Alla on muutamia esimerkkejä kirjoitetuista paluuarvoista.)

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

Esimerkki 2: funktio, joka hyväksyy argumentin:

sisältävät argumentin nimen ja sen tyypin. Argumentin nimi on pakollinen, mutta sen ei tarvitse täsmätä, kun instantiatoit todellisen funktion, mutta tyypin on täsmättävä. Se on ankka kirjoitettu, kuten kaikki on Konekirjoituksella.

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

esimerkki 3: Funktio, joka hyväksyy argumentin ja palauttaa arvon:

tämä funktio hyväksyy merkkijonon argumentiksi ja Palauttaa luvun.

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

esimerkki 4: funktio, joka on valinnainen:

päättele ominaisuuden nimi valinnaisella operaattorilla ?. Laita ? ominaisuuden nimen jälkeen ja ennen argumenttiluetteloa. Konekirjoituksessa React kaikki rekvisiitta vaaditaan, ellet käytä valinnaista operaattoria. Kuten minkä tahansa Reactissa vaadittavan rekvisiitan kohdalla, sinun on tarkistettava ennen sen käyttöä, onko rekvisiitta undefined.

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

esimerkki 5: type-avainsanalla:

joskus on kätevää ilmoittaa funktion tyyppi ensin, sitten käyttää tyyppiä rajapinnassa. Funktion julistamiseksi tyypiksi syntaksi on hieman erilainen. Käytä nuolioperaattoria.

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

Enjoy.