Miért válassza a TypeScript-et a JavaScript helyett
a TypeScript népszerűsége az elmúlt néhány évben növekszik. 2020-ban az öt legígéretesebb nyelv között említik. Az Angular, az egyik legnagyobb frontend keretrendszer, TypeScript-et használ. A JS programozók körülbelül 60% – a már használja a TypeScript-et, 22% – uk pedig megpróbálja. Miért?
történelmileg a JavaScript lett a weboldalak és alkalmazások szkriptjeinek fő nyelve az Interneten. Most már lehetséges a JavaScript használata mind a frontenden, mind a backenden olyan keretrendszerekkel, mint a Node.js és Deno.
de vajon a JavaScript olyan nagy, összetett rendszerek létrehozására készült, mint amilyenek a modern weben vannak? Nem.
ebben a cikkben bemutatjuk Önnek a megoldást – a TypeScript-et -, és elkezdjük a típusok hozzáadásának útját a JavaScript-kódhoz.
Íme néhány pont, amelyet lefedünk:
- mi a gépírás?
- mik azok a típusok, és hogyan működnek a TS-ben?
- JavaScript vs. TypeScript: melyiket válasszuk?
- hogyan kezdjük el a TypeScript.
- további források a gépírás tanulmányozásához.
mi a gépírás?
röviden, a TypeScript egy JavaScript szupersett, amely opcionális gépeléssel rendelkezik, és lefordítja a sima Javascriptet.
egyszerűbb szavakkal, a TypeScript technikailag JavaScript statikus gépeléssel, amikor csak akarja.
mi lenne az oka annak, hogy statikus gépelést adjunk a JavaScript – hez?
legalább hármat felsorolhatok:
- elkerülheti a mesterien rejtett nindzsa hibákat, mint például a klasszikus
'undefined' is not a function. - könnyebb a kód újraírása anélkül, hogy jelentősen megszakítaná.
- a komplex, nagyszabású rendszerekben való tájékozódás már nem rémálom.
valójában egy tanulmány azt mutatja, hogy az összes JavaScript hiba 15% – a észlelhető géppel.
a dinamikus gépelés szabadsága gyakran olyan hibákhoz vezet, amelyek nemcsak csökkentik a programozó munkájának hatékonyságát, hanem az új kódsorok hozzáadásának növekvő költségei miatt is megállíthatják a fejlesztést.
ezért az, hogy a JavaScript nem tartalmaz olyan dolgokat, mint a típusok és a fordítási idejű hibaellenőrzések, rossz választás a szerveroldali kódokhoz a vállalatokban és a nagy kódbázisokban. Ahogy a címkéjük mondja, a TypeScript a JavaScript, amely skálázódik.
mit kell megtanulnom a TypeScript használatához?
a TypeScript lényegében egy JS linter. Vagy js dokumentációval, amelyet a fordító megérthet.
ezért, ellentétben más nyelvekkel, mint például a CoffeeScript (amely szintaktikai cukrot ad hozzá) vagy a PureScript (amely egyáltalán nem hasonlít a JavaScriptre), nem kell sokat tanulnia a TypeScript kód írásának megkezdéséhez.
típusok a TS-ben nem kötelezőek, és minden JS fájl érvényes TypeScript fájl. Míg a fordító panaszkodik, ha típushibák vannak a kezdeti fájlokban, akkor visszaad egy JavaScript fájlt, amely úgy működik, mint korábban. Bárhol is vagy, a TypeScript ott találkozik veled, és könnyű fokozatosan felépíteni a készségeidet.
a TypeScript a frontenden vagy a backenden használatos?
a TypeScript JavaScript-re van lefordítva. Ezért a TS bárhol használható, ahol a JS használható: mind a frontend, mind a backend.
a JavaScript a legnépszerűbb nyelv a szkriptek implementálásához az alkalmazások és weboldalak frontendjéhez. Így a TypeScript ugyanarra a célra használható, de összetett vállalati projektekben ragyog a szerver oldalon.
a Serokell, a legtöbb webes frontend végre géppel.
mik azok a típusok, és hogyan működnek a TS-ben?
rövid bevezetés a típusokhoz
a típusok egy módja annak, hogy megmondjuk a helyes programokat a helytelenektől, mielőtt futtatnánk őket, leírva a kódunkban, hogyan tervezzük használni az adatainkat. Ezek az egyszerű típusoktól, például a számtól és a Karakterlánctól a problémás tartományunkhoz tökéletesen modellezett összetett struktúrákig változhatnak.
a programozási nyelvek két kategóriába sorolhatók: statikusan gépelt vagy dinamikusan gépelt.
statikus gépeléssel rendelkező nyelveken a változó típusát fordításkor ismerni kell. Ha deklarálunk egy változót, akkor a fordítónak tudnia kell (vagy kikövetkeztethető), hogy Szám, karakterlánc vagy logikai lesz-e. Gondolj Java-Ra.
dinamikus gépeléssel rendelkező nyelveken ez nem feltétlenül így van. A változó típusa csak a program futtatásakor ismert. Gondolj Pythonra.
a TypeScript támogatja a statikus gépelést, míg a JavaScript nem.
a TypeScript statikus gépelése miatt keményebben kell próbálkoznia:
- definiálatlan változók bevezetése (fordítási figyelmeztetések segítenek)
- összegezzen két karakterláncot, amelyekben számok vannak (például “4” + “20” = “420”)
- végezzen műveleteket olyan dolgokon, amelyek nem teszik lehetővé őket, például vágjon le egy számot.
statikus típusú rendszerekkel saját kompozit típusokat hozhat létre. Ez lehetővé teszi a mérnökök számára, hogy részletesebben kifejezzék szándékaikat.
Explicit típusok is, hogy a kód öndokumentáló: gondoskodnak arról, hogy a változók és a függvények megfeleljenek a szándékoltnak, és lehetővé teszik a számítógép számára, hogy gondoskodjon a környező kontextus emlékezéséről.
a gépírás típusai
a Gépírásnak számos alapvető típusa van, például logikai, szám, karakterlánc, tömb, Tuple stb. Ezek közül néhány nem létezik a JS-ben; többet megtudhat róluk a TypeScript dokumentációjában.
ezeken kívül itt van néhány más típus, amelyet a TS expresszivitásának bemutatására szeretnénk bemutatni:
bármely & ismeretlen
míg bármelyik típus lefedheti, jól, bármit, amit szeretne, az ismeretlen a típusbiztos megfelelője.
amikor el akarja kerülni a type rendszert, az any lehetővé teszi, hogy bármilyen JavaScript változót hozzárendeljen hozzá. Gyakran használják olyan bejövő változók modellezésére (például harmadik féltől származó API-kból), amelyeket még nem ellenőriztek, és amelyek típusa ismeretlen.
ismeretlen sok, mint bármelyik, de nem engedi, hogy bármilyen műveletet végezzen a változón, mielőtt kifejezetten BE lenne jelölve.
érvénytelen
a Void akkor használatos, ha nincs visszaadott érték, például a semmit visszaadó függvények visszatérési típusaként.
soha
a soha nem az a visszatérési típus, amely soha nem fordulhat elő, például egy olyan funkció, amely kivételt dob.
kereszteződés & Egyesüléstípusok
ezek lehetővé teszik, hogy egyedi típusokat hozzon létre, hogy jobban illeszkedjen a logikájához.
kereszteződés típusok lehetővé teszik, hogy össze több alapvető típusok egy Típus. Létrehozhat például egy egyéni típusú személyt, amelynek name: string és phone_number: numbervan. Ez egyenértékű azzal, hogy azt mondom: azt akarom, hogy a típusom ez legyen.
az egyesülési típusok lehetővé teszik, hogy a típus a több alaptípus egyikét vegye fel. Lehet például olyan lekérdezés, amely result: string vagy undefinedértéket ad vissza. Ez egyenértékű azzal, hogy azt mondom: azt akarom, hogy a típusom ez vagy az legyen.
ha a típusokra szóközként gondolunk, ezeknek a típusoknak gyorsan van értelme.
a TypeScript típusai lehetnek implicit és explicit is. Ha nem írja meg kifejezetten a típusait, a fordító a típus következtetését használja a használt típusok következtetésére.
ezek kifejezett írása azonban olyan előnyökkel jár, mint például más fejlesztők segítése, akik elolvassák a kódot, és megbizonyosodnak arról, hogy amit lát, az az, amit a fordító lát.
TypeScript vs. JavaScript
megéri pragmatikusnak lenni. Vessen egy pillantást erre a grafikonra:
a semmiből a TypeScript most a 7. helyen áll a GitHub pull requests for Q1 2020-ban, a PHP és a C felett. (forrás)
bár ennek jelentős oka a TypeScript támogatása olyan vállalatok által, mint a Microsoft (amely létrehozta) és a Google, jó okból támogatják.
3 ok arra, hogy a TypeScript-et válassza a JavaScript helyett
1. A gépírás megbízhatóbb
a JavaScript-szel ellentétben a TypeScript kód megbízhatóbb és könnyebben refaktorálható. Ez lehetővé teszi a fejlesztők számára, hogy elkerüljék a hibákat, és nem átírja sokkal könnyebb.
a típusok érvénytelenítik a legtöbb buta hibát, amelyek a JavaScript kódbázisokba lopakodhatnak, és gyors visszacsatolási ciklust hoznak létre, hogy kijavítsák az összes apró hibát az új kód írásakor és a refaktoráláskor.
2. A gépírás egyértelműbb
a típusok explicit készítése arra összpontosítja figyelmünket, hogy pontosan hogyan épül fel a rendszerünk, és hogy a különböző részei hogyan hatnak egymásra. Nagy léptékű rendszerekben fontos, hogy a kontextust szem előtt tartva elvonjuk a rendszer többi részét. A típusok lehetővé teszik számunkra, hogy ezt megtegyük.
3. A TypeScript és a JavaScript gyakorlatilag felcserélhetők, miért ne?
mivel a JavaScript a TypeScript egy részhalmaza, használhatja az összes JavaScript könyvtárat és kódot, amelyet a TypeScript kódjában szeretne használni.
a legnépszerűbb JavaScript könyvtáraknak vannak típusai 2020 – ban-a Definitely Typed egy olyan adattár, amely sok különböző JavaScript könyvtár típusait tartalmazza, amelyek segítségével a velük való interakciókat típusbiztonságosabbá teheti.
ez azt jelenti, hogy fokozatosan elfogadhatja a TypeScript-et a JavaScript kódbázisában, először típusokat adva az egyes modulokhoz, majd kibővítve… azt hiszem, az ismert univerzumot fogyasztja.
a gépírás hátrányai
nem lehet csak úgy egy JavaScript csapat vagy egy JavaScript adattár, és azonnal váltani őket idiomatikus TypeScript. Vannak kompromisszumok, és előre meg kell hozni az áldozatokat.
bár vitatkozhatunk azon megtakarításokról, amelyek hosszú távon kifejezetten a típusokkal kapcsolatosak, rövid távon több időbe telik a hozzáadásuk. Ez vitathatatlanul nem hatalmas üzlet, de érv a JavaScript mellett.
ezért előfordulhat, hogy nem választja a TypeScript-et kis projektekhez és prototípusokhoz saját használatra.
tesztek vs. típusok
röviden érintse meg a tesztelés vs .. típusok: mindkét dolog a hibák különböző osztályait fogja meg, ezért van értelme mindkettőt pártatlan módon megtenni.
továbbra is használhatja mind az egységtesztelést, mind a fejlettebb technikákat, például a tulajdonságalapú tesztelést TS-sel, miközben megőrzi a statikus típusú rendszer előnyeit.
összefoglalva, itt van egy gyors összehasonlítás mindkét nyelven:
| gépírás | JavaScript |
|---|---|
| a TS egy objektum-orientált szkriptnyelv | a JS egy objektum-orientált szkriptnyelv |
| függő nyelv (JavaScript-re fordít) | független nyelv (értelmezhető és végrehajtható) |
| lefordított nyelv, nem hajtható végre közvetlenül böngészőben | értelmezett nyelv, közvetlenül webböngészőben hajtható végre |
| statikusan gépelhető | dinamikusan gépelhető |
| jobb strukturált és tömör | rugalmasabb, mivel nem korlátozza a típusú rendszer |
| van egy .ts kiterjesztés | van egy .js kiterjesztés |
| készítette a Microsoftnál Anders Hejlsberg (a C# tervezője), karbantartója a Microsoft | készítette: Brendan Eich (Netscape), karbantartója: ECMA (European Computer Manufacturers Association). |
| tisztességes választás komplex projektekhez | jó kis, egyszerű projektekkel dolgozni |
TypeScript gyorsindítási útmutató
TypeScript fordító
a TS-kód összeállításához telepítenie kell a tsc (a TypeScript fordító rövidítése). A legegyszerűbb módja a terminálon keresztül. Ez könnyen elvégezhető a npm segítségével a következő paranccsal:
npm install -g typescriptha a TypeScript-et Visual Studio kóddal szeretné használni, van egy praktikus útmutató a weboldalukon.
a tsctelepítése után a fájlokat a tsc filename.ts fájlba fordíthatja.
fájlok áttelepítése JavaScript-ről TypeScript-re
tegyük fel, hogy a következő JavaScript fájlt TypeScript-re akarjuk változtatni a furcsa viselkedés miatt:
function my_sum(a, b) { return a + b; }let a = 4; let b = "5";my_sum(a, b);jó hírek. Bármely JS fájl technikailag érvényes TypeScript fájl, tehát remekül indul – csak váltson a fájlkiterjesztésre .TS-től .js.
a TypeScript típuskövetkeztetéssel rendelkezik, ami azt jelenti, hogy automatikusan következtethet néhány használt típusra anélkül, hogy hozzáadná őket. Ebben az esetben feltételezi, hogy a függvény két any típusú változót összegez, ami igaz, de jelenleg nincs nagy haszna.
ha csak számokat akarunk összegezni, akkor hozzáadhatunk egy típusú aláírást a my_sum – hoz, hogy csak számokat fogadjon el.
function my_sum(a: number, b: number) { return a + b; }let a = 4; let b = "5";my_sum(a, b);most a TypeScript hibát ad nekünk.
Argument of type 'string' is not assignable to parameter of type 'number'.
jó dolog, hogy megtaláltuk, hol van a hiba. 🙂 Az ilyen hibák további elkerülése érdekében típusdefiníciókat is hozzáadhat a változókhoz.
let b: number = "5" // Type '"5"' is not assignable to type 'number'.let b: number = 5 // Everything ok. a TypeScript meglehetősen rugalmas abban, hogy mit tehet és hogyan segíthet Önnek. Egy kevésbé triviális példa arra, hogyan lehet a meglévő JavaScript kódbázist TypeScript-be helyezni, vagy a TypeScript segítségével javítani a JS-kódot, olvassa el ezt az útmutatót.
hogyan kell használni a TypeScript-et egy böngészőben?
a TypeScript böngészőben történő futtatásához a TypeScript fordítóval (tsc) át kell ültetni JavaScript-be. Ebben az esetben a tsc létrehoz egy újat .js fájl alapján .ts kódot, amely segítségével bármilyen módon lehet használni a JavaScript fájlt.
források a további tanuláshoz
TypeScript mély merülés
ez az ingyenes webes erőforrás mindent tartalmaz, amire szüksége van a TypeScript elindításához, beleértve az itt már tárgyalt szakaszok részletesebb magyarázatát.
Ismerje Meg A Gépírást A Semmiből!
gyakorlati 3 órás tanfolyam, amely a TypeScript összes alapvető funkcióján megy keresztül, hogyan kell használni a JS keretrendszerekkel való interakcióhoz, és hogyan kell használni a TypeScript erejét JavaScript írása közben.
gyakorlat
az Exercism a legjobb erőforrás a kódírás új programozási nyelven történő gyakorlásához. Mentorok, amelyek az idiomatikus kód felé irányítják Önt, sok szórakoztató gyakorlati feladat – nincs semmi, amit nem lehet szeretni ezen a weboldalon.
következtetések
összességében a TypeScript nagyszerű eszköz az eszközkészletben, még akkor is, ha nem használja teljes kapacitással. Könnyű kicsiben kezdeni és lassan növekedni, tanulni és új funkciókat hozzáadni. A TypeScript pragmatikus és barátságos a kezdőknek, így nem kell félni.
remélem, hogy ez a cikk hasznos lesz a géppel írt utazás során. Ha segítségre van szüksége, vagy kérdése van, feltétlenül kérdezze meg őket a közösségi médiában, például a Twitteren vagy a Facebook-on.