TypeScript vs. JavaScript: megérteni a különbségeket

a világháló alapvetően JavaScript, HTML és CSS rendszereken fut. Sajnos a Javascriptből hiányzik számos olyan funkció, amely segítené a fejlesztőket nagyszabású alkalmazásokhoz. Írja Be A Gépírást.

mi az a JavaScript?

a JavaScript a Netscape Navigator webböngésző szkriptnyelveként indult; Brendan Eich 10 nap alatt írta meg a prototípust 1995-ben. A JavaScript név egy bólintás a Sun Microsystem Java nyelvére, bár a két nyelv meglehetősen különbözik egymástól, és a nevek hasonlósága jelentős zavart okozott az évek során. A JavaScript, amely jelentősen fejlődött, most már minden modern webböngészőben támogatott.

JavaScript nyelv

a JavaScript több paradigma nyelv. Göndör zárójeles szintaxissal és pontosvesszővel rendelkezik, mint a C nyelvcsalád. Gyenge, dinamikus gépeléssel rendelkezik, vagy értelmezhető, vagy (gyakrabban) just-in-time fordítható. Általában a JavaScript egyszálú, bár van egy Web Workers API, amely többszálú, és vannak események, aszinkron függvényhívások és visszahívások.

a JavaScript támogatja az objektumorientált programozást prototípusok használatával, nem pedig a C++, Java és C# osztály öröklődésével, bár a class szintaxist hozzáadták a JavaScript ES6-hoz 2015-ben. A JavaScript támogatja a funkcionális programozást is, beleértve a bezárásokat, a rekurziót és a lambdákat (névtelen függvények).

a JavaScript ES6 előtt a nyelvnek nem volt tail call optimalizálása; most már igen, bár engedélyezéséhez be kell kapcsolnia a szigorú módot ('use strict'), és a megvalósítás böngészőnként változik. A Strict mode megváltoztatja a JavaScript szemantikáját is, és megváltoztat néhány általában csendes hibát, hogy hibákat dobjon.

mi ez az “ES6” jelölés? A szabványosított JavaScript nyelv neve ECMAScript (ES), az ECMA Nemzetközi Szabványügyi Testület után; az ES6-ot ECMAScript 2015-nek (ES2015) is nevezik. Az ES2020 jelenleg szabványtervezet.

egyszerű példa a JavaScript nyelv ízének megadására, itt van néhány kód, amely eldönti, hogy nappal vagy este van-e, és dinamikusan tegye a megfelelő üdvözletet a böngésző dokumentumobjektumában található megnevezett web elembe:

var hour = new Date().getHours();
var greeting;
if (hour < 18) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
document.getElementById("demo").innerHTML = greeting;

JavaScript ökoszisztéma

számos JavaScript API létezik. Néhányat a böngésző biztosít, például a fent bemutatott kód document API-ját, másokat pedig harmadik felek. Egyes API-k az ügyféloldali használatra, mások a szerveroldali használatra, mások az asztali használatra, mások pedig egynél több környezetre vonatkoznak.

a böngésző API-jai közé tartozik a document object model (Dom) és a browser object model (BOM), A Geolocation, A Canvas (grafika), a WebGL (GPU-gyorsított grafika), a HTMLMediaElement (audio és video) és a WebRTC (valós idejű kommunikáció).

harmadik féltől származó API-k bővelkednek. Néhány interfész a teljes alkalmazásokhoz, például a Google Térképhez. Mások olyan segédprogramok, amelyek megkönnyítik a JavaScript HTML5 és a CSS programozását, mint például a jQuery. Néhány, mint az Express, alkalmazás keretrendszerek meghatározott célokra; az Express számára a cél a webes és mobil alkalmazásszerverek felépítése a Node-on.js. Számos más keretrendszer épült az Express tetejére. 2016-ban 22 JavaScript keretrendszert tárgyaltam annak érdekében, hogy megértsük, mi lett valami állatkert; sok ilyen keretrendszer még mindig létezik ilyen vagy olyan formában, de több elment az út mentén.

sokkal több JavaScript modul van, több mint 300 000. Ennek kezelésére csomagkezelőket használunk, például az NPM-et, a csomópont alapértelmezett csomagkezelőjét.js.

az NPM egyik alternatívája a Yarn, amely a Facebook-tól származik, és a determinisztikus telepítések előnyeit állítja. Hasonló eszközök közé tartozik a Bower (a Twitter – től), amely a Node modulok helyett a front-end komponenseket kezeli; Ender, amely magát npm kishúgának nevezi; és jspm, amely ES modulokat használ (az újabb ECMA szabvány a modulokhoz), nem pedig a CommonJS modulokat, az NPM által támogatott régebbi de facto szabványt.

Webpack csomagok JavaScript modulokat statikus eszközök a böngésző. A Browserify lehetővé teszi a fejlesztők számára, hogy csomópontot írjanak.js-stílusú modulok, amelyek a böngészőben való használatra készülnek. Grunt egy fájl-orientált JavaScript feladat runner, és gulp egy streaming build rendszer és JavaScript feladat runner. A morgás és a korty közötti választás nem döntő. Telepítettem és használtam azt, amelyik egy adott projekthez lett beállítva.

ahhoz, hogy a JavaScript kód megbízhatóbb legyen fordítás hiányában, lintereket használunk. A kifejezés a C nyelvű lint eszközből származik, amely egy szabványos Unix segédprogram volt. A JavaScript linterek közé tartozik a JSLint, a JSHint és az ESLint. Automatizálhatja a futó lintereket a kód megváltoztatása után egy feladatfutó vagy az IDE segítségével. Ismét a választás a linterek között nem egyértelmű, és azt használom, amelyik egy adott projekthez készült.

a szerkesztőkről és az ide-kről szólva 6 JavaScript-ide-t és 10 JavaScript-szerkesztőt vizsgáltam meg, legutóbb 2019-ben. Legjobb választásaim a Sublime Text (nagyon gyors szerkesztő), a Visual Studio Code (konfigurálható szerkesztő/IDE) és a WebStorm (IDE) voltak.

a Transzpilerek lehetővé teszik néhány más nyelv, például a CoffeeScript vagy a TypeScript lefordítását JavaScript-re, és a modern JavaScript (például az ES2015 kód) lefordítását egy alap JavaScript-re, amely (szinte) bármilyen böngészőben fut. (Az Internet Explorer korai verzióira minden fogadás ki van kapcsolva.) A modern JavaScript leggyakoribb transzpilere a Babel.

mi a gépírás?

TypeScript egy gépelt felülírja a JavaScript, hogy lefordítja a sima JavaScript (ES3 vagy magasabb; ez konfigurálható). A nyílt forráskódú TypeScript parancssori fordító lehet telepíteni, mint egy csomópont.js csomag. A TypeScript támogatást a Visual Studio 2017 és a Visual Studio 2019, A Visual Studio Code és a WebStorm biztosítja, és hozzáadható a Sublime Text, Atom, Eclipse, Emacs és Vim szolgáltatásokhoz. A TypeScript fordító / transzpiler tsc van írva TypeScript.

a TypeScript opcionális típusokat, osztályokat és modulokat ad hozzá a JavaScript-hez, és támogatja a nagyméretű JavaScript-alkalmazások eszközeit bármilyen böngészőhöz, bármilyen gazdagéphez, bármilyen operációs rendszeren. A TypeScript sok más győzelme között a népszerű Angular framework-et átalakították TypeScript-ben.

típusok lehetővé teszik a JavaScript fejlesztők számára, hogy a JavaScript alkalmazások fejlesztésekor rendkívül produktív fejlesztőeszközöket és gyakorlatokat használjanak, mint például a statikus ellenőrzés és a kód refaktorálás.

a típusok opcionálisak, és a típuskövetés lehetővé teszi néhány típusú megjegyzés használatát, hogy nagy különbséget tegyen a kód statikus ellenőrzésében. A típusok lehetővé teszik a szoftverkomponensek közötti interfészek meghatározását, és betekintést nyerhetnek a meglévő JavaScript könyvtárak viselkedésébe.

a TypeScript támogatja a legújabb és fejlődő JavaScript funkciókat, beleértve az ECMAScript 2015-től és a jövőbeli javaslatoktól, mint például az async funkciók és a decorators, hogy segítsen a robusztus komponensek létrehozásában.

TypeScript nyelv

a TypeScript nyelv elfogadja a Javascriptet érvényesnek, de további lehetőségeket kínál a típusjegyzetek, a típusellenőrzés fordításkor, az osztályok és a modulok számára. Ezek mindegyike rendkívül hasznos, ha robusztus szoftvert próbál előállítani. A sima JavaScript csak futásidőben generál hibákat, majd csak akkor, ha a program véletlenül hibát tartalmazó elérési utat ér el.

a gépírás 5 perc alatt bemutató teszi az előnyöket egyértelmű. A kiindulási pont tiszta JavaScript egy .TS kiterjesztés:

function greeter(person) {
return "Hello, " + person;
}
let user = "Jane User";
document.body.textContent = greeter(user);

ha ezt a tsc-vel fordítja, akkor egy azonos fájlt hoz létre a-val .js kiterjesztés.

az oktatóanyag lépésről lépésre módosítja ezt a kódot, hozzáad egy person:string típusú annotációt a függvénydefinícióhoz, lefordítja, teszteli a típusellenőrzést a fordító által, hozzáad egy interfészt egy person típushoz, és végül hozzáad egy osztályt a Student – hoz. A végső kód:

class Student {
fullName: string;
constructor(public firstName: string, public middleInitial: string,
public lastName: string) {
this.fullName = firstName + " " + middleInitial + " " + lastName;
}
}
interface Person {
firstName: string;
lastName: string;
}
function greeter(person: Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
let user = new Student("Jane", "M.", "User");
document.body.textContent = greeter(user);

amikor lefordítja ezt, és megnézi a kibocsátott JavaScript-et, látni fogja, hogy a TypeScript osztályok csak egy gyorsírás ugyanazon prototípus-alapú örökléshez, amelyet a sima JavaScript ES3-ban használnak. Vegye figyelembe, hogy az person.firstName és person.lastName tulajdonságokat a fordító automatikusan generálja, amikor meglátja a public attribútumaikat a Student osztálykonstruktorban, és átviszi a Person felületre is. A TypeScript típusjegyzeteinek egyik legszebb előnye, hogy az eszközök felismerik őket, például a Visual Studio Code:

IDG

ha hibák vannak a kódban a VS Code szerkesztésekor, akkor a hibaüzenetek jelennek meg a problémák lapon, például a következők, Ha törli a sor végét a Studentpéldányosítással:

IDG

a migrating from JavaScript oktatóanyag részletesen bemutatja, hogyan lehet frissíteni egy meglévő JavaScript projektet. Átugorva a beállítási lépéseket, a módszer lényege az átnevezése .JS fájlokat .egyszerre csak egy. (Ha a fájl JSX-et használ, a React által használt kiterjesztést, akkor át kell neveznie .tsx helyett .ts.) Ezután húzza meg a hibaellenőrzést és javítsa ki a hibákat.

többek között meg kell változtatnia a modulalapú require() vagy define() utasításokat TypeScript import utasításokká, és hozzá kell adnia a Deklarációs fájlokat az Ön által használt könyvtármodulokhoz. Azt is meg kell átírni a modul export a TypeScript export nyilatkozatot. A TypeScript támogatja a CommonJS modulokat, például a Node-ot.J. S. igen.

ha hibát kap a rossz argumentumok számát, akkor írjon TypeScript függvény túlterhelés aláírások. Ez egy fontos jellemzője JavaScript hiányzik. Végül típusokat kell hozzáadnia a saját funkcióihoz, és adott esetben interfészeket vagy osztályokat kell használnia.

általában nem kell saját deklarációs fájlokat írni a public domain JavaScript könyvtárakhoz. A DefinitelyTyped a Deklarációs fájlok tárháza, amelyek mindegyike elérhető az npm használatával. A deklarációkat a TypeSearch oldalon találhatja meg.

Miután az összes JavaScript fájlt TypeScript-re konvertálta, feljavította a típusokat, és kiküszöbölte a hibákat, sokkal robusztusabb kódbázissal rendelkezik. Ahelyett, hogy folyamatosan rögzítené a tesztelők vagy a felhasználók által jelentett futásidejű hibákat, statikusan észlelheti a leggyakoribb hibákat.

érdemes megnézni Anders Hejlsberg typescriptjét. Ahogy hallani fogod tőle, a TypeScript a JavaScript, amely skálázódik.

Vélemény, hozzászólás?

Az e-mail-címet nem tesszük közzé.