A webfejlesztés nehézségei mindenki számára ismertek, ahogy az is, mennyire meg tudja nehezíteni az életünket a JavaScript. Ebben a blogposztban megismerkedünk a JS egyik kiváló alternatívájával, a TypeScripttel. Az 5 perces olvasnivalóban lesz szó a Typescript tulajdonságairól, előnyeiről és pár érdekességről a nyelvvel kapcsolatban.

A JavaScript programozási nyelv alkalmazása sokakban ellenszenves érzéseket vált ki. Mégis mivel szembesülünk, ha JavaScripttel szeretnénk dolgozni?

• Megfelelő típusosság hiánya
• Objektumorientáltság hiánya
• Megtévesztően működő nyelvi furcsaságok

Összességében megállapítható, hogy sokunknak kihívást jelent JavaScriptben átlátható és könnyen karbantartható kódot írni. Az ECMAScript szabvány 6-os változatának 2015-ös megjelenésével javult a JavaScript megítélése, azonban az összes problémára ez sem nyújtott megoldást. Ennek legfőbb oka, hogy a JavaScriptnek a több tíz éve megírt weboldalakkal is visszafelé kompatibilis módon kell működnie.

Szerencsénkre a TypeScript 2012-es megjelenése óta eltelt évek alatt a webfejlesztés meghatározó szereplőjévé nőtte ki magát, és mára a három legnagyobb webes keretrendszer közül kettőt TypeScriptben írnak.

De mi is az a TypeScript?

TypeScript: Typed JavaScript at Any Scale.

“TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
Any browser. Any host. Any OS. Open source.“

• A TypeScript egy típusos kiterjesztése a JavaScriptnek, mely egyszerű JavaScriptre fordul le.
• A Microsoft által fejlesztett és fenntartott nyílt forráskódú programozási nyelv.

Bármilyen böngészőben, operációs rendszeren és hoston használhatjuk, ennek oka, hogy a böngészőbe csak a már lefordított JavaScript kód fog eljutni, így nincs szükségünk semmilyen böngésző támogatásra.

Nézzük meg, miben támaszkodhatunk a TypeScriptre, amit a JS-től nem kapunk meg.

A JavaScript legkellemetlenebb tulajdonsága a megfelelő típusosság hiánya. Lássunk egy példát:

let x = '2020-07-21T04:19:40Z';
x = 1595311524;
x = null;

let getDuration = (startDate, endDate) => {
    // Vajon milyen típust vár ez a függvény?
}

A kód példán látható, hogy x változónak először egy string típusú értéket adunk, majd egy számot, utána pedig egy null érték következik. JavaScriptben nincs lehetőségünk a változók típusát definiálni, ezáltal olyan problémákba ütközünk, mint ami a getDuration függvény fejlécében megfigyelhető.

A függvénynek két bemenete van, startDate és endDate, ezek típusai azonban nem ismertek, így nem tudjuk, hogy egy dátum stringet, esetleg Date objektumot, vagy timestampet vár -e a függvényünk. Fejlesztőként nehézséget okozna a függvény meghívása, hiszen ez esetben az adott függvények törzséből kellene kibogarásznunk a típusokat.
Erre a problémára részleges megoldást kínál a JSDoc használata, ahol kommentben tudjuk felvinni az egyes értékek típusait.

TypeScriptben azonban lehetőségünk van a típusok nyelvi szintű megadására. Azért ez egyszerűbb, nem?

let x = '2020-07-21T04:19:40Z'; // A fordító automatikusan kitalálja a változó típusát
x = 1595311524; // Fordítási hiba, x típusa sztring, így számot nem kaphat értékül
x = null;

let getDuration = (startDate: string, endDate: string) => {}

A típusosság lehetővé teszi továbbá a fordítás idejű ellenőrzéseket, ezáltal hamarabb értesülhetünk az esetlegesen elkövetett hibáinkról. A fejlesztőeszközök megbízhatóan működő kódkiegészítéseket nyújtanak, valamint megbízhatóan tudunk refaktorálni is.
Összességében elmondható, hogy a típusosság által egy sokkal jobb fejlesztői élményben lehet részünk, ha TypeScriptet használunk.

interface Moving {
    move(distanceInMeters: number): void;
}

class Animal {
    move(distanceInMeters: number = 0) {
        console.log(`Animal moved ${distanceInMeters}m.`);
    }
}

class Dog extends Animal {
    bark() {
        console.log('Woof! Woof!');
    }
}

const dog = new Dog();
dog.bark();
dog.move(10);
dog.bark();

Forrás: TypeScript handbook

Szintén sokak számára fájó pont, hogy JavaScriptben nincs lehetőségünk objektum orientáltan programozni. Kezdetleges jeleket ugyan már felfedezhetünk ES6-tól, de korántsem mondható teljes körűnek a megoldás.

TypeScriptben tudunk objektum orientáltan is programozni, vannak interface-ek, osztályok, ősosztályok, leszármazás, láthatóságok. Nagyon fontos azonban, hogy a TypeScript egyáltalán nem köti meg a kezünket, nem kötelező objektumorientáltan programozni, ha szeretnénk, választhatunk például funkcionális megközelítést is a projektjeinkben.

5 === '5' /* vs */ 5 == '5'
null /* vs */ undefined
[] + {} // ??
const x = {[{}]: [{}]} // ??

Számos nyelvi „furcsaság” is gátolja az egyszerű kódírást a JavaScript esetében. Ezen sajátosságok egy része nehezen felfedezhető bugokhoz vezethet. A legismertebb a 2 egyenlőségjel vagy 3 egyenlőségjel közti különbség, illetve a null és az undefined érték közti különbség. Ezen furcsaságokat a TypeScript sem tünteti el, és továbbra is lint eszközökkel és code review-kkal tudunk a leghatékonyabban védekezni ellenük.

A TypeScript a webfejlesztők számára könnyen elsajátítható, hiszen a JavaScript kiterjesztése. Projektjeinkben használhatunk vegyesen JavaScriptet és TypeScriptet is, egy JS-ben fejlesztett webalkalmazásnál fokozatosan át tudunk állni TS-re. Továbbra is bármilyen JavaScriptben megírt könyvtárat tudunk használni, ha ezen könyvtárakhoz tartoznak típus definíciós fájlok is, akkor kódkiegészítést és fordítási ellenőrzéseket is kapunk.

A TypeScript további előnye, hogy folyamatosan támogatja a legújabb ECMAScript szabványokat, viszont képes a kódunkat korábbi ECMAScript verziókra is lefordítani a megfelelő böngésző támogatottság elérése érdekében.

"Fejlesztőként, ha új nyelvet szeretnék elsajátítani, akkor célom, hogy időtálló tudást szerezzek meg. Különösen fontos ez a webes technológiáknál, ahol gyorsan jönnek-mennek a trendek. Ez kiemelten igaz a JavaScript esetében, hiszen számtalan alternatíva jelent meg, majd merült feledésbe."

A TypeScript ismertsége ezzel szemben folyamatosan növekszik, de vajon megéri időt szentelnünk a kitanulására?

A Stackoverflow Developer 2020-as felmérése szerint mindenképp. Az ábrán a leggyakrabban használt programozási nyelvek listáját látjuk — 57 ezer ember töltötte ki a felmérést. A TypeScript 25.4%-kal kiemelt helyen végzett.

A State of JavaScript 2019-es felmérésében a különböző JavaScript alternatívákat hasonlították össze.
A majdnem 22 ezer kitöltő válaszai alapján megfigyelhető, hogy a felhasználók majdnem 66%-a érdeklődik a TypeScript iránt, és a használók 89%-a pedig elégedett vele. Mindkét kategóriában a TypeScript a listavezető a többi alternatívával szemben.

Emellett nem elhanyagolható, hogy a három leggyakrabban használt webes keretrendszerekből (Angular, Vue, React) kettőt TypeScriptben fejlesztenek.

• Angular: 2.0 verzió óta TypeScriptben fejlesztik. Jelenleg Angular webalkalmazást csak TypeScriptben lehet fejleszteni.
• Vue: 3.0 verzió óta TypeScriptben fejlesztik

Érdekességek:

• A TypeScriptet ugyanaz a személy találta fel, mint a C Sharpot (Anders Hejlsberg), így számos hasonlóság fedezhető fel.
• A TypeScript szigorúbb nyelv, mint a JavaScript, de rugalmasabb, mint a C# vagy a Java.

A TypeScript 3.9-es verziója jelenleg elérhető, a 4.0 pedig beta tesztelhető.

Forrás: Szupera Zita, vezetőfejlesztő, AutSoft Zrt., 2019-es HWSW mobile! konferencia előadásanyaga