* 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="&quot;$(PROGRAMFILES)\Microsoft SDKs\TypeScript\0.8.0.0\tsc&quot; @(TypeScriptCompile ->'"%(fullpath)"', ' ')" />
</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/