Ó, de jó ez a TypeScript*

* Ez nem reklámcikk, de olyan… mert imádom.

A Microsoft bejelentett egy új nyelvet a TypeScriptet. Ez nem egy önálló programozási nyelv, hanem inkább egy hiánypótló kiegészítés a Javascripthez.

Amióta a Microsoft komolyan veszi és első számú platformként kezeli a Javascriptet, azóta nagyon hasznos dolgok születnek, amelyek megkönnyítik a fejlesztők mindennapjait. Na, de a TypeScript túl megy minden várakozáson. Egyszerűen fantasztikus.

Ha nagyon gyorsan akarnám összefoglalni, hogy mi ez, akkor a következő funkciókat sorolnám fel:

• Namespace-eket használhatunk (module)
• Interfészeket definiálhatunk
• Osztályokat definiálhatunk
• Típusos tulajdonságok, fieldek
• Függvény szignatúrák (típusosan definiálható függvények)
• Szerkesztési időben validálja a kódot
• Fordítási hibát kapunk, ha hibás a kód

A felsorolt dolgokhoz semmilyen extra kiegészítőre nincs szükség a futtatáskor. Egyszerű Javascript a kimenet. A fordító megcsinálja helyettünk a sokszor fájdalmasan nehézkes Javascriptes trükköket.

Végignéztem a demó videót a Channel 9-on és nagyon megtetszett a dolog. Azonnal ki is próbáltam.

A Visual Studio 2012 kiegészítés letölthető a http://www.typescriptlang.org/#Download oldalról.

A kivételezésen látszik, hogy ez nem egy háttértermék. Teljes körű Visual Studio 2012 integráció, amely nagyon komolyan működik. Szerkesztési időben figyelmeztet a hibákra, azonnal kiértékeli a kódot, láthatóak az egyes elemek típusai, ha föléjük visszük az egeret. Továbbá refaktorálási műveleteket is támogat.

Kapunk egy project template-et: “HTML project with TypeScript”, amely – véleményem szerint – egy igen butácska kis project, amelyben van egy ts, egy html és egy css fájl. Nyilván demózni jó ez az összeállítás, de azért egy ASP.NET MVC4-es projekt talán jobb kiindulásnak tűnik. Természetesen van új item template is: “TypeScript fájl” néven. Ezt be tudjuk szúrni az MVC4-es projektünkbe is, ami nagyon ígéretes!

Néhány általános jellegű probléma megoldása

Egy haszna azért volt a “gyári” projektnek, mert az első adódó problémát gyorsan meg tudtam vele oldani. Nevezetesen:

Probléma #1: Nem generálja le a TypeScript (.ts) forrásból a Javascript (.js) kódot (csak az első alkalommal)…

Megoldás: Szerkesszük a projekt fájlt (.csproj) és az utolsó zárótag elé írjuk be a következőt:

<Target Name="BeforeBuild">

  <Exec Command="&amp;quot;$(PROGRAMFILES)\Microsoft SDKs\TypeScript\0.8.0.0\tsc&amp;quot; @(TypeScriptCompile ->'&quot;%(fullpath)&quot;', ' ')" />

</Target>

Ó igen, ezek után már generálja a .js fájlokat.

Probléma #2: Ááá, nem működik a jQuery…

Megoldás: Le kell tölteni a TypeScript forráskódját innen: http://typescript.codeplex.com/SourceControl/BrowseLatest. Egy fájlra lesz szükség: typings\jquery.d.ts, amelyet be kell húzni a projektbe és referenciázni a ts fájlból.

Amúgy a forráskód csomagban van egy halom példa, többek között egy jQuery is.

Probléma #3: Nem “enged” meghívni globális javascript függvényeket (amelyek másik korábbi .js fájlban vannak definiálva).

Megoldás: A TypeScript-nek pont az a lényege, hogy csak olyan dolgokat érünk el, amelyeket pontosan definiátunk. A Microsoft készített sok ezer soros definíciós fájlokat, amelyek lefedik a Javascript nyelvet általáben, a jQuery-t (1.7.1-et), a WinRT és a WinJS funkcionalitást. Ha egyéb libraryt akarunk használni, akkor definiálnunk kell azokat az elemeket, amelyekre hivatkozni akarunk.

Példul, ha van egy ilyen függvényünk:

function loadScript(scriptName, callback) {

    ...

}

…és meg szeretnénk hívni TypeScriptből, akkor definiálnunk kell legalább így (ha nem akarunk sokat foglalkozni vele… Ezt nem ajánlom.)

declare var loadScript;

Így működni fog, de bármilyen művelet engedélyezett lesz az elemen. Igazából nem fogunk tudni róla semmit, ez gyors, de nagyon rossz megoldás.

Definiálhatjuk így (kicsit határozottabban…):

declare function loadScript(scriptName, callback?);

Nem rossz, de nem szigorúan típusos.

Vagy teljes körűen:

declare function loadScript(scriptName: string, callback: ()=>any);

Ez így csodás.

Probléma #4: Nem tudom hogyan hívhatok meg egy jQuery extension-t.

Megoldás: Ki kell egészíteni a JQuery vagy JQueryStatic interfészeket. Példul, ha használni szerentnénk a jQuery Cookie plugint, akkor definiálnunk kell a következőt:

interface JQueryStatic {

    cookie(key: string, value: string, options?);

    removeCookie(key: string, options?);

}

Nagyon ígéretes ez a projekt. Próbálgatom tovább. Hamarosan megosztom a tapasztalataimat.

Referenciák:

• A TypeScript weboldala: http://www.typescriptlang.org/
• Channel 9 videók: http://channel9.msdn.com/Tags/typescript
• Codeplex oldal: http://typescript.codeplex.com/