Hieno, tyypillinen johdatus TypeScript-sisustajiin

Demystifioi tämä voimakas kuvio rakentamalla sisustajia tyhjästä

Kuva Cederic X on Unsplash

Sisustajat ovat yksi tehokkaimpia ominaisuuksia, joita Typescript tarjoaa, jotta voimme laajentaa luokkien ja menetelmien toimivuutta puhtaalla ja deklaratiivisella tavalla. Sisustajat ovat tällä hetkellä toisen vaiheen JavaScript-ehdotuksia, mutta ne ovat jo saaneet suosiota TypeScriptin ekosysteemissä, jota käytetään johtavissa avoimen lähdekoodin projekteissa, kuten Angular ja Inversify.

Kuitenkin mahtava sisustaja voi olla, ymmärtää tapa, jolla he toimivat, voi olla mielestäni ajattelevaa. Tämän artikkelin tarkoituksena on antaa sinulle vahva käsitys sisustajista alle 5 minuutissa ajasta. Joten sitten mitä nämä sisustajat ovat?

Sisustajat ovat vain puhdas syntaksi koodipalan käärimiseksi toiminnolla

Sisustajat ovat kokeellinen ominaisuus, joten toteutuksen yksityiskohdat saattavat muuttua tulevaisuudessa, mutta niiden taustalla olevat periaatteet ovat iankaikkisia. Lisää koristeiden käyttö lisäämällä "experimentalDecorators": totta tsconfig.json-tiedoston kääntäjävaihtoehtoihin ja varmista, että transpilaatiotavoitteesi on ES5 tai uudempi.

Okei, kello tikkee, joten koodataan!

Matka alkaa luokkakoristeilla

Oletetaan, että yrityksesi, joka vuokraa vanhat linnat voimakkaille perheille, työskentelet HTTP-palvelimen määrittämisessä. Päätit rakentaa API-sovelluksen jokaisen päätepisteen luokana, ja luokan julkiset menetelmät vastaisivat HTTP-menetelmiä. Tämä saattaa näyttää noin:

Se on hieno alku, ja nyt tarvitsemme yksinkertaisen tavan "rekisteröidä" kaikki nämä luokat päätepisteeksi HTTP-palvelimellamme. Luodaan yksinkertainen toiminto huolehtia siitä. Toiminnomme saa luokan argumenttina ja lisää luokan esiintymän päätepisteeksi palvelimellemme. Niin kuin:

Ilman sinua huomaamatta, kirjoitimme jo ensimmäisen sisustajamme! Se on totta, se on niin yksinkertaista. Kaikki sisustusarkkitehti on, on funktio, joka ottaa luokan argumenttina, ja tässä meillä se on. Nyt sen sijaan, että kutsumme registerEndpointia “tavallisella” tavalla, voimme vain sisustaa luokkamme @registerEndpointilla. älä usko minua? Katso:

Saimme ensimmäisen sisustajamme käyttöön ja käyntiin, ja kesti vain noin 2 minuuttia. Olemme nyt valmiita sukeltamaan syvemmälle ja vapauttamaan menetelmädekoraattorin voiman.

Vapauta menetelmädekoraattorin voima

Oletetaan, että haluamme suojata joitain päätepisteitämme, jotta vain todennetut käyttäjät pääsevät niihin. Tätä varten voimme luoda uuden sisustajan, nimeltään suoja. Toistaiseksi kaikki sisustajamme tekevät vain lisätäksesi suojatun menetelmän taulukkoon nimeltä suojattuMethods.

Kuten näette, menetelmän sisustaja ottaa 3 argumenttia:

  1. tavoite - luokan prototyyppi (tai luokan rakentaja, jos sisustettu menetelmä on staattinen).
  2. propertyKey - Koristelun menetelmän nimi.
  3. kuvaaja - esine, jolla on koristeltu toiminto ja joitain metatietoja siitä.

Toistaiseksi olemme lukeneet vain tietoja koristetuista luokista ja menetelmistä, mutta todellinen hauska alkaa, kun alamme muuttaa heidän käyttäytymistään. Voimme tehdä sen yksinkertaisesti palauttamalla arvon sisustajalta. Kun menetelmäkoristelija palauttaa arvon, tätä arvoa käytetään alkuperäisen kuvaajan (joka pitää alkuperäistä menetelmää) sijasta.

Kokeillaan sitä luomalla koriste, nimeltään nope, joka korvaa alkuperäisen menetelmämme menetelmällä, joka tulostaa “nope” aina, kun sitä kutsutaan. Tämän suorittaminen ohittaa deskriptor.arvon, johon alkuperäinen toiminto tallennetaan, funktioni kanssa:

Tähän mennessä pelataan menetelmien sisustajien perusteiden kanssa, mutta emme ole vielä luoneet mitään hyödyllistä. Aion tehdä seuraavaksi uudelleen suoja-sisustajan kirjoittamisen, mutta tällä kertaa sen sijaan, että kirjataan vain koristeltujen menetelmien nimet, se todella estää luvattomia pyyntöjä.

Tämä seuraava vaihe on hieman monimutkaisempi kuin viimeisimmät, joten ole kanssani. Tässä meidän on suoritettava vaiheet:

  1. Pura alkuperäinen toiminto kuvaajasta ja tallenna se muualle myöhempää käyttöä varten.
  2. Ohita kuvaaja.arvo uudella toiminnolla, joka ottaa samat argumentit kuin alkuperäinen.
  3. Tarkista uudessa toiminnassamme, onko pyyntö todennettu, ja älä heitä virhettä.
  4. Viimeinkin, myös uudessa toiminnassamme, voimme nyt soittaa alkuperäiseen funktioon tarvitsemillaan argumenteilla, kaapata sen palautusarvon ja palauttaa sen.

Hämmästyttävä! Meillä on täysin toimiva suojakoriste. Nyt suojauksen lisääminen tai poistaminen menetelmistämme on pala kakkua.

Huomaa, kuinka rivillä 8 sitomme alkuperäisen toiminnon tähän, joten sillä on pääsy luokansa esiintymään. Esimerkiksi ilman tätä riviä get () -menetelmämme ei pystyisi lukemaan tätä taloa.

Olemme menneet aivan tielle, mutta edessä on enemmän. Kannustan tässä vaiheessa hetken kuluttua ja varmista, että ymmärrät jokaisen sen, mitä olemme tähän mennessä tehneet. Laittaisin kaikki yllä olevat koodit leikkipaikalle, jotta voit tehdä siitä sinulle helpompaa, jotta voit käyttää sitä, muuttaa sitä ja rikkoa, kunnes tunnet saavasi sen kokonaan.

Hanki enemmän voimaa sisustusarkkitehtailla

Oletetaan, että haluamme nyt lisätä uuden päätepisteen Stark-perheen jäsenten palauttamiseksi polulle / perheet / stark / jäsenet. No, tietysti emme voi luoda luokkaa tällä nimellä, joten mitä aiomme tehdä?

Tarvitsemme täällä tavan välittää parametreja, jotka sanelevat sisustustoiminnomme käyttäytymisen. Katsotaanpa uusi katsaus vanhaan hyvään registerEndpoint-sisustajaamme:

Jotta parametrit voidaan lähettää sisustajallemme, meidän on muutettava se tavallisesta sisustajasta koriste-tehtaalle. Sisustuskorjaamon tehdas on toiminto, joka palauttaa sisustajan. Jotta voit tehdä yhden, me tarvitsemme vain kääri alkuperäisen sisustajamme, kuten tämä:

Nyt voimme kääriä myös suoja-sisustusarkkitehtiimme, joten siitä saadaan odotettu merkki parametrina:

johtopäätös

Tässä vaiheessa sinulla on hyvä ymmärrys sisustajiista, heidän työskentelystään, samoin kuin voima ja ilmaisu, jonka he sallivat meille ohjelmoijina. Tässä artikkelissa käsitelin hyödyllisimpiä ja yleisimpiä tekniikoita, mutta opittavaa on kuitenkin vielä paljon. Typescriptin sisustajia voidaan soveltaa luokkien ja menetelmien lisäksi myös luokkien ominaisuuksiin ja menetelmäargumentteihin. Toivon, että äskettäin hankitulla ymmärryksellä sisustajista pystyt noutamaan sen helposti dokumentaatiosta. Kuten aina, laitan kaiken tämän artikkelin koodin leikkipaikalle, joten mene eteenpäin ja pelaa!

yay, teit sen!

Jos olet nauttinut tästä artikkelista, voit taputtaa sitä, jotta useammat ihmiset löytävät sen ja nauttivat siitä. Jos haluat nähdä lisää kirjoittamasi juttuja, voit seurata minua. Kerro minulle kommenteissa, jos sinulla on kysyttävää.

Voit myös tutustua muihin TypeScripti-artikkeleihini, jotka koskevat geneerisiä tuotteita ja niiden lisäyksiä tai luokkien suunnittelua.