Mød TypeScript – ét next-generation websprog

Oh my good. Is this the dreaming C# to JavaScript Compiler?
Mor1x, 13 September, 2012

C# Falling Out Of Favour?
Seems Microsoft surprised everyone by introducing this new “WinRT” architecture, which requires you to write apps for Windows 8 using C++ rather than C#/Dotnet. Seems that, after a decade of trying, they just can’t overcome the inherent inefficiencies of “managed” code and CLR, and are going back to more “old school” ways of doing things?
ldo17 14 September, 2012

A Javascript CLR implementation (Javascript .NET)
I think it would be fairly straight forward for Anders to compile Javascript to MISL. As to run in the existing .NET runtime. That’s my guess. Even though WinRT is being pimped right now, .NET is still alive and kicking.
awright18, 15 September, 2012

Dette var nogen af spekulationerne da Microsoft i 2012 annoncerede at de ved den afsluttende keynote på årets GOTO Århus ville lade Anders Hejlsberg afsløre et “et endnu ikke offentliggjort projekt”.

Job-opslag og tidligere artikler havde hintet at projektet handlede om JavaScript, men ikke præcist hvad.

Budene var gode, men Hejlsberg’s projekt handlede hverken om .NET, C#, WinRT, CLR eller DLR, men et helt nyt sprog, TypeScript.

Ved første øjekast er det svært ikke at sammenligne TypeScript med Googles Dart, præsenteret af en anden dansker, Lars Bak ved GOTO Århus året før med undertitlen, “Welcome to the Dart side”. GOTO-konferencens arrangører var endda smarte nok til at lade Bak og Hejlsberg mødes og diskutere fordele og ulemper ved hver deres sprog.

Men hvor er vi nu, hvem vandt?

Det er nok for tidligt at annoncere en vinder. I min bog er det lidt en sejr for Dart at kunne sidde og se Minecraft-Notch live-kode en fuldstændig Doom-klon på Hitbox.tv. Det er tydeligt at sproget er velegnet til spiludvikling.

Når Dart-koden kompileres er det ganske vist JavaScript-kode der kommer ud, men det er kode der egner sig mere til eksekvering end til menneskelig læsning. Ligesom emscripten og asm.js er JavaScript reduceret til en assembly-lignende eksekveringsplatform. Vil man se/debugge den kode man oprindeligt skrev, må man ty til .map filer, der fra den endelige JavaScript-kode udpeger de rå linjer i kildekoden.

På dette punkt er TypeScript anderledes – hvor Dart bygger et helt nyt runtime-system op i browseren, forsøger TypeScript, mindre ambitiøst, at tilføje lidt nye features til JavaScript her og der. Det primære er, som med Dart, et typesystem der bliver løst på kompileringstidspunktet men med TypeScript er det kompilerede resultat langt mere lig den kildekode du oprindeligt skrev; alt det kode du skriver kompileres 1:1, ud over at der bliver tilføjet en række features, der kræver nye konstruktioner.

“I Programmer” kaldte sproget for “Microsoft’s replacement for JavaScript“, en titel der efter min mening ikke helt passer. TypeScript er mere komplimenterende til JavaScript, det benytter de features der allerede er, men gør dem lidt mere tilgængelige. Det minder faktisk lidt om en polyfill der giver EcmaScript 5+ funktioner til EcmaScript 3 miljøer.

Klasser

Med TypeScript kan man erklære klasser med en konstruktion vi kender fra andre sprog:

class Person {

}

Og her vil TypeScript-kompileren blot konstruere en selveksekverende funktion, der dermed giver mulighed for arv, indkapsling, instansering osv.:

var Person = (function () {
    function Person() {
    }
    return Person;
})();

På TypeScript’s playground, findes der flere gode eksempler, så derfor vil jeg her fremhæve et par mindre åbenlyse, tidsbesparende funktioner:

Default-værdier på funktionskald

Som kendt fra andre sprog, kan man, når man erklærer sine funktioner, dekorere disse med default-værdier og hermed gøre dem optionelle:

function incrementNumber(howMuch: number = 1) {

}

Og kompileren omskriver blot dette til et check for angivne parameter og efterfølgende initialisering ved udefineret værdi:

function incrementNumber(howMuch) {
    if (typeof howMuch === "undefined") { howMuch = 1; }
}

Automatiske felter fra contructor-parametre

Når man skriver sin constructor kan man på parametre til denne tilføje public/private og dermed få genereret et tilsvarende felt

class Person {
    constructor(public navn: string) {
    }
}

Og compileren opretter feltet:

var Person = (function () {
    function Person(navn) {
        this.navn = navn;
    }
    return Person;
})();

Lambda-udtryk

De steder hvor man normalt skriver funktioner kan man bruge lambda-udtryk:

var x = (navn) => {
    this.navn = navn;
}

Ud over at omskrive lambda-udtryk til funktioner, genererer kompileren en ekstra variabel som this bliver kopieret over i – det gør at scoped på .this bliver lidt mere som man forventer fx. inde i en klasses funktioner, og ikke som JavaScript normalt opfører sig; bestemt af den context som kaldet kommer fra.

var _this = this;
var x = function (navn) {
    _this.navn = navn;
};

Både Dart og TypeScript er open-source og begges compilere er skrevet i sproget selv. Det betyder for eksempel at man med TypeScript ikke er bundet til hverken Visual Studio eller andre Microsoft værktøjer, men kan afvikle compileren fra det miljø og på det operativsystem man måtte ønske.

Med denne generation af sprog har man langt om længe potentiale for at skrive store systemer med god værktøjsunderstøttelse der stadig kan afvikles på almindelige JavaScript miljøer. Mange af de funktioner de tilbyder er på vej i JavaScript men standardisingsarbejde tager tid så sprogene giver mulighed for skyde genvej til den nye teknologi.

Så må vi bare håbe at standarderne en dag formår at gøre sprogene overflødige.