Generics and Augmentation tekevät sinusta TypeScriptin ohjatun toiminnon

Kuva Michal Lomza on Unsplash

Tämä on Typepost-sarjan toinen viesti; ensimmäinen on täällä.

Kuten aiemmin mainitsin, TypeScript on loistava. Kun olin vasta aloittanut koodauksen TS: ssä, rakastin kielen vapaata ja sallivaa luonnetta - mitä enemmän annat, sitä enemmän saat. Käytin vain tyyppihuomautuksia silloin tällöin. Joskus sain kääntäjältä hienoja automaattisia täydennyksiä ja vinkkejä, mutta en useimmiten en tehnyt.

Ajan myötä sain tietää, että aina kun ohitin kääntäjää, olen luonut suoritusvirheen, joka odottaa tapahtuvan. Joka kerta, kun sirutin vähän kuin mahdollista, jotta virheet katoavat, maksin siitä myöhemmin tuntien huolellisella virheenkorjauksella.

Joten olen oppinut olemaan. Aloin ystävystyä kääntäjän kanssa ja kiinnittää huomiota, kun kirjoittama koodi ärsytti sitä. Kääntäjä näkee virheemme ja ilmoittaa meille, ennen kuin voimme aiheuttaa todellisia vaurioita. Kehittäjänä tajusin, että kääntäjä on kaikkien aikojen paras ystävä, koska se suojaa minua itseltäni.

"Kestää paljon rohkeutta seisoa vihollisiemme edessä, mutta yhtä paljon seistä ystävillemme." A. P. Dumbledore

Kuinka hyvä ystävä kääntäjä voi olla, se ei ole aina helppoa miellyttää sitä. Kaikkien mahdollisten välttäminen on aika ajoin hankalaa, ja joskus vaikuttaa siltä, ​​että mikä tahansa on ainoa järkevä ratkaisu. Tässä artikkelissa käsittelen kahta näistä tapauksista ja näytän sinulle, kuinka vältetään kaikki, ja saan tyyppiturvallisen, uudelleenkäytettävän ja itsestään selittävän koodin.

Genericin käyttö

Oletetaan, että työskentelemme koulutietokannan kanssa, ja olemme kirjoittaneet mukavan aputoiminnon nimeltä getBy. Saadaksesi opiskelijaobjektin nimen perusteella, voimme ajaa getBy (malli, "nimi", "Harry"). Katsotaanpa miten se voi näyttää (yksinkertaisuuden vuoksi otin DB-mallin käyttöön yksinkertaisena taulukkona).

Joten, meillä on kunnollinen toiminta, mutta siinä ei ole tyyppimerkintöjä eikä yksikään tyyppi tarkoita turvallisuutta - korjaa siis:

Se on paljon parempi! Nyt kääntäjämme tietää tuloksen tyypin, ja tämä auttaa meitä myöhemmin. Tämän tyyppisen turvallisuuden saavuttamiseksi uhrattiin kuitenkin toimintomme uudelleenkäytettävyys. Entä jos haluamme käyttää sitä tulevaisuuden muiden hakemiseen? Siellä on oltava parempi tapa.

Ja siellä on! TypeScriptissä, kuten muissakin voimakkaasti kirjoitetuissa kielissä, voimme käyttää yleisiä tyyppejä. Yleinen on kuin muuttuja, mutta arvon pitämisen sijaan se sisältää tyyppimääritelmän. Reagoidaan tehtävämme käyttää yleistä tyyppiä T opiskelijan sijasta.

Makea! Nyt toimintomme on täysin uudelleenkäytettävissä, ja tyyppiturvallisuus on meillä edelleen nauttia. Huomaa, kuinka rivillä 5 ilmoitan nimenomaisesti kääntäjälle, että käytän tyyppiä Opiskelija yleisenä T - tein sen selkeyden vuoksi, mutta kääntäjä voi tosiasiallisesti päätellä siitä yksinään, joten sitä ei tule näkyviin Seuraavat esimerkit.

Nyt meillä on vankka, uudelleenkäytettävä util-toiminto, mutta voimme silti paremmin. Mitä tapahtuu, jos teen kirjoitusvirheen ja kirjoitan "naem" toisena parametrina? Se epäonnistuu hiljaa. Järjestelmäni toimii ikään kuin tätä opiskelijaa ei ole, ja vietän tunteja virheenkorjaukseen.

Tämän korjaamiseksi esitän uuden yleisen tyypin P. Haluan, että P on tyypin T avain, joten jos käytin Opiskelijaa, haluan, että P on "nimi", "ikä" tai "hasScar". Näin se voidaan tehdä:

Geneeristen tyyppien käyttö ja keyof on erittäin tehokas tekniikka. Jos koodaat IDE: llä, joka tukee TypeScriptiä, saat automaattisen täydennyksen kirjoittaessasi argumentteja, mikä on erittäin kätevää.

Mutta emme ole vielä valmis. Siellä on edelleen kolmas argumentti toiminnallemme istuen siellä tyypillisesti - tätä ei voida hyväksyä. Tähän saakka meillä ei ollut mitään keinoa tietää etukäteen, minkä tyyppisen sen pitäisi olla, koska se riippuu siitä, mitä välitämme toisena argumenttina. Mutta nyt, kun meillä on tyyppi P, voimme päätellä sen dynaamisesti. Kolmannen argumentin tyyppi on siis T [P], joten jos T tarkoittaa opiskelijaa ja P tarkoittaa "ikää", niin T [P] on tyyppinumero.

Toivon tässä vaiheessa, että sinulla on kristallinkirkas käsitys geneeristen tuotteiden käytöstä, mutta jos haluat pelata itsesi ympärille, mene eteenpäin ja tutustu täydelliseen koodiesimerkkiin, jonka kirjoitin täällä TypeScript-leikkikentällä.

Olemassa olevien tyyppien lisääminen

Joskus meillä voi olla tarve lisätä tietoja tai toimintoja rajapintoihin, jotka eivät ole meidän hallinnassamme. Voi olla, että haluat muuttaa vakioobjektin, kuten lisätä ominaisuuden ikkunaobjektiin, tai parantaa jonkin ulkoisen kirjaston, kuten Express, käyttäytymistä. Molemmissa tapauksissa et voi muuttaa suoraan työskentelevien kohteiden tyyppimääritelmää.

Tätä esittelyä varten lisäämme getBy-toiminnomme Array-prototyyppiin, jotta meillä olisi puhtaampi syntaksi. Onko tämä hyvä idea vai ei, tällä hetkellä ei ole merkitystä, koska olemme opiskelemassa tekniikkaa.

Kun yritämme lisätä toimintoamme Array-prototyyppiin, voimme nähdä, että kääntäjä on vihainen meihin:

Jos yritämme tyydyttää kääntäjää kirjoittamalla mitä tahansa täällä ja siellä, olemme menettäneet kaiken, jonka puolesta työskentelimme - kääntäjä sulkeutuu, mutta meille ei enää ole tyyppiturvallisuutta.

Parempi tapa olisi lisätä taulukotyyppiä, mutta ensin puhutaan siitä, kuinka TypeScript käsittelee kahden samantyyppisen rajapinnan tapaukset. Vastaus on yksinkertainen - jos mahdollista, se yhdistää määritelmät, jos ei, se aiheuttaa virheen.

Joten tämä toimii:

Ja tämä ei:

Nyt kun ymmärrämme sen, meillä on melko helppo tehtävä. Ainoa mitä meidän on tehtävä, on julistaa rajapintaryhmä ja lisätä siihen funktio getBy.

Tärkeä huomautus: Useimmiten koodaat todennäköisesti moduulitiedostoissa, joten Array-käyttöliittymän muuttamiseksi sinun on käytettävä globaalia laajuutta. Tämä voidaan helposti tehdä asettamalla tyyppimääritelmäsi globaaliksi julistamiseen, kuten tämä:

Jos haluat laajentaa ulkoisen kirjaston käyttöliittymää, sinun on todennäköisesti käytettävä tämän kirjaston nimitilaa. Tässä on esimerkki kuinka lisätä userId-kenttä Express-pyyntöön:

Joten… siitä on kyse. Kuten aiemmin, voit pelata täällä esimerkin koodilla saadaksesi lisää luottamusta.

Tiedät mitä sinun täytyy tehdä nyt ...

Jos olet tullut näin pitkälle ja oppinut jotain uutta, voit osoittaa arvostavasi taputtelemalla tätä artikkelia muutama kymmenen kertaa, jotta muut ihmiset näkevät sen ja oppivat myös. Ja jos haluat lukea lisää kirjoittamasi juttuja, mene eteenpäin ja paina Seuraa-painiketta.

älä myöskään unohda seuraavaa viestiini, joka koskee TypeScriptin sisustajia!