Advise Solutions var på Build 2014 i San Francisco. För att dela med oss av vi såg där, tänkte vi blogga om några av de saker vi lärde oss. En av de bättre sessionerna var när Anders Hejlsberg berättade om TypeScript, som är ett nytt språk som gör det lättare att använda JavaScript i större (och även mindre) lösningar.

Introduktion

TypeScript är ett superset av JavaScript, d.v.s. all JavaScript-kod är giltig inom TypeScript. Därför är det lätt att komma igång, man kan använda koden man redan har och börja arbeta utifrån den. TypeScript-koden man skriver kompileras till JavaScript-kod och fungerar därför på alla webbläsare och plattformar.

Nyligen släpptes version 1.0 av TypeScript, vilket gör det till en officiell version. Från och med nu kommer den vara en del av Visual Studio. TypeScript är dock open source och finns även som plugin till en rad med andra editorer.

Fördelar

Okej, men vad är då TypeScript och varför ska man använda det? Det finns två stora vinster gentemot JavaScript. Den första är typning, vilket gör att man kan bestämma vilka typer variabler har. Den andra vinsten är att det förenklar koden. Det blir helt enkelt i de flesta fall enklare och mer översiktlig kod i TypeScript. Se exemplet om klasser nedan.

Typer

Det finns ett antal typer i TypeScript: boolean, number, string, array, enum, any och void. Ett exempel på där number används kan se ut så här:

function toFarenheit(celcius: number) { return celcius * 1.8 + 32; }

etta kompileras till följande JavaScript:

function toFarenheit(celcius) { return celcius * 1.8 + 32; }

aha, vad är skillnaden? Jo, nu vet vi att funktionen toFarenheit tar en variabel av typ number och därför returnerar en number. Detta gör att vi får kompileringsfel om vi försöker skicka in en variabel av en annan typ. Notera att JavaScript inte har några typer.

Definitionsfiler

För att kunna använda TypeScript är mot ett existerande JavaScript-bibliotek måste det finnas en definitionsfil. För många kända ramverk finns det redan färdiga filer att använda. Detta gör att det är lättare att komma igång att använda TypeScript, även om man t.ex. jobbar med jQuery eller AngularJS.

Klasser

Det är en del saker som är ganska komplicerade att få till i JavaScript och som är enklare och tydligare att skriva i JavaScript. Detta gäller t.ex. klasser. Jämför koden för en vanlig klass: 

class Person { 
  name: string; 
  age: number = 20; 
  constructor(name: string) { 
    this.name = name; 
  } 
  present() { 
    return "Hello, my name is " + this.name + " and I am " + this.age + " years old"; 
  } 
} 
class Programmer extends Person { 
  favouriteLanguage: string; 
  present() { 
    return super.present() + ". I like " + this.favouriteLanguage; 
  } 
}

var kalle = new Person("Kalle"); 
kalle.age = 25; 
var lisa = new Programmer("Lisa"); 
lisa.favouriteLanguage = "TypeScript";

document.write(kalle.present()); 
document.write(lisa.present());

 Resultatet om man kör koden blir: Hello, my name is Kalle and I am 25 years old Hello, my name is Lisa and I am 20 years old. I like TypeScript

Jämför det med den genererade JavaScript-koden: [code language="js"]var __extends = this.__extends || function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; function __() { this.constructor = d; } __.prototype = b.prototype; d.prototype = new __(); }; var Person = (function () { function Person(name) { this.age = 20; this.name = name; } Person.prototype.present = function () { return "Hello, my name is " + this.name + " and i am " + this.age + " years old"; }; return Person; })();

var Programmer = (function (_super) { __extends(Programmer, _super); function Programmer() { _super.apply(this, arguments); } Programmer.prototype.present = function () { return _super.prototype.present.call(this) + ". I like " + this.favouriteLanguage; }; return Programmer; })(Person);

var kalle = new Person("Kalle"); kalle.age = 25; var lisa = new Programmer("Lisa"); lisa.favouriteLanguage = "TypeScript";

document.write(kalle.present()); document.write(lisa.present());[/code]

Läs mer

typescriptlang.org hittar du allt du behöver veta för att komma igång. Där finns även en ”playground” där man kan skriva TypeScript-kod och direkt se vilken JavaScript-kod den genererar.

Vill du se hela sessionen, gå in på Channel 9.