A TypeScript a webfejlesztés egyik aktuális témája, és jó okokból.
Ez lehetővé teszi számunkra, hogy cast-ot írjanak be a változók deklarálásakor, ami azt jelenti, hogy kifejezetten beállítottuk az elvárt adatok típusát. Ezután hibákat dob, ha a visszaküldött adatok nem olyan típusúak, mint amire számítottunk, vagy ha egy függvényhívásnak túl kevés vagy túl sok argumentuma van. És ez csak egy minta mindenből, amit kínál.
Ha áttekintést szeretne kapni az adattípusokról, hasznos lesz elolvasnia az előző cikkemet. A cikk elolvasása nem szükséges, de jól megismeri a TypeScript adattípusait és szintaxisát.
Mielőtt elkezdenénk, fontos megjegyezni, hogy a TypeScript használható egy keretrendszerrel / könyvtárral együtt, de a kerettől / könyvtártól függetlenül is. A TypeScript az alapértelmezett az Angular projektekben, és van egy cikkem a munkákról a kezdő lépésekről.
Ez a cikk azt is feltételezi, hogy ismeri a JavaScript programozását.
Tehát most készen állunk a TypeScript használatának megkezdésére és a fantasztikus funkcióinak használatára.
Ássunk be!
A TypeScript telepítése
A TypeScript telepítésének két fő módja van. Az első a Visual Studión keresztül történik (nem tévesztendő össze a Visual Studio kóddal), amely egy IDE. A 2015-ös, 2017-es és azt hiszem, hogy a 2019-es verzióhoz már telepítve van a TypeScript.
Nem ez az útvonal, amelyet ma meg fogok járni, mivel főleg a Visual Studio Code-ot használom minden igényemhez.
A második és az összpontosítás módja az NPM (Node Package Manager).
Ha még nincs telepítve az NPM és / vagy a Node (a Node telepítésekor kapja meg az NPM-et), akkor itt a nagyszerű alkalom erre, mivel ez a következő lépések követelménye (és társítással a TypeScript használatának követelménye).
A Node és az NPM telepítése után nyissa meg a terminált a VS Code-ban, és futtassa a következő parancsot:
npm install -g typescript
Miután befejezte a telepítést, látni fogja, hogy 1 csomag hozzá lett adva. Megjelenik egy üzenet is, amely a TypeScript telepített verzióját tartalmazza.
Ez minden, amire szüksége van a TypeScript fordításának megkezdéséhez a JavaScript-be.
Most már készen áll a TypeScript írására!
A TypeScript projekt indítása
Hozzunk létre egy TypeScript projektet, hogy kihasználhassuk mindazokat a nagyszerű lehetőségeket, amelyek a használatával együtt járnak.
Hozzon létre egy HTML-fájlt a választott szerkesztőben (VS Code-t használok), amely a kód vizuális oldala lesz. Így néz ki az alapvető HTML fájlom:
Őszintén szólva csak ezt a HTML-t használjuk, hogy legyen mit nézegetnünk az oldalon. Amit igazán foglalkoztatunk, az a konzol használata.
Észre fogja venni, hogy app.jslinkeltem a index.htmlfájlunk fejébe .
Valószínűleg azt mondod magadnak, hogy azt hittem, ez egy cikk a TypeScriptről?
Tartsd meg a lovaidat. Csak a JavaScript és a TypeScript közötti különbségeket szeretném kiemelni (lentebb megtudhatja, honnan származik ez a fájl).
Az alábbiakban látható egy egyszerű változó deklaráció és egy konzolnapló utasítás:
Megjegyzendő, hogy ha le akarja tiltani néhány ES-Lint szabályt, akkor a szabályokat a megjegyzések tetejére helyezheti, mint ahogy fentebb tettem. Vagy ha teljesen le akarja tiltani az ES-Lint alkalmazást a fájlhoz, csak akkor helyezheti /* eslint-disable */el a fájl tetején.
És itt van a böngésző konzol:
Tegyünk úgy, mintha egy alkalmazást építenék, és userNamearra számítok, hogy mindig visszakapok egy húrt. Útközben hibázhatok, vagy az adataim más forrásból mutálódhatnak.
Most userNameegy szám :(
És itt van a böngésző konzol, amely megmutatja azokat a változásokat, userNameamelyek valószínűleg nem akartak történni, ha ez egy éles alkalmazás lenne:
Mi lenne, ha a visszaküldöttet userNameekkor átadnák egy másik funkciónak vagy egy nagyobb adat puzzle darabjaként használnák?
Nemcsak rendetlenség lenne kitalálni, hogy hol következett be a mutáció (főleg, ha nagyobb az alkalmazásunk), hanem elmondhatatlan számú hibát is létrehozna a kódunkban.
Most próbáljuk meg ugyanezt a kísérletet a TypeScript-ben. Ehhez létre kell hoznunk egy új .tskiterjesztésű fájlt, amely egy TypeScript fájlt jelöl.
app.tsMegnevezem az enyémet , hogy összhangban maradjak a névadási szokásokkal, és ugyanazt a kódot helyezem el a JavaScript fájlunkból az új TypeScript fájlba.
Észre fogja venni, hogy a változó deklarálásakor a type castingot használom, és kifejezetten mondom a TypeScript-nek, hogy ennek a változónak csak egy string értékre kell mutatnia.
Azt is észreveszi, hogy egy hibasor van az alatt, userNameamikor újra hozzárendelem az értékét.
A TypeScript fordítása a CLI-vel
Ahhoz, hogy lássuk, hogyan néz ki ez a konzolunkban, le kell fordítanunk a JavaScript-be. Ezt úgy csináljuk, hogy tsc app.tsa VS Code konzolunkon futtatjuk (ugyanazt a parancsot bármely terminálon futtathatja, amíg a megfelelő könyvtárban van).
Amikor futtatjuk ezt a parancsot, lefordítja a TypeScriptünket a JavaScript-be. Ezenkívül létrehoz egy másik, azonos .jskiterjesztésű fájlt, csak kiterjesztéssel.
Innen app.jsszármazott az a fájl, amelyet korábban a cikkben említettem.
Több fájl egyszerre történő fordításához egyszerűen adja meg ezeket a neveket a parancsban egymás után: tsc app.ts header.component.ts
Az is lehetséges, hogy több TypeScript fájlt egyetlen JavaScript fájlba fordítson a --outzászló hozzáadásával :
tsc *.ts --out index.js
Van egy figyelő parancs is, amely automatikusan újrafordítja a TypeScript-t bármikor, ha változás észlelhető. Ez megakadályozza, hogy ugyanazt a parancsot kelljen újra és újra futtatnia:
tsc *.ts --out app.js --watch
Íme a tsc app.tsfenti parancs kimenete :
Ez a hiba azt jelzi nekünk, hogy probléma van a userName. Mivel a változónkat kifejezetten karakterláncnak állítottuk be ( még akkor is, ha nem állítottam volna be a változót stringre, a hiba akkor is előfordulna, mert a TypeScript következtet az adattípusokra ), ezért nem rendelhetjük át egy számhoz.
Ez nagyszerű tulajdonság, mert arra kényszerít bennünket, hogy változó deklarációinkkal egyértelműek legyünk, és megment minket attól, hogy olyan hibákat kövessünk el, amelyek idegesítőnek és időigényesnek bizonyulhatnak. Ha bizonyos típusú adatokra számít, akkor meg kell kapnia ezeket az adatokat, különben hibát kell kapnia.
Kifejezetten deklaratív tömbök és objektumok használata
Tegyük fel, hogy építek egy projektet, és ahelyett, hogy kézzel állítanám be a navigációs hivatkozásokat, azt szeretném tárolni, hogy az információkat egy tömb objektumban tároljam.
A tárolt információknak meghatározott formátumot várok, így az összes hivatkozáson következetes.
Így állíthatom be a "komplex" tömböt a TypeScript-ben:
A bal oldalon deklaráljuk a változó nevét navLinks, amelyet kettőspont követ. A göndör zárójelnél itt kezdjük el deklarálni az ebben a tömbben elvárt információk formátumát.
Azt mondjuk a TypeScript-nek, hogy elvárjuk, hogy ez a tömb objektumot vagy objektumokat tartalmazzon ilyen tulajdonságnevekkel és típusokkal. Azt várjuk, hogy a nameami egy karakterlánc, a linkmely egy karakterlánc, és altamely szintén egy karakterlánc.
Mint más adattípusoknál, ha eltérünk az e változó számára létrehozott formátumtól, hibákba ütközünk.
Itt megpróbáltunk hozzáadni egy üres bejegyzést, és a következő hibát kaptuk:
Type '{}' is missing the following properties from type '{ name: string; link: string; alt: string; }' : name, link, alt ts(2739)
Hasonló hibákat tapasztalunk, ha megpróbálunk egy másik bejegyzést helytelen információval felvenni:
{ name: 'Jonathan', link: 15, alt: false } ❌
{ name: ['Jon','Marley'], link: `//link123.net`, alt: null } ❌
this.navLinks[0].img = '../../assets/img' ❌
this.navLinks[0].name = 'Barnaby'✔️
Az ötlet mégis megvan. Miután megállapítottuk a formátumot, a TypeScript megtart minket abban a formátumban, és tájékoztat minket, ha / amikor hibával térünk el tőle.
Itt van néhány módszer egy tömb definiálására:
const arr1: Array = ['Dave', 35, true]; // lehetővé teszi számunkra, hogy tetszőleges számú elem legyen bármilyen típusú
const people: [string,string,string] = ['John', 'Sammy', 'Stephanie'];// a hibát eldobja, ha a tömbben 3-nál több karakterlánc vagy nem karakterlánc jelenik meg
const people: Array = ['Jimmy', 'Theresa', 'Stanley'];// lehetővé teszi számunkra, hogy tetszőleges számú string elem legyen a tömbben
Az objektumok ugyanúgy működnek, mint a tömbök a TypeScript-ben. Kifejezetten meghatározhatók halmaztípusokkal, vagy hagyhatja, hogy a TypeScript elvégezze az összes következtetést. Itt van egy alapvető példa egy objektumra:
const person: {name:string, address: string, age: number} = {name: 'Willy', address: '123 Sunshine Ln', age: 35}
Ismét a bal oldalon a személyt nevezzük meg változó névnek, az első göndör zárójelkészlettel, amely meghatározza az adatok formátumát.
Fontos megjegyezni, hogy az objektumokban annak a sorrendnek, amelyben a tulajdonságokat definiáljuk, nem kell egyeznie a formátum sorrendjével:
Funkciók, paraméterek és érvek
A TypeScript által látott legnagyobb előnyök egy része a funkciók használatával jár.
Épített már valaha olyan funkciót, amellyel csak egy adott feladatot végezhet, hogy kiderítse, hogy az nem a szándékának megfelelően működik?
A TypeScript használata nem az lesz, mert nem a megfelelő típusú adatokat kapta / küldte, vagy a megfelelő számú paramétert / argumentumot használta.
Íme egy nagyszerű példa:
Funkciónkban 3 argumentum fogadására számítunk calculatorvégrehajtáskor. Ha azonban helytelen számú argumentumot kapunk (túl kevés vagy túl sok), akkor a TypeScript szép hibát okoz:
Hasonlóképpen, ha rossz típusú adatot kapunk a funkció végrehajtásakor, akkor a TypeScript hibát generál, és a függvény nem fog futni.
calculator('12', '11', 'add) ; ❌
Most azt mondhatod magadnak: "És mi van? Ez minden jó és jó, de nem tűnik hatalmas ügynek. De képzelje el, hogy alkalmazása több tucatnyi fájl, sok absztrakciós réteggel.
Nagyszerű példa erre egy Angular alkalmazás, amely szolgáltatásokkal, adatmodellekkel, többszintű komponensekkel és az ehhez kapcsolódó összes függőséggel rendelkezik. Egyre nehezebb meghatározni, honnan származik hiba, amikor az alkalmazás nagy lesz.
Ez minden
Remélhetőleg most láthatja a TypeScript előnyeit. Rengetegen vannak annál, amit itt vázoltam, és javasolom, hogy olvassa el a dokumentációt, ha többet szeretne találni.
Ezt a cikket és a hozzá hasonlóakat megtalálhatja a blogomon. Örülnék, ha betérnél!
Amíg ott van, miért nem iratkozik fel a Hírlevelemre - ezt megteheti a blog főoldalának jobb felső sarkában. Í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éljek köszönni. ?
Van egy fantasztikus napod, barátom, és boldog kódolást!