Ismerje meg a TypeScript adattípusokat - nullától hősig

Napjainkban ez a divat a webfejlesztés világában - a TypeScript-ben. Fogadnék, mire már hallottál róla, akár elhaladva is. De ha még nem, vagy csak kíváncsi vagy, akkor jó helyre jöttél, barátom!

Jelenleg az Angularal együtt tanulok TypeScript-et (egy cikk erről készül, szóval maradjatok velünk!), Mert a webes alkalmazásunk a munkahelyén épül be. Úgy döntöttem, hogy írok valami könnyen követhető dolgot, hogy a TypeScript adattípusokkal elindulhasson.

Ezt a cikket az egyszerűség kedvéért két bejegyzésre bontom - az első rövid áttekintést nyújt a TypeScriptről, az adattípusokról és néhány támogató példáról. A második cikk a TypeScript telepítésének és futtatásának középpontjában lesz.

Mi az?

Mielőtt nekilátnánk, íme a TypeScript szuper tömör leírása a saját szavaimmal. Ez a JavaScript szuperhalmaza - ami lényegében azt jelenti, hogy a JavaScript egy olyan formája, amely bizonyos előnyöket nyújt Önnek, a „vanília” JavaScript összes nagyszerűségével együtt. Ez egy nyílt forráskódú nyelv, amelyet a Microsoft írt és tart fenn.

A TypeScript áttelepül a JavaScript-be, és minden olyan környezetben fut, ahol a natív JavaScript fut. Használhatja a TypeScript-t mind az elülső, mind a háttér-alkalmazásokhoz.

Ugyanúgy van megírva, mint a JavaScript, néhány kivételtől eltekintve, amelyeket hamarosan áttekintünk. Íme egy példa néhány TypeScript-re:

Ne koncentráljon az összes kettőspontra és extra dolgokra, amelyeket fent lát, az alábbiakban ezt fogjuk megvizsgálni. Ehelyett inkább a kiemelkedő dolgokra koncentráljon - csak a változókat deklaráljuk értékekkel, ezek karakterláncok, tömbök és objektumok, csakúgy, mint a JavaScript-ben.

Egy másik nagyszerű dolog, amit megtanultam a TypeScript-ről, hogy keverheti a JavaScript-et a kóddal, és nincs gond ezzel. Ellenőrizze az alábbi képernyőképet (ez egy Angular alkalmazáson belül található):

Adattípusok

Kezdjük a szórakoztató dolgokkal - adattípusokkal! (Van néhány adattípus, amelyre nem térünk ki - soha, null, undefined. Ez egyszerűen azért van, mert nincs sok bennük. Szeretném, ha tudnád, hogy léteznek, és ha többet szeretnél belemélyedni ezekbe, típusok, itt található egy hivatkozás a hivatalos TypeScript dokumentációra.)

A TypeScript következtetni fog a változóhoz rendelt adatok típusára anélkül, hogy kifejezetten beállítaná a típust, de az egyszerűség és a jó mérleg kedvéért szeretném deklarálni az adattípust a változók deklarálásakor.

Adattípusokat rendelünk úgy, hogy egyszerűen kettőspontot helyezünk el a változó neve után, de az egyenlőségjel előtt:

const {változó neve}: {változó típus} = {változó értéke }

Ez az a szokás, hogy a TypeScript adattípusok többségét deklarálják, a funkciók és az objektumok kivételével.

Egyes adattípusok ennél valamivel bonyolultabbak, de megkapja az általános elképzelést. Az alábbiakban bemutatunk néhány rövid magyarázatot az adattípusokra és példákat azok deklarálására.

Logikai

A Booleans a TypeScript-ben ugyanúgy működik, mint a JavaScript-ben. A logikai adattípus változóit így deklaráljuk:

const myBool: boolean = false;

Húr

A stringek a TypeScript-ben ugyanúgy működnek, mint a JavaScript-ben. Az adattípus karakterláncának változóit így deklaráljuk:

let myString: string = 'bacon'

Szám

A TypeScript számai ugyanúgy működnek, mint a JavaScript-ben. Az adattípusszám változóit így deklaráljuk:

const myNum: number = 1207;

Sor

A TypeScript tömbök hasonlóan más adattípusokhoz, mint a JavaScript tömbök. Az adattípus tömb változóit két külön módon deklarálhatjuk:

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

A fenti módon deklarálhat egy tömböt, ha a tömbben lévő összes elem szám.

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

A tömb deklarálásának ez a módja a számra állított általános tömbtípust használja. Funkcionálisan nincs különbség abban, hogy ezek a módszerek hogyan eredményezik a tömb típusú változó deklarálásának végeredményét.

Ha a tömbben lévő adattípusok ismeretlenek vagy az adattípusok keveréke, akkor a tömböt a típus (ez egy egyedülálló típus, amelyet az alábbiakban tárgyalunk):

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

Ez lehetővé teszi az adattípusok keverését a tömbben.

Tollok

A sorrendű adattípusok egyedülállóak a TypeScript-hez. Gondoljon rájuk, mint rögzített számú elemet tartalmazó tömbökre. Ezt az adattípust akkor lehet a legjobban használni, ha pontosan tudja, hogy hány változóval kell rendelkeznie. Át lehet rendelni az indexek értékét, de a duplán lévő elemek mennyiségét nem.

A duplát adattípus változóit ugyanúgy deklaráljuk, mint egy tömböt:

let mine: [number, string];

Ha meg akarjuk változtatni az elemek értékeit , akkor ezt megtehetjük, amennyiben azok megfelelnek a változó deklarálásakor megadott típusoknak:

mine[0] = 14  ✔️

mine[0] = 'Steve'

Mivel mineduplaként definiáltuk , az értékek sorrendje is számít, és nem változtatható meg. Ha indexet rendel az eredeti megadott számon kívülre, hibát okoz:

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

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

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

Funkció

A függvények lehetnek kifejezettek, amennyire csak szeretnéd. Ez alatt azt értem, hogy típusokat alkalmazhatunk a paraméterekre és a visszaadott értékekre. Az alábbiakban két példa látható:

Ez a függvény hibát vet, ha olyan értéket ad vissza, amely nem szám. Csak akkor adhat változót vissza, ha ez a változó egy számra mutat.

Fentebb a funkciónkba átadott paraméterek típusellenőrzését végezzük. Ez nagyszerű módszer a hibák elkerülésére, mert ha a paraméterek száma ki van kapcsolva, vagy ha az adattípusuk nem egyezik meg azzal, amire számítottunk, akkor a TypeScript hibaüzenettel jelez minket.

Ha olyan függvényt akarok, amely nem ad vissza értéket, akkor a típust érvénytelennek állíthatom be (egy adattípus, amely az adatok hiányát jelenti. Bár a változók deklarálásakor használható, általában nem azért, mert akkor A változó nullára vagy undefinedre való beállításához csak akkor használtam, ha a függvényeknek nem kell visszatérési értéket adniuk), és ha a függvény bármit visszaad, akkor a TypeScript hibát okoz:

Azáltal, hogy a típust érvénytelennek állítom fel, egyértelművé teszem a visszatéréseimet, és megállapítom, hogy bár ez a függvény még futhat, nem adhat vissza értéket. Ha mégis visszaad egy értéket, hibaüzenetet kapok.

Enum

Az Enums az adattípusok mellett örvendetes (szerény véleményem szerint) kiegészítés. Gondoljon rájuk, mint egy felhasználóbarátabb megközelítésre, amellyel a neveket számértékekhez adják. Itt van egy példa az enumra:

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

console.log (Foods [0]) // 'szalonnát' eredményez

Lehetőség van a számozási index formátum hozzárendelésére enumokkal is. Számos nyelv, köztük a C # is rendelkezik enumokkal, és örülök, hogy látom őket a JavaScript-en.

A nevekkel lehetsz olyan kreatív, amennyit csak akarsz. Még az indexek numerikus ábrázolását is megváltoztathatja. Ha azt szeretné, hogy az első indexe 0 helyett 18-nál kezdődjön, akkor ez egyszerű:

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

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

Tegyük fel, hogy a 18-as értékünk volt, de nem voltunk biztosak abban, hogy mire térképeztük fel a felsorolásunkat Foods, ezt is ellenőrizhetjük:

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

Egy figyelemre méltó információ az, hogy az első indexet 18-as kezdettel állítottuk be, a következő index 19-es lesz, és így tovább az Ön által létrehozott számozási egyezményt követve.

Tárgy

A TypeScript objektumokat hasonló módon definiálják, mint a JavaScript objektumait. Lehetünk olyan implicit vagy explicitek a definíciónkkal, amennyit csak szeretnénk, vagy ahogy a helyzet diktálja:

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']};  ✔️

Objektumok létrehozásakor a tulajdonságnevek változhatatlanok, de a megjelenésük sorrendje nem számít, még akkor sem, ha meghatározott sorrendben definiáljuk őket.

Ezenkívül rendelkezhetünk olyan egyszerű objektumokkal, mint a fentiek, vagy definiálhatunk összetett objektumokat, amelyek kihasználják az alábbi adattípusok előnyeit (ez az objektum csak demonstrációs célokat szolgál):

Írja be az Alias ​​/ Interface parancsot

A fenti komplex objektum példáján gondolhatja, hogy ez fantasztikus, de mi történik a következő alkalommal, amikor komplex objektumot kell létrehoznom? Újra manuálisan kell beírnom ezeket az egészeket?

Ne félj, a típusalias és az interfész típusok segítenek! A típusalias olyan adattípus, amely lehetővé teszi számunkra, hogy más adattípusokat mentse el benne, majd egy változóra hivatkozjon ahelyett, hogy újra és újra átírná a kódot.

Megjegyzendő, hogy a típusnevek és az interfészek nagyon hasonló módon működnek. Mindkettő lehetővé teszi számunkra, hogy állványozzunk egy objektumot / tervrajzot arról, hogyan kell strukturálni az adatainkat. Vannak azonban olyan finom különbségek , amelyeket itt nem fedünk le. Ehelyett itt van egy bejegyzés, amely rendkívül hatékony módon magyarázza ezeket a különbségeket, ha mélyebbre akarsz ásni.

A kettő között vannak olyan részletek, amelyekkel tisztában kell lennünk - a típusalias használatakor egyenlőségjelet (=) használunk az értékek deklarálásához, az interfész nem igényel egyenlőségjelet.

Most, hogy bejelentettük az álnevünket, itt az ideje használni ezt az álnevet. Amikor ebből az álnévből szeretnénk "felépíteni" az új változót, egyszerűen adattípusként állítjuk be:

Fontos megjegyezni, hogy az interfész a TypeScript-re jellemző. Csak fordításkor használják a típusellenőrzés elvégzésére és az esetleges hibák elkapására, amelyek átsiklhattak a figyelő szemünk mellett.  A felületünkről származó adatok a végső kódunkba kerülnek, de maga az interfész össze van állítva .

Osztályok

Az osztályok részben a TypeScript valóságos "kenyere és vaja" (legalábbis szerény véleményem szerint). Az új objektumok állványozásának ezen gondolatánál maradva az osztályok lehetővé teszik számunkra, hogy az adatokat sokkal könnyebb módon építsük fel, mint egyszerűen csak manuálisan beírni őket, amikor csak szükség van rá.

Az osztályokat úgy lehet elképzelni, mint tervrajzokat arra vonatkozóan, hogyan kell meghatározni az adatainkat, és milyen cselekvésekre, ha vannak ilyenekre, képesek legyenek módszerekkel.

Az alábbiakban bemutatunk egy példát a TypeScript osztályára (amelyet az ES6-os osztályok bevezetése tesz lehetővé):

Most felteszi magának a kérdést, hogy mi a különbség az osztály , a típusalias és az interfész között ? Remek kérdés! A fő különbség az, hogy az osztályok példányosíthatók (új példányokat hozhatunk létre belőlük), az interfész azonban nem.

Természetesen vannak más különbségek is, de ez nem szerepel a cikk terjedelmében. Ha mélyebbre akarsz ásni, íme egy remek cikk, amelyet elolvastam, hogy segítsen megérteni ezeket a különbségeket. Mindegyikhez megtalálhatók használati esetek, ahogy én is, a TypeScript használatakor.

Unió

Ez nagyon messze a kedvenc adattípusom a TypeScript-ből! Az uniótípus lehetővé teszi, hogy deklaráljunk egy változót, majd "vagy" értékre állítsuk. Úgy értem, hogy mondjuk azt várjuk, hogy az adatokat átadjuk egy függvénynek, de nem vagyunk biztosak benne, hogy ez egy karakterlánc vagy egy szám - ez az uniótípus tökéletes (és szándékolt) célja.

Az egycsöves karaktert (Windows rendszeren a Shift + az Enter felett jobbra lévő billentyűt) használjuk a típus meghatározásakor. A következőképpen nézne ki, amikor meghatározunk egy változót az unió adattípusával:

const numOfDoors: string | string[ ];

Ez azt mondja a TypeScript-nek, hogy a numOfDoors egy olyan változó, amely akár karakterláncot, akár stringeket tartalmazhat.

Itt van egy példa arra a funkcióra, amelyet korábban említettem az uniótípus használatával:

Bármi

Bármilyen típusú, amelyet akkor állítottunk be, amikor nem vagyunk biztosak a megszerzett adatok típusában. Lehet, hogy valamit kapunk egy harmadik féltől, vagy valamilyen dinamikus adatot, és nem vagyunk 100% -ban biztosak abban, hogy karakterláncot, számot vagy esetleg tömb információt kapunk. Ez a tökéletes felhasználási eset bármilyen típusú géphez .

Én óva típus használata minden , kivéve, ha feltétlenül kell, mert ha használni fogunk leiratkozásról egyik fő jellemzői a géppel - típusellenőrzés.

Ennek az adattípusnak azonban vannak használati esetei, mint az összes említett adattípusnál.

Ez egy pakolás!

Mondtam, hogy ez nem tart túl sokáig: D

Remélem, hogy élvezte ezt a cikket a TypeScript-ről, és érdeklődött arról, hogyan lehet hasznos a kódalapja számára. A következő cikkben kitérünk a TypeScript gyakorlati oldalára. Áttekintjük a telepítését, fordítását és felhasználását a projektben (nemcsak Angular projektekben)!

Ezt eredetileg a blogomon tették közzé.

Amíg ott vagy, ne felejts el regisztrálni a Hírlevelemre - ezt az oldal jobb felső sarkában teheti meg. Ígérem, hogy soha nem fogok levélszemétet küldeni a postaládájába, és az Ön adatait nem osztjuk meg senkivel / webhelypel. Szeretnék időnként érdekes forrásokat küldeni, cikkeket a webfejlesztésről és a legújabb bejegyzéseim listáját.

Ha még nem tette meg, kapcsolatba léphet velem a közösségi médiában is! Az összes linkem szintén az oldal jobb felső sarkában található. Szeretek másokkal kapcsolatba lépni és új emberekkel találkozni, ezért ne féljetek köszönni :)

Van egy fantasztikus napi barátod és boldog kódolásod!