A TypeScript áttekintése

  • 5 perc

A JavaScript, a világ egyik leggyakrabban használt programozási nyelve lett a web hivatalos nyelve. A fejlesztők platformfüggetlen alkalmazások írására használják, amelyek bármilyen platformon és bármely böngészőben futtathatók.

Bár a JavaScript platformfüggetlen alkalmazások létrehozására szolgál, nem olyan nagy alkalmazásokhoz készült, amelyek több ezer, vagy akár milliónyi kódsort foglalnak magukban. A JavaScript nem rendelkezik az érettebb nyelvek néhány olyan funkciójával, amelyek a mai kifinomult alkalmazásokat támogatják. Az integrált fejlesztési szerkesztők (IDE-k) nehezen kezelhetik a JavaScriptet, és karbantarthatják ezeket a nagy kódbázisokat.

A TypeScript a JavaScript korlátozásait kezeli anélkül, hogy veszélyeztetné a JavaScript kulcsérték-javaslatát: a kód futtatásának lehetősége bárhol és minden platformon, böngészőben vagy gazdagépen.

Mi az a TypeScript?

A TypeScript egy nyílt forráskódú nyelv, amelyet a Microsoft fejlesztett ki. Ez a JavaScript egy szuperkészlete, ami azt jelenti, hogy használhatja a már kifejlesztett JavaScript-készségeket bizonyos funkciókkal együtt, amelyek korábban nem voltak elérhetők Az Ön számára.

Tippek beírása

A TypeScript alapvető funkciója a típusrendszere. A TypeScriptben egy változó vagy paraméter adattípusát típustipp használatával azonosíthatja. A típusmutatókkal egy objektum alakját ismertetheti, amely jobb dokumentációt nyújt, és lehetővé teszi a TypeScript számára annak ellenőrzését, hogy a kód megfelelően működik-e.

Statikus típusellenőrzéssel a TypeScript a fejlesztés korai szakaszában elkapja a kódhibákat, amelyeket a JavaScript általában nem tud elkapni, amíg a kód nem fut a böngészőben. A típusok segítségével azt is leírhatja, hogy a kód mire szolgál. Ha egy csapaton dolgozik, egy csapattag, aki bejön, miután ön is könnyen megértheti.

A típusok emellett a fejlesztési eszközök, például az IntelliSense, a szimbólumalapú navigáció, a definíció, az összes hivatkozás megkeresése, a nyilatkozatkiegészítés és a kód újrabontása terén is hatékonyak.

Az írási típusok a TypeScriptben opcionálisak lehetnek, mivel a típuskövetkeztetés lehetővé teszi, hogy további kód írása nélkül is nagy mennyiségű energiát kapjon. Ha a TypeScript implicit módon meg tudja határozni az adattípust (például ha egy változóhoz értéket rendel hozzá a használatával let age = 42), az automatikusan az adattípusra következtet.

Próbálja ki! Tanulás a típusokról

Tekintsünk meg egy példát, amely bemutatja a típusok használatát.

  1. Nyissa meg a TypeScript-játszóteret. A modul későbbi részében többet is megtudhat a Játszótérről.

  2. Másolja és illessze be a következő JavaScript-kódmintát a TypeScript (bal oldali) panelre:

    function addNumbers(x, y) {
  return x + y;
}

console.log(addNumbers(3, 6));

    Figyelje meg, hogy ugyanez a kód megjelenik a .JS (jobb oldali) panelen. Ezen az ablaktáblán a TypeScript által generált JavaScript-kód látható a fordítás után.

  3. A JavaScript-kód futtatásához válassza a Futtatás lehetőséget. Ezután válassza a Naplók lapot, és figyelje meg, hogy az érték 9 a konzolon van naplózva. A JavaScript hozzárendelte a number típust a paraméterekhez x , és y a függvény egy számot adott vissza.

  4. "three" Cserélje le 3 (az idézőjeleket is beleértve) a TypeScript-kódban, majd futtassa. A JavaScript most hozzárendeli a string típust a paraméterhez, és visszaadja a x "three6" karakterlánctípust a konzolnak. Valószínűleg már korábban is belefutott ebbe a helyzetbe, és mint tudja, ez váratlan eredményeket okozhat.

    A TypeScript panelen figyelje meg a függvény paraméternevei addNumbers alatti piros hullámos vonalakat. A sorok azt jelzik, hogy a típus-ellenőrző hibákat észlelt. Mutasson az egyik paraméterre, és olvassa el a hiba leírását. A TypeScript implicit módon hozzárendelt egy típust any, amely a legszélesebb típus, mivel lényegében bármit tartalmazhat.

  5. Frissítse a TypeScript-kódot az egyes paraméterek típusának megadásához. Cserélje le x a gombra x: number és y a gombra y: number.

    Megfigyelheti, hogy a hibák most már eltűntek a paraméterekből, de a függvényhívás első argumentuma alatt megjelent egy új: "A sztring típusú argumentum nem rendelhető hozzá a "number" típusú paraméterhez."

  6. Cserélje le "three" egy számra a hiba kijavításához. Megadhat egy literális értéket, egy változót vagy bármely más adatot. A TypeScript megérti az objektum alakját, így a fejlesztéskor értesítheti a típusütközésről.

  7. Tekintse át a JavaScriptet, és figyelje meg, hogy nincs rajta változás. A TypeScript képes volt típusellenőrzést biztosítani a fejlesztés során, de nem volt hatással az eredményként kapott JavaScript-kódra, mert nem támogatja a típusokat.

A TypeScript egyéb kódfunkciói

A TypeScript további kódolási funkciókkal rendelkezik, amelyeket nem talál a JavaScriptben:

  • Interfészek
  • Névterek
  • Generikus
  • Absztrakt osztályok
  • Adatmódosítók
  • Nem kötelező
  • Függvények túlterhelése
  • Dekorátorok
  • Típus utils
  • olvasható kulcsszó

Ezekről a funkciókról a későbbi modulokban olvashat bővebben.

TypeScript-kompatibilitás JavaScripttel

A TypeScript az ECMAScript 2015 (ECMAScript 6 vagy ES6) szigorú szuperhalmaza. Ez a kapcsolat azt jelenti, hogy az összes JavaScript-kód is TypeScript-kód, és egy TypeScript-program zökkenőmentesen használhatja a JavaScriptet.

A böngészők csak a JavaScriptet értik. Ahhoz, hogy az alkalmazás működjön, amikor TypeScript-be írja, le kell fordítania a kódot, és JavaScriptre kell konvertálnia. A TypeScript-kódot JavaScript-kódmá alakíthatja a TypeScript-fordítóval vagy egy TypeScript-kompatibilis átalakítóval. Az eredményként kapott JavaScript tiszta, egyszerű kód, amely mindenhol fut, ahol a JavaScript fut: böngészőben, Node.js-en vagy az alkalmazásokban.

Diagram of the relationship between JavaScript and TypeScript, where TypeScript can use JavaScript directly but must be compiled to become JavaScript.

Fontos

Amikor a TypeScripttel dolgozik, ne feledje, hogy szinte minden esetben a TypeScript lesz lefordítva (vagy lefordítva) JavaScriptre, és a JavaScriptet ténylegesen a futtatókörnyezet hajtja végre. A TypeScriptet bármely olyan projektben használhatja, ahol JavaScriptet használ.

Migrálás JavaScriptről TypeScriptre

A TypeScript alkalmazása nem bináris választás, így fokozatosan migrálhatja a kódbázist. Először a meglévő JavaScript JSDoc-val való megjegyzésével, majd a TypeScript által ellenőrizendő fájlok közötti váltással kezdheti. A kódbázist idővel teljesen átalakíthatja.

A folyamatról további információt a TypeScript-oktatóanyagok: Migrálás JavaScriptből című témakörben talál.