TypeScript-fájl fordítása

  • 5 perc

Ahogy azt korábban megtudta, a TypeScript az ECMAScript 2015 (ECMAScript 6 vagy ES6) szigorú szuperhalmaza. Az összes JavaScript-kód is TypeScript-kód, és egy TypeScript-program zökkenőmentesen használhatja a JavaScriptet. Valójában a JavaScript-fájlokat typeScript-fájllá alakíthatja úgy, hogy a bővítményt .js-ről .ts-reátnevezi.

Azonban nem minden TypeScript-kód JavaScript-kód. A TypeScript új szintaxist ad a JavaScripthez, így a JavaScript könnyebben olvasható és implementál bizonyos funkciókat, például statikus gépelést. Bár a TypeScript-kód megkönnyíti és csökkenti a hibák valószínűségét, a böngészők és a legtöbb más futtatókörnyezet nem támogatja natív módon a TypeScriptet. Ezért a TypeScript használatához egy buildelési lépésre (transpilerre) van szükség ahhoz, hogy JavaScriptre alakítsa azt az alkalmazás működéséhez.

A TypeScript-kódot JavaScript-kódmá alakíthatja a TypeScript-fordítóval, vagy használhat TypeScript-kompatibilis fordítót, például Babelt, swc-t vagy Sucrase-t. Ez a folyamat eltávolítja a TypeScript-specifikus kódot (például típusdeklarációkat és interfészeket). Emellett létrehoz egy tiszta JavaScript-fájlt, amelyet a weblapokról futtathat, és kompatibilis a böngészőkkel.

TypeScript-fájl fordítása

A parancssorban futtatja a TypeScript-fordítót a tsc parancs használatával. Ha paraméterek nélkül futtat, tsc az az aktuális mappában lévő összes .ts fájlt lefordítja, és mindegyikhez létrehoz egy .js fájlt.

Egy adott fájlt is lefordíthat. Ha például egy utility_functions.ts nevű TypeScript-fájlt szeretne lefordítani, írja be a következőttsc utility_functions.ts: .

Megjegyzés:

A .ts fájlkiterjesztés megadása nem kötelező.

Ha nincsenek fordítóhibák, a tsc parancs létrehoz egy utility_functions.js nevű JavaScript-fájlt.

Ha a fordító hibákat talál a kódban, az megjelenik a parancsablakban. Javítsa ki a TypeScript-fájl hibáit, majd futtassa újra a tsc parancsot.

Fordító beállításai

A fordítóbeállítások használatával szabályozhatja, hogy a JavaScript hogyan legyen létrehozva a forrás TypeScriptből. A beállításokat a parancssorban is beállíthatja, ahogyan sok parancssori felületen, vagy egy tsconfig.json nevű JSON-fájlban.

Számos fordítói lehetőség érhető el. A lehetőségek teljes listáját a tsc parancssori felületeinek dokumentációjában találja. Íme a leggyakoribb lehetőségek:

  • noImplicitAny
  • noEmitOnError
  • target
  • a címtár beállításai

A fordítás szabályozásához használhatja a fordítási beállításokat a tsc paranccsal, például:

  • A --noImplicitAny beállítás arra utasítja a fordítót, hogy vélelmezett any típusú kifejezésekkel és deklarációkkal kapcsolatos hibákat jelez. Például:

    tsc utility_functions.ts --noImplicitAny

  • A --target beállítás a JavaScript-fájl ECMAScript-célverziójának megadása. Ez a példa egy ECMAScript 6-kompatibilis JavaScript-fájlt állít össze:

    tsc utility_functions.ts --target "ES2015"

A későbbi modulokban további fordítóbeállításokat is megismerhet.