JavaScript

TypeScript: Besseres Arbeiten mit JavaScript für .NET-Entwickler

Shayne Boyer

 

Zweifellos haben Sie viel in Microsoft .NET Framework investiert, und es ist eine stabile Plattform, für die Tools in großer Zahl verfügbar sind. Wenn Sie Ihre Kenntnisse in C# oder Visual Basic .NET mit XAML kombinieren, scheint der Markt für Ihre vorhandenen Fähigkeiten fast unbegrenzt zu sein. Sie müssen heute aber auch eine Sprache berücksichtigen, die sich schon seit einiger Zeit bewährt und in den letzten Jahren erheblich gesteigert hat, seit die Anwendungsplattform aufgeholt hat. Ich meine natürlich JavaScript. JavaScript-Anwendungen sind stark gewachsen und haben viel Funktionalität zugelegt. Node.js, eine vollständige Plattform zur Entwicklung skalierbarer JavaScript-Anwendungen, ist enorm beliebt geworden und kann sogar auf Windows Azure bereitgestellt werden. Außerdem kann JavaScript mit HTML5 zur Entwicklung von Spielen, mobilen Anwendungen und sogar Windows Store-Apps verwendet werden.

Als .NET-Entwickler können Sie die Funktionalitäten und die Verbreitung von JavaScript auf dem Markt nicht ignorieren. Wenn ich diese Auffassung im Kollegenkreis vertrete, höre ich häufig Klagen darüber, dass die Arbeit mit JavaScript schwierig sei; es gäbe keine starke Typisierung und keine Klassenstrukturen. Diesen Argumenten entgegne ich, dass JavaScript eine funktionale Sprache ist und dass die gewünschten Ziele mit Mustern erreicht werden können.

An diesem Punkt kommt TypeScript zum Tragen. TypeScript ist keine neue Sprache. Es ist eine Obermenge von JavaScript, eine leistungsstarke, typisierte Obermenge. Das bedeutet, dass jeder JavaScript-Code gültiger TypeScript-Code ist und der Compiler JavaScript generiert. TypeScript ist ein Open-Source-Projekt. Alle Information zum Projekt finden Sie unter „typescriptlang.org“. Bei Erstellung dieses Artikels war die Previewversion 0.8.1 von TypeScript aktuell.

Um zu zeigen, wie .NET-Entwickler besser an einem JavaScript-Projekt arbeiten können, beschreibe ich in diesem Artikel die grundlegenden TypeScript-Konzepte in Form von Klassen, Modulen und Typen.

Klassen

Wenn Sie mit Sprachen wie C# oder Visual Basic .NET arbeiten, sind Sie mit dem Konzept von Klassen vertraut. In JavaScript werden Klassen und Vererbung durch Muster umgesetzt, beispielsweise Closures und Prototypen. TypeScript bringt die klassische Typensyntax ein, die Sie gewohnt sind, und der Compiler erstellt den JavaScript-Code zum Erreichen des Zwecks. Betrachten Sie den folgenden JavaScript-Ausschnitt:

var car;
car.wheels = 4;
car.doors = 4;

Das sieht zunächst einfach aus. .NET-Entwickler haben jedoch gezögert, sich verstärkt mit JavaScript zu befassen, und der Grund dafür war der lose JavaScript-Ansatz für die Objektdefinition. Dem car-Objekt können später weitere Eigenschaften hinzugefügt werden, ohne Erzwingung und ohne zu wissen, welcher Datentyp von der jeweiligen Eigenschaft dargestellt wird, und so können zur Laufzeit Ausnahmen ausgelöst werden. Wie ändert sich das durch die Klassenmodelldefinition in TypeScript, und wie wird das car-Objekt vererbt und erweitert? Sehen Sie sich das Beispiel in Abbildung 1 an.

Abbildung 1: Objekte in TypeScript und JavaScript

TypeScript JavaScript
class Auto{  wheels;  doors;}var car = new Auto();car.wheels = 2;car.doors = 4; var Auto = (function () {  function Auto() { }  return Auto;})();var car = new Auto();car.wheels = 2;car.doors = 4;

Auf der linken Seite sehen Sie ein ordentlich definiertes Klassenobjekt namens „car“, mit den wheels- und doors-Eigenschaften. Der durch den TypeScript-Compiler erstellte JavaScript-Code auf der rechten Seite ist fast identisch. Der einzige Unterschied ist die Auto-Variable.

Im TypeScript-Editor kann keine zusätzliche Eigenschaft hinzugefügt werden, ohne dass eine Warnung ausgegeben wird. Sie können nicht einfach mit einer Anweisung wie „car.trunk = 1“ beginnen. Der Compiler würde melden, dass es in „Auto“ keine trunk-Eigenschaft gibt. Aufgrund der Flexibilität von JavaScript (oder dessen Trägheit, je nach Anschauungsweise) ist das ein Segen für jeden, der je so einen Fehler ausfindig machen musste.

Konstruktoren sind in JavaScript zwar verfügbar, werden aber ebenfalls mit den TypeScript-Tools erweitert. Dazu wird die Erstellung des Objekts während der Kompilierungszeit erzwungen, und das Objekt darf nicht erstellt werden, ohne im Aufruf die richtigen Elemente und Typen zu übergeben.

Sie können aber nicht nur den Konstruktor zur Klasse hinzufügen, sondern auch die Parameter in optionale Parameter ändern, einen Standardwert festlegen oder die Eigenschaftsdeklaration verkürzen. Die folgenden drei Beispiele zeigen, wie leistungsstark TypeScript sein kann.

In Abbildung 2 sehen Sie das erste Beispiel, einen einfachen Konstruktor, in dem die Klasse durch Übergeben der wheels- und doors-Parameter (hier durch „w“ und „d“ repräsentiert) initialisiert wird. Der erstellte JavaScript-Code auf der rechten Seite ist fast gleich, aber wenn die Dynamik und die Anforderungen Ihrer Anwendung wachsen, wird das nicht immer der Fall sein.

Abbildung 2: Ein einfacher Konstruktor

TypeScript JavaScript
class Auto{  wheels;  doors;  constructor(w, d){    this.wheels = w;    this.doors = d;  }}var car = new Auto(2, 4); var Auto = (function () {  function Auto(w, d) {    this.wheels = w;    this.doors = d;  }  return Auto;})();var car = new Auto(2, 4);

 

In Abbildung 3 habe ich den Code aus Abbildung 2 geändert. Für die wheels-Eigenschaft „w“ habe ich den Standard 4 festgelegt, und rechts von der doors-Eigenschaft „d“ habe ich ein Fragezeichen hinzugefügt, wodurch sie zu einer optionalen Eigenschaft wird. Wie im vorherigen Beispiel ist das Muster zum Festlegen der Instanzeigenschaft für die Argumente ein übliches Verfahren, in dem das this-Schlüsselwort verwendet wird.

Abbildung 3: Ein einfacher Konstruktor, verändert

TypeScript JavaScript
class Auto{  wheels;  doors;  constructor(w = 4, d?){    this.wheels = w;    this.doors = d;  }}var car = new Auto(); var Auto = (function () {  function Auto(w, d) {    this.wheels = w;    this.doors = d;  }  return Auto;})();var car = new Auto(4, 2);

Das ist ein Feature, das ich wirklich gerne in den .NET-Sprachen hätte: einfach das öffentliche Schlüsselwort im Konstruktor vor dem Parameternamen hinzufügen zu können, um die Eigenschaft für die Klasse zu deklarieren. Das private Schlüsselwort ist verfügbar und erreicht dieselbe automatische Deklaration, verbirgt aber die Eigenschaft der Klasse.

Mit dem TypeScript-Feature zur automatischen Eigenschaftsdeklaration werden Standardwerte, optionale Parameter und Typangaben erweitert. Somit wird es zur praktischen Abkürzung und steigert Ihre Produktivität. Wenn Sie das Skript in Abbildung 4 vergleichen, sehen Sie, wie die Unterschiede in der Komplexität zutage treten.

Abbildung 4: Das Feature zur automatischen Deklaration

TypeScript JavaScript
class Auto{  constructor(public wheels = 4,    public doors?){  }}var car = new Auto();car.doors = 2; var Auto = (function () {  function Auto(wheels, doors) {    if (typeof wheels ===      "undefined") {      wheels = 4; }    this.wheels = wheels;    this.doors = doors;  }  return Auto;})();var car = new Auto();car.doors = 2;

 

Die Klassen in TypeScript stellen auch die Vererbung bereit. Wir führen das Auto-Beispiel fort und erstellen eine Motorcycle-Klasse, die die ursprüngliche Klasse erweitert. Ich füge der Basisklasse in Abbildung 5 außerdem drive- und stop-Funktionen hinzu. In TypeScript genügen ein paar Zeilen Code, um die Motorcycle-Klasse hinzuzufügen, die von „Auto“ erbt und die geeigneten Eigenschaften für „doors“ und „wheels“ festlegt.

Abbildung 5: Hinzufügen der Motorcycle-Klasse

class Auto{
  constructor(public mph = 0,
    public wheels = 4,
    public doors?){
  }
  drive(speed){
    this.mph += speed;
  }
  stop(){
    this.mph = 0;
  }
}
class Motorcycle extends Auto
{
  doors = 0;
  wheels = 2;
}
var bike = new Motorcycle();

Hier möchte ich auf eine wichtige Funktion hinweisen. Oben im vom Compiler erstellten JavaScript-Code gibt es eine kleine Funktion namens „___extends“, wie Sie in Abbildung 6 sehen können. Das ist der einzige Code, der je in den JavaScript-Ergebniscode eingefügt wird. Es handelt sich dabei um eine Hilfsklasse, die die Vererbungsfunktionalität unterstützt. Die Signatur dieser Hilfsfunktion ist übrigens unabhängig von der Quelle genau gleich. Wenn Sie also Ihren JavaScript-Code in mehreren Dateien organisieren und zum Kombinieren der Skripts ein Dienstprogramm wie SquishIt oder Web Essentials verwenden, erhalten Sie möglicherweise einen Fehler, je nachdem, wie das Dienstprogramm doppelte Funktionen korrigiert.

Abbildung 6: Der vom Compiler produzierte JavaScript-Code

var __extends = this.__extends || function (d, b) {
  function __() { this.constructor = d; }
  __.prototype = b.prototype;
  d.prototype = new __();
}
var Auto = (function () {
  function Auto(mph, wheels, doors) {
    if (typeof mph === "undefined") { mph = 0; }
    if (typeof wheels === "undefined") { wheels = 4; }
    this.mph = mph;
    this.wheels = wheels;
    this.doors = doors;
  }
  Auto.prototype.drive = function (speed) {
    this.mph += speed;
  };
  Auto.prototype.stop = function () {
    this.mph = 0;
  };
  return Auto;
})();
var Motorcycle = (function (_super) {
  __extends(Motorcycle, _super);
  function Motorcycle() {
    _super.apply(this, arguments);
    this.doors = 0;
    this.wheels = 2;
  }
  return Motorcycle;
})(Auto);
var bike = new Motorcycle();

Module

Module in TypeScript sind die Entsprechungen der Namespaces in .NET Framework. Sie sind eine hervorragende Methode, um den Code zu organisieren und Geschäftsregeln und -prozesse einzukapseln, die ohne diese Funktionalität nicht umzusetzen wären. JavaScript hat keine integrierte Möglichkeit, diese Funktion bereitzustellen. Das häufigste Muster für Namespaces in JavaScript ist das Modulmuster oder dynamische Namespace-Verwendung wie in JQuery. TypeScript-Module vereinfachen die Syntax und produzieren dasselbe. Im Auto-Beispiel können Sie den Code in ein Modul einschließen und nur die Motorcycle-Klasse verfügbar machen, wie in Abbildung 7 gezeigt.

Das Example-Modul kapselt die Basisklasse ein, und die Motorcycle-Klasse wird durch das Hinzufügen des export-Schlüsselworts als Präfix verfügbar gemacht. Dadurch kann eine Motorcycle-Instanz erstellt werden, und es können alle ihre Methoden verwendet werden, wohingegen die Auto-Basisklasse verborgen bleibt.

Abbildung 7: Einschließen der Auto-Klasse in ein Modul

module Example {
  class Auto{
    constructor(public mph : number = 0,
      public wheels = 4,
      public doors?){
      }
      drive(speed){
      this.mph += speed;
      }
      stop(){
      this.mph = 0;
      }
  }
  export class Motorcycle extends Auto
  {
    doors = 0;
    wheels = 2;
  }
}
var bike = new Example.Motorcycle();

Ein weiterer Nutzen von Modulen ist, dass Sie diese zusammenführen können. Wenn Sie ein weiteres, ebenfalls „Example“ genanntes Modul erstellen, nimmt TypeScript an, dass auf den Code im ersten Modul und auf den im neuen Modul durch Example-Anweisungen zugegriffen werden kann, genau wie bei Namespaces.

Module erleichtern die Verwaltbarkeit und Organisation des Codes. Mit ihnen wird es für Entwicklungsteams einfacher, umfangreiche Anwendungen anhaltend zu pflegen.

Typen

Entwickler, die sich nicht alltäglich mit JavaScript befassen, kritisieren u. a. deutlich die fehlende Typsicherheit. In TypeScript ist Typsicherheit jedoch verfügbar (darum heißt es TypeScript) und geht über das einfache Deklarieren einer Variable als Zeichenfolge oder booleschen Wert hinaus.

In JavaScript ist es durchaus annehmbar, wenn Sie „x“ zunächst „foo“ und dann später im Code „11“ zuweisen. Sie können daran aber verzweifeln, wenn Sie versuchen herauszufinden, warum Sie zur Laufzeit das allgegenwärtige „NaN“ erhalten.

Das Typsicherheitsfeature ist einer der größten Vorteile von TypeScript. Es gibt vier immanente Typen: „string“, „number“, „bool“ und „any“. In Abbildung 8 wird die Syntax zum Deklarieren des Typs der s-Variable gezeigt. Außerdem wird der IntelliSense-Code aufgeführt, den der Compiler bereitstellt, sobald ihm anhand des Typs bekannt ist, welche Aktionen ausführbar sind.

An Example of TypeScript IntelliSense
Abbildung 8: Ein TypeScript-IntelliSense-Beispiel

Über die Typisierung einer Variable oder Funktion hinaus kann TypeScript Typen ableiten. Sie können eine Funktion erstellen, die einfach eine Zeichenfolge zurückgibt. Der Compiler und die Tools stellen den Typrückschluss bereit und zeigen automatisch die Operationen an, die für die Rückgabe ausgeführt werden können, wie Sie in Abbildung 9 sehen können.

An Example of Type Inference
Abbildung 9: Beispiel für einen Typrückschluss

Sie müssen nicht raten, sondern können sehen, dass die Rückgabe eine Zeichenfolge ist. Der Typrückschluss ist eine große Hilfe bei der Arbeit mit anderen Bibliotheken, auf die Entwickler in ihrem Code verweisen, wie beispielsweise JQuery oder sogar das Dokumentobjektmodell (DOM).

Die andere Methode, sich das Typsystem zunutze zu machen, ist über Anmerkungen. Die ursprüngliche Auto-Klasse war zunächst nur mit „wheels“ und „doors“ deklariert. Wir können jetzt mithilfe von Anmerkungen sicherstellen, dass beim Erstellen der Auto-Instanz in „car“ die richtigen Typen festgelegt werden.

class Auto{
  wheels : number;
  doors : number;
}
var car = new Auto();
car.doors = 4;
car.wheels = 4;

In dem produzierten JavaScript-Code werden die Anmerkungen allerdings wegkompiliert. Sie müssen sich daher keine Gedanken über umfangreichen Code und zusätzliche Abhängigkeiten machen. Der Vorteil ist wiederum eine starke Typisierung und außerdem die Eliminierung der einfachen Fehler, die normalerweise zur Laufzeit ermittelt werden.

Schnittstellen zeigen ein weiteres Beispiel für die Typensicherheit, die TypeScript bietet. Mit Schnittstellen können Sie die Form eines Objekts definieren. In Abbildung 10 wurde der Auto-Klasse die neue travel-Methode hinzugefügt, und diese akzeptiert einen Parameter vom Typ „Trip“.

Abbildung 10: Die Trip-Schnittstelle

interface Trip{
  destination : string;
  when: any;
}
class Auto{
  wheels : number;
  doors : number;
  travel(t : Trip) {
  //..
  }
}
var car = new Auto();
car.doors = 4;
car.wheels = 4;
car.travel({destination: "anywhere", when: "now"});

Sie können die travel-Methode nur mit der korrekten Struktur aufrufen, andernfalls gibt der Entwurfszeit-Compiler einen Fehler aus. Wenn Sie im Vergleich dazu diesen Code in JavaScript, beispielsweise in eine „.js“-Datei eingeben, bemerken Sie den Fehler wahrscheinlich erst beim Ausführen der Anwendung.

In Abbildung 11 wird deutlich, dass die Verwendung von Typanmerkungen nicht nur dem ursprünglichen Entwickler, sondern auch allen nachfolgenden Entwicklern nutzt, die den Quellcode pflegen müssen.

Annotations Assist in Maintaining Your Code
Abbildung 11: Einfachere Pflege des Codes durch Typanmerkungen

Vorhandener Code und Bibliotheken

Wie steht es nun um Ihren vorhandenen JavaScript-Code? Und was ist, wenn Sie bei der Erstellung gerne Node.js als Basis nutzen oder Bibliotheken wie beispielsweise toastr, Knockout oder JQuery verwenden? Zur Unterstützung bietet TypeScript Deklarationsdateien. Erinnern Sie sich zunächst daran, dass jeder JavaScript-Code gültiger TypeScript-Code ist. Sie können also selbst erstellten Code direkt in den Designer kopieren, und der Compiler produziert den jeweiligen JavaScript-Code. Eine bessere Methode ist, Ihre eigene Deklarationsdatei zu erstellen.

Boris Yankov (twitter.com/borisyankov auf Twitter) hat auf GitHub (github.com/borisyankov/DefinitelyTyped) ein praktisches Repository für die wichtigsten Bibliotheken und Frameworks erstellt, das eine Reihe von Deklarationsdateien für einige der beliebtesten JavaScript-Bibliotheken enthält. Genau darauf hatte das TypeScript-Team gehofft. Die Node.js-Deklarationsdatei wurde übrigens vom TypeScript-Team erstellt und ist als Teil des Quellcodes verfügbar.

Erstellen einer Deklarationsdatei

Wenn Sie die Deklarationsdatei für Ihre Bibliothek nicht finden können oder mit eigenem Code arbeiten, müssen Sie eine Deklarationsdatei erstellen. Zuerst kopieren Sie den JavaScript-Code in die TypeScript-Seite und fügen die Typdefinitionen hinzu. Anschließend generieren Sie mithilfe des Befehlszeilentools die Definitionsdatei („*.d.ts“) als Referenz.

In Abbildung 12 wird ein einfaches Skript zum Berechnen eines Notendurchschnitts in JavaScript gezeigt. Ich habe das Skript in die linke Seite des Editors kopiert, die Anmerkungen für die Typen hinzugefügt und die Datei mit der .tx-Erweiterung gespeichert.

Abbildung 12: Erstellen einer Deklarationsdatei

TypeScript JavaScript
function gradeAverage(grades : string[]) {  var total = 0;  var g = null;  var i = -1;  for(i = 0; i < grades.length; i++) {      g = grades[i];      total += getPointEquiv(grades[i]);  }  var avg = total / grades.length;  return getLetterGrade(Math.round(avg));}function getPointEquiv(grade : string) {  var res;  switch(grade) {    case "A": {      res = 4;      break;    }    case "B": {      res = 3;      break;    }    case "C": {      res = 2;      break;    }    case "D": {      res = 1;      break;    }    case "F": {      res = 0;      break;    }  }  return res;}function getLetterGrade(score : number) {  if(score < 1) {    return "F";  }  if(score > 3) {    return "A";  }  if(score > 2 && score < 4) {    return "B";  }  if(score >= 1 && score <= 2) {    return "C";  }  if(score > 0 && score < 2) {    return "D";  }} function gradeAverage(grades){  var total = 0;  var g = null;  var i = -1;  for(i = 0; i < grades.length; i++) {      g = grades[i];      total += getPointEquiv(grades[i]);  }  var avg = total / grades.length;  return getLetterGrade(Math.round(avg));}function getPointEquiv(grade) {  var res;  switch(grade) {    case "A": {      res = 4;      break;    }    case "B": {      res = 3;      break;    }    case "C": {      res = 2;      break;    }    case "D": {      res = 1;      break;    }    case "F": {      res = 0;      break;    }  }  return res;}function getLetterGrade(score) {  if(score < 1) {    return "F";  }  if(score > 3) {    return "A";  }  if(score > 2 && score < 4) {    return "B";  }  if(score >= 1 && score <= 2) {    return "C";  }  if(score > 0 && score < 2) {    return "D";  }}

Ich öffne als Nächstes eine Eingabeaufforderung und erstelle mit dem TypeScript-Befehlszeilentool die Definitionsdatei und den JavaScript-Code, der sich ergibt:

tsc c:\gradeAverage.ts –declarations

Der Compiler erstellt zwei Dateien: „gradeAverage.d.ts“ ist die Deklarationsdatei und „gradeAverage.js“ ist die JavaScript-Datei. In allen zukünftigen TypeScript-Dateien, die die gradeAverage-Funktionalität benötigen, füge ich einfach oben im Editor eine Referenz wie folgt ein:

/// <reference path="gradeAverage.d.ts">

Die gesamte Typisierung und die Tools werden hervorgehoben, wenn Sie diese Bibliothek referenzieren, und das ist für alle der wichtigen Bibliotheken der Fall, die im DefinitelyTyped GitHub-Repository zu finden sind.

Ein großartiges Feature des Compilers in Deklarationsdateien ist die Fähigkeit zum automatischen Traversieren der Verweise. Das heißt, wenn Sie eine Deklarationsdatei für jQueryUI referenzieren, die wiederum jQuery referenziert, profitiert Ihre aktuelle TypeScript-Datei von der Anweisungsvervollständigung, und die Funktionssignaturen und -typen sind genauso, als ob Sie jQuery direkt referenziert hätten. Sie können auch eine einzelne Deklarationsdatei, zum Beispiel „myRef.d.ts“ erstellen, die alle Referenzen zu allen Bibliotheken enthält, die Sie in der Lösung verwenden möchten, und anschließend nur einen einzigen Verweis in Ihren TypeScript-Code einfügen.

Windows 8 und TypeScript

Da HTML5 für die Entwicklung von Windows Store-Apps anerkannt ist, war die Frage für Entwickler, ob TypeScript für diese Arten von Apps verwendbar ist. Kurz gesagt ja, aber es sind einige Vorbereitungen nötig. Zum Zeitpunkt der Erstellung dieses Artikels haben die Tools, die entweder über den Visual Studio Installer oder andere Erweiterungen verfügbar sind, die Vorlagen innerhalb der JavaScript-Vorlagen für Windows Store-Apps in Visual Studio 2012 noch nicht vollständig aktiviert.

Drei wichtige Deklarationsdateien sind im Quellcode unter typescript.codeplex.com verfügbar: „winjs.d.ts“, „winrt.d.ts“ und „lib.d.ts“. Durch Referenzieren dieser Dateien erhalten Sie Zugriff auf die WinJS- und WinRT-JavaScript-Bibliotheken, die in dieser Umgebung verwendet werden, um auf die Kamera, Systemressourcen usw. zuzugreifen. Sie können auch Verweise auf jQuery hinzufügen, um IntelliSense und die Typensicherheitsfeatures zu erhalten, die ich in diesem Artikel erwähnt habe.

In Abbildung 13 wird in einem kurzen Beispiel gezeigt, wie diese Bibliotheken verwendet werden, um auf die Geolocationinformationen eines Benutzers zuzugreifen und eine Location-Klasse aufzufüllen. Der Code erstellt anschließend ein HTML-Bildtag und fügt eine statische Karte aus der Bing Map-API ein.

Abbildung 13: Deklarationsdateien für Windows 8

/// <reference path="winjs.d.ts" />
/// <reference path="winrt.d.ts" />
/// <reference path="jquery.d.ts" />
module Data {
  class Location {
    longitude: any;
    latitude: any;
    url: string;
    retrieved: string;
  }
  var locator = new Windows.Devices.Geolocation.Geolocator();
  locator.getGeopositionAsync().then(function (pos) {
    var myLoc = new Location();
    myLoc.latitude = pos.coordinate.latitude;
    myLoc.longitude = pos.coordinate.longitude;
    myLoc.retrieved = Date.now.toString();
    myLoc.url = "http://dev.virtualearth.net/REST/v1/Imagery/Map/Road/"
      + myLoc.latitude + "," + myLoc.longitude
      + "15?mapSize=500,500&pp=47.620495,-122.34931;21;AA&pp="
      + myLoc.latitude + "," + myLoc.longitude
      + ";;AB&pp=" + myLoc.latitude + "," + myLoc.longitude
      + ";22&key=BingMapsKey";
    var img = document.createElement("img");
    img.setAttribute("src", myLoc.url);
    img.setAttribute("style", "height:500px;width:500px;");
    var p = $("p");
    p.append(img);
  });
};

Zusammenfassung

Die kleinen Features, die der JavaScript-Entwicklung durch TypeScript hinzugefügt werden, bieten große Vorteile für .NET-Entwickler, die in den Sprachen für die normale Windows-Anwendungsentwicklung ähnliche Features gewohnt sind.

TypeScript ist keine Patentlösung und auch nicht als solche gedacht. Aber für jeden Entwickler, der zögert, mit JavaScript anzufangen, ist TypeScript eine hervorragende Sprache, die den Weg vereinfacht.

Shayne Boyer ist Telerik-MVP, Nokia Developer Champion, MCP, INETA-Referent und Lösungsarchitekt in Orlando, Florida. Er entwickelt seit 15 Jahren Microsoft-basierte Lösungen. In den letzten 10 Jahren hat er an umfangreichen Webanwendungen mit den Schwerpunkten Produktivität und Leistung gearbeitet. In seiner Freizeit leitet Boyer die Orlando Windows Phone and Windows 8 User Group und verfasst Blogbeiträge zu neuester Technologie unter tattoocoder.com.

Unser Dank gilt dem folgenden technischen Experten für die Durchsicht dieses Artikels: Christopher Bennage