Õppige TypeScripti andmetüüpe - nullist kangelaseni

Tänapäeval on see kogu raev veebiarenduse maailmas - TypeScript. Ma panustaksin nüüd, kui olete sellest isegi möödaminnes kuulnud. Aga kui sul pole seda või kui sul on lihtsalt uudishimu, siis oled sa jõudnud õigesse kohta mu sõber!

Praegu õpin TypeScripti koos Angulariga (artikkel selle kohta on töös, nii et olge kursis!), Sest see on see, mida meie veebirakendus on tööl sisse ehitatud. Otsustasin kirjutada midagi lihtsat ja lihtsalt jälgitavat, et saaksite TypeScripti andmetüüpidega tööle asuda.

Ma jaotan selle artikli lihtsuse huvides kaheks postituseks - esimene on lühike ülevaade sellest, mis on TypeScript, andmetüübid ja mõned toetavad näited. Teine artikkel keskendub TypeScripti installimisele ja teie arvutis kohapeal töötamisele.

Mis see on?

Enne alustamist on siin TypeScripti ülilühendatud kirjeldus minu enda sõnadega. See on JavaScripti alamhulk - mis tähendab sisuliselt seda, et tegemist on JavaScripti vormiga, mis annab teile teatud eelised koos kõigi vanilje JavaScripti sisaldavate suurepärasustega. See on Microsofti kirjutatud ja hooldatud avatud lähtekoodiga keel.

TypeScript levib JavaScripti ja töötab igas keskkonnas, kus Java-versioon töötab. Võite kasutada TypeScripti nii esiotsa kui ka taguotsa rakenduste jaoks.

See on kirjutatud nagu JavaScript, välja arvatud mõned erandid, millest läheme peagi üle. Siin on näide mõnest TypeScriptist:

Püüdke mitte keskenduda kõigile jämesooltele ja lisakraamidele, mida näete eespool, uurime seda allpool. Selle asemel keskenduge asjadele, mis silma paistavad - me lihtsalt deklareerime muutujad koos väärtustega, need on stringid, massiivid ja objektid nagu JavaScriptis.

Teine tore asi, mida olen TypeScripti kohta õppinud, on see, et saate JavaScripti koodiga kokku segada ja teil pole sellega probleeme. Kontrollige allolevat ekraanipilti (see asub nurgarakenduses):

Andmetüübid

Alustame lõbusate asjadega - andmetüüpidega! (On vähe andmetüüpe, mida me ei hõlma - mitte kunagi, null, määratlemata. Seda lihtsalt seetõttu, et neid pole palju. Ma tahan, et teaksite, et need on olemas ja kui soovite nendest rohkem uurida tüübid, siin on teie viide link ametlikule TypeScripti dokumentatsioonile.)

TypeScript järeldab muutujale omistatud andmete tüübi, ilma et te selle tüüpi selgesõnaliselt määraksite, kuid lihtsuse ja hea eesmärgi nimel sooviksin oma muutujate deklareerimisel deklareerida andmetüübi.

Andmetüübid määratakse, pannes lihtsalt kooloni muutuja nime järele, kuid enne võrdusmärki:

const {muutuja nimi}: {muutuja tüüp} = {muutuja väärtus }

Nii on deklareeritud enamus TypeScripti andmetüüpe, välja arvatud funktsioonid ja objektid.

Mõne andmetüübi puhul on see pisut keerukam, kuid saate üldise idee. Allpool on toodud lühidad selgitused andmetüüpide kohta ja näited nende deklareerimise kohta.

Boolean

Booleanid TypeScriptis töötavad samamoodi nagu JavaScriptis. Andmetüübi tõeväärtuse muutujad deklareeritakse järgmiselt:

const myBool: boolean = false;

String

TypeScripti stringid töötavad samamoodi nagu JavaScriptis. Andmetüübi stringi muutujad deklareeritakse järgmiselt:

let myString: string = 'bacon'

Arv

TypeScripti numbrid töötavad samamoodi nagu JavaScriptis. Andmetüübi numbri muutujad deklareeritakse järgmiselt:

const myNum: number = 1207;

Massiiv

TypeScripti massiivid on sarnaselt teiste andmetüüpidega nagu ka JavaScripti massiivid. Andmetüübi massiivi muutujad deklareeritakse kahel viisil:

const myArr: number[] = [12, 90, 71];

Ülaltoodud viisil saate massiivi deklareerida, kui kõik selle massiivi elemendid on numbrid.

const myArr: Array = [12, 90, 71];

See massiivi deklareerimise viis kasutab numbriks seatud üldist massiivi tüüpi. Funktsionaalselt pole vahet, kuidas need viisid annavad massiivi tüüpi muutuja deklareerimise lõpptulemuse.

Kui massiivi sees olevad andmetüübid ei ole teada või kui andmetüüpide segu on, saab massiivi deklareerida, kasutades tüüp (see on iseseisev tüüp, mida arutatakse allpool):

const myArr: Array = [12, 'thirteen', false];

Nii saate massiivis segada andmetüüpe.

Tuplid

Hulgad on TypeScriptile ainuomane andmetüüp. Mõelge neile kui fikseeritud arvu elementidega massiividele. Seda andmetüüpi on kõige parem kasutada siis, kui teate täpselt, kui palju muutujaid teil peaks olema. Indeksite väärtust on võimalik ümber määrata, kuid mitte elementide hulka dupleksis.

Andmetüübi dupleks muutujad deklareeritakse nagu massiiv:

let mine: [number, string];

Kui soovime muuta elementide väärtusi , saame seda teha seni, kuni need vastavad meie muutuja deklareerimisel esitatud tüüpidele:

mine[0] = 14  ✔️

mine[0] = 'Steve'

Kuna me defineerisime mineseda dupleksina, on väärtuste järjestus samuti oluline ja neid ei saa muuta. Kui indeksi määramine väljaspool algset määratletud numbrit annab vea:

mine[0] = ['Dave', 71]  ❌

mine = [121, 'Dave', 'Steve'];

mine = [121, 'bacon'];  ✔️

Funktsioon

Funktsioonid võivad olla nii selged kui soovite. Selle all mõtlen seda, et saame parameetritele ja tagastatud väärtustele rakendada tüüpe. Allpool on kaks näidet:

See funktsioon loob vea, kui tagastatakse mõni väärtus, mis pole arv. Muutuja võib tagastada ainult siis , kui see osutab arvule.

Eespool kontrollime meie funktsiooni edastatavate parameetrite tüüpi. See on suurepärane võimalus vigade vältimiseks, sest kui parameetrite arv on välja lülitatud või kui nende andmetüüp ei ühti sellega, mida me loodame, kirjutab TypeScript meile sellest veaga.

Kui ma tahan funktsiooni, mis ei peaks väärtust tagastama, saan määrata tüübi tühiseks (andmetüüp, mis tähendab andmete puudumist. Kuigi seda saab kasutada muutujate deklareerimisel, pole see tavaliselt sellepärast, et meil oleks muutuja nulliks või määratlemata määramiseks olen kasutanud ainult siis, kui funktsioonidel ei peaks olema tagastusväärtust) ja kui funktsioon tagastab midagi, loob TypeScript tõrke:

Kui määrate tüübi tühiseks, kirjeldan ma selgesõnaliselt oma tagastusi ja veendun, et kuigi see funktsioon võib endiselt töötada, ei tohiks see väärtust tagastada . Kui see siiski väärtuse tagastab, saan vea.

Enum

Enums on andmetüüpidele teretulnud (minu tagasihoidliku arvamuse kohaselt) täiendus. Mõelge neile kui kasutajasõbralikumale lähenemisviisile numbrilistele väärtustele nimede andmisel. Siin on näide loendist:

enum Foods {'bacon', 'tomato', 'lettuce'};

console.log (Foods [0]) // annab 'peekon' console.log (Foods.bacon) // annab 0 console.log (Foods ['salat']) // annab 2

Numeratsioonindeksi vormingu on võimalik määrata ka loenditega. Paljudes keeltes, kaasa arvatud C #, on loendeid ja mul on hea meel näha neid JavaScripti jõudmas.

Nimedega saate olla nii loominguline kui soovite. Võite isegi muuta indeksite numbrilist esitust. Kui soovite, et teie esimene register algaks 0 asemel 18-st, on see nii lihtne:

enum Foods {'bacon'= 18, 'tomato', 'lettuce'};

console.log(Foods['bacon']); // 18

Oletame, et meil oli väärtus 18, kuid polnud kindel, mida see meie Foodsloendis kaardistas , võime seda ka kontrollida:

console.log(Foods[18]); // 'bacon'

Üks tähelepanuväärne teave on see, et oleme määranud esimese indeksi alguseks 18, järgmine indeks on 19 ja nii edasi vastavalt teie loodud nummerduskonventsioonile.

Objekt

TypeScripti objektid on määratletud sarnaselt JavaScripti objektidega. Me võime oma definitsiooniga olla nii kaudsed kui ka otsesed, kui meile meeldib või kui olukord ette näeb:

let data: = {name: 'Jonathan', age: 30, hobbies: ['running','swimming','coding']};  ✔️

let data: {name: string, age: number, hobbies: string[]} = {name: 'Jonathan', age: 30, hobbies: ['running','swimming','coding']};  ✔️

Objektide loomisel on omaduste nimed muutumatud, kuid nende ilmumise järjekord pole oluline, isegi kui me määratleme need kindlas järjekorras.

Samuti võivad meil olla lihtsad objektid, nagu ülaltoodud, või saame määratleda keerukad objektid, mis kasutavad ära mitut alltoodud tüüpi andmetüüpi (see objekt on mõeldud ainult tutvustamiseks):

Tüüp Alias ​​/ Interface

Ülaltoodud keeruka objekti näite puhul võite arvata, et see on vinge, kuid mis juhtub järgmisel korral, kui mul on vaja keerukas objekt luua? Kas ma pean selle kõik uuesti käsitsi välja kirjutama?

Ära karda, siin on abiks tüübi pseudonüümid ja liideste tüübid! Tüüpi pseudonüüm on andmetüüp, mis võimaldab meil selle sisse salvestada muid andmetüüpe ja seejärel viidata muutujale, selle asemel, et koodi uuesti kirjutada.

Vahemärkusena olgu öeldud, et tüübinimed ja liidesed toimivad väga sarnaselt. Mõlemad võimaldavad meil tellida objekti / projekti, kuidas meie andmed peaksid olema üles ehitatud. Siiski on peent erinevusi, mida me siin ei käsitle. Selle asemel on siin postitus, mis selgitab neid erinevusi äärmiselt tõhusalt, kui soovite süveneda.

Nende kahe vahel on detaile, millest peaksime teadlikud olema - tüüpnime kasutamisel kasutame väärtuste deklareerimiseks võrdusmärki (=), liides ei vaja võrdusmärki.

Nüüd, kui meil on varjunimed deklareeritud, on aeg seda varjunime kasutada. Kui tahame oma uue muutuja selle aliasest üles ehitada, määrame selle lihtsalt andmetüübiks:

Oluline on märkida, et liides on tüüpiline TypeScriptile. Seda kasutatakse ainult kompileerimise ajal tüübikontrolli tegemiseks ja vigade tabamiseks, mis võivad meie valvsast silmast mööda libiseda.  Meie liidese andmed jõuavad meie lõplikku koodi, kuid liides ise on kokku pandud .

Klassid

Klassid on osaliselt TypeScripti tõeline "leib ja või" (vähemalt minu tagasihoidlikul arvamusel). Uute objektide tellingute ideest kinni pidades võimaldavad klassid meil andmeid palju lihtsamalt üles ehitada kui lihtsalt vajadusel iga kord käsitsi välja trükkida.

Klassidest võib mõelda kui jooniseid selle kohta, kuidas meie andmeid tuleks määratleda ja millisteks toiminguteks, kui neid peaks olema, meetodite abil saama.

Allpool on näide TypeScripti klassist (mille võimaldab klasside juurutamine ES6-s):

Nüüd võite endalt küsida, millised on erinevused klassi , tüübi pseudonüümi ja liidese vahel ? Suurepärane küsimus! Peamine erinevus seisneb selles, et klassid võivad olla kiireloomulised (saame neist luua uusi eksemplare), liides aga mitte.

Loomulikult on ka muid erinevusi, kuid see ei kuulu selle artikli reguleerimisalasse. Kui soovite süveneda, on siin üks hea artikkel, mida lugesin, et aidata mul neid erinevusi mõista. Kõigi nende jaoks leiate kasutusjuhtumeid, nagu minulgi, kui kasutate TypeScripti.

Liit

See on minu lemmiktüüpi tüüp TypeScript! Liidu tüüp võimaldab meil deklareerida muutuja ja seejärel määrata selle väärtuseks "kas" või ". See, mida ma selle all mõtlen, ütleme nii, et eeldame, et andmed edastatakse funktsiooni, kuid me pole kindlad, kas see on string või arv - see on liidutüübi ideaalne (ja mõeldud) eesmärk.

Tüübi määratlemisel kasutame ühe toru märki (Windowsis on see Shift + klahv paremal Enteri kohal). Unioni andmetüübiga muutuja määratlemisel näeks välja järgmine:

const numOfDoors: string | string[ ];

See ütleb TypeScriptile, et numOfDoors on muutuja, mis mahutab kas stringi või stringide massiivi.

Siin on näide selle funktsiooni kohta, mida mainisin varem liidu tüübi abil:

Ükskõik

Igasugune on tüüp, mille määrasime alati, kui pole kindel saadaolevate andmete tüüpides. Võib-olla saame midagi kolmandalt osapoolelt või mingeid dünaamilisi andmeid ja me pole 100% kindlad, kas saame stringi, numbri või võib-olla hulga teavet. See on ideaalne kasutusviis mis tahes tüüpi jaoks .

Hoiatan, et kasutaksite ühtegi tüüpi, välja arvatud juhul, kui peate seda tingimata tegema, kuna kasutamisel loobume TypeScript-tüüpi kontrolli ühest põhifunktsioonist.

Kuid sellel andmetüübil on kasutusjuhtumid nagu kõigil mainitud andmetüüpidel.

See on mähis!

Ma ütlesin sulle, et see ei võta liiga kaua aega: D

Loodan, et teile meeldis see artikkel TypeScripti kohta ja olete huvitatud sellest, kuidas see teie koodibaasile kasulikuks võib osutuda. Järgmises artiklis uurime TypeScripti praktilist külge. Vaatame selle installimist, kompileerimist ja kasutamist teie projektis (ka mitte ainult nurkade projektides)!

See postitati algselt minu ajaveebi.

Seal olles ärge unustage registreeruda minu uudiskirja saamiseks - saate seda teha lehe paremas ülanurgas. Luban, et ma ei rämpsusta kunagi teie postkasti ja teie teavet ei jagata kellegi / saidiga. Mulle meeldib aeg-ajalt saata enda jaoks huvitavaid ressursse, artikleid veebiarenduse kohta ja oma uusimate postituste loendit.

Kui te pole seda veel teinud, saate minuga ühendust võtta ka sotsiaalmeedias! Kõik minu lingid on ka selle lehe paremas ülanurgas. Mulle meeldib teistega suhelda ja uute inimestega tutvuda, nii et ära karda tere öelda :)

Olge äge päevane sõber ja rõõmus kodeerimine!