Mi a TypeScript?

Programozás

TypeScript áttekintés

Tehát, amint azt valószínűleg te is tudod, a JavaScript minden nap bővíti a lábnyomát. Lenyűgöző és csodálatos, amit manapság a nyelvvel tehet.

Amint azonban több nagyszabású projekt kezdi használni a JavaScript-et, a kód könnyebben írhatóvá és karbantarthatóbbá válik.

Ezt a problémát a Microsoft korán felismerte, és megoldással álltak elő: TypeScript Az első verzió 2012. október 1-jén jelent meg.

JavaScript vs TypeScript

Hol van Waldo

Oké, most, hogy már van egy általános tudomásunk arról, mi a TypeScript, játsszunk egy gyors játékot a Hol van Waldo-ból .

A fenti képernyőképen észreveheti a JavaScript& közötti különbségeket TypeScriptebben a nagyon egyszerű szorzási programban, amely csak kinyomtatja két előre definiált szám szorzatát.

Mik ezek a különbségek? ? ️

Ők típusok !

A JavaScriptdinamikus tipizálás ugyanúgy megvan, hogy a számként deklarált változó karakterláncokká alakítható, ahol ugyanúgy, mint TypeScripta statikus gépelésnél, azt is meg kell előzetesen kijelentenie, hogy a változó milyen típusú értéket fog tartani, és ez nem változik.

Ebben a multiplication.tsfájlban ezeket a változókat számoknak nyilvánítom, így nem lehet őket másra változtatni.

Lényegében a TypeScript megpróbálja segíteni a JavaScript-et új magasságok elérésében és nagyon skálázhatóvá válásában. A következő jellemzőkkel emelhető ki:

  • ingyenes és nyílt forráskódú programozási nyelv, amelyet a Microsoft fejlesztett és tart fenn
  • szigorú szintaktikai szuper JavaScript-készlet, amely egyszerű JavaScript-re áll össze
  • megkönnyíti a JavaScript-be írt nagyszabású alkalmazások fejlesztését
  • kiterjeszti a JavaScriptet statikus típusok, osztályok, modulok, interfészek és generikus elemek hozzáadásával

? A FUN FACT TypeScript 7 éves lett 2019. október 1-jén.

Változat

A legfrissebb elérhető verzió a TypeScript 3.7 (2020 elejétől).

A TypeScript telepítése

Telepítés

A kezdéshez két dologra lesz szükséged: a TypeScript fordítóra és a TypeScript támogató szerkesztőre.

A fenti képernyőképen mind a fordítót, mind a TSLint (amely hasonló az ESLint-hez) telepítem npma Visual Studio Code integrált terminálján keresztül.

A TypeScript telepítése

Ez a parancs telepíti a TypeScript csomagot a projekt függőségeként, npmamely egy népszerű csomagkezelő.

npm i typescript

Megjegyzés : Számos lehetőség áll npmrendelkezésre, attól függően, hogy hová szeretné telepíteni a TypeScript-t.

  • npm i -g typescript a TypeScript csomag globális telepítéséhez
  • npm i -D typescript hogy telepítse a TypeScript csomagot dev függőségként

Egyetlen fájl összeállítása JavaScript-ig

tsc multiplication.ts

Megjegyzés: Ezt a TypeScript fordítási folyamatot egyéni npm szkriptként konfigurálhatja a package.json.

Konfigurációs beállítások

touch tsconfig.json

Lehetőség van olyan tsconfig.jsonfájl létrehozására is, amely meghatározza a gyökérfájlokat és a fordító beállításait.

A tsconfig.jsonfájlban például megadhatja, hogy a TypeScript-t lefordítsa az ES5 helyett ES6 helyett.

Gyors példa

Szorzás

A fenti képernyőképen két fájlt láthat - multiplication.jsés multiplication.ts.

Ez a program csak kinyomtatja két előre definiált szám szorzatát.

multiplication.ts

let a: number = 10; let b: number = 2; function showProduct(first: number, second: number): void { console.info("Mathematical! The result is " + first * second + "."); } showProduct(a, b); // Mathematical! The result is 20.

Miután befejeztem a létrehozást multiplication.ts, le tudom fordítani JavaScript-ig tsca TypeScript fordítás rövidítésével.

multiplication.js

var a = 10; var b = 2; function showProduct(first, second) { console.info("Mathematical! The result is " + first * second + "."); } showProduct(a, b); // Mathematical! The result is 20.

Bam - mi csak sikeresen fordítottuk le a TypeScript-et JavaScript-be!

TSLint

TSLint

A linter olyan eszköz, amely észleli és megjelöli a programozási nyelvek hibáit, beleértve a stilisztikai hibákat is.

A TypeScript esetében a TSLint a legnépszerűbb linter opció.

A TSLint egy bővíthető statikus elemző eszköz, amely ellenőrzi a TypeScript kód olvashatóságát, karbantarthatóságát és funkcionalitási hibáit.

Széles körűen támogatott a modern szerkesztőkben és a build rendszerekben, és testreszabható saját szöszi szabályokkal, konfigurációkkal és formázókkal.

A TSLint telepítése

Ez a parancs globálisan telepíti a TSLintcsomagot npmegy népszerű csomagkezelő használatával .

npm i -g tslint

Játszótér

Játszótér

Ha telepítés nélkül szeretné kipróbálni a TypeScript-t, látogasson el a TypeScript Playground oldalra.

A Playground beépített automatikus befejezéssel rendelkezik, és képes közvetlenül látni a kibocsátott JavaScript-et.

Egyéb források

Ha többet szeretne megtudni a telepítésről, olvassa el a Telepítési függeléket.

Ha csak egy típusú ellenőrzőre van szüksége, és nem akarja lefordítani a programot, olvassa el a Flux cikket.

  • Gyors indítás
  • Dokumentáció
  • Forráskód