01 TypeScript

01 Typescript

Inhalt:

• Ziel dieser Seite
• Was ist TypeScript?
• Typings/Typsystem
• Typ "Any"
• TypeScript Transpiler
• Interfaces
• AngularJS Komponenten
• Zusammenfassung
• hilfreiche Links

Ziel

Am Ende dieser Einführung sollen Sie in der Lage sein, die TypeScript Grundlagen genug zu beherrschen, um mit AngularJS 2 zu starten. Insbesondere:

• Typsystem verstehen
• Typescript-Transpiler steuern
• Interfaces gestalten
• AngularJS Komponenten anlegen

Was ist TypeScript?

TypeScript ist eine von Microsoft entwickelte Programmiersprache, die man als Superset von JavaScript bezeichnen kann. Da sie die Features von ECMA Script 5 und ECMA Script 6 vereint und diese erweitert. Daraus folgt, dass jedes gültige JavaScript Programm auch ein syntaktisch gültiges TypeScript Programm ist. TypeScript Dokumente werden um sie auszuführen in JavaScript kompiliert, so kann man TypeScript in jedem Browser und auch mit gängigen JavaScript Bibliotheken, wie node.js und jQuery, benutzen.

Besondere Features von TypeScript sind:

Typings: Variablen werden in TypeScript einem festem Typ zugewiesen, dadurch gibt es genauere Fehlermeldungen und Bugs können schneller gefunden werden. Außerdem verbessern sie die Autovervollständigung von Entwicklungsumgebungen. Fehler treten beim Benutzen von TypeScript schon beim kompilieren und nicht erst beim Ausführen des Codes auf.

Interfaces: TypeScript lässt die Benutzung von Interfaces zu, dies ist besonders bei der Verwendung für AngularJS sehr hilfreich. Außerdem können dadurch Setting Objekte verwendet werden.

siehe auch: https://www.typescriptlang.org

Typings/Typsystem

Boolean

let isDone : boolean = true;

Number

let decimal : number = 6;

String

let name : string = "pauline";

Array

let list : number[] = [1,2,3];

Beispiel falsche Zuweisung

Beim Kompilieren wird ein Error geworfen, wenn einer Variable vom Typ 'String' eine Variabel vom Typ 'Number' zugewiesen wird.

let x : number = 4;
let y : string = x; //ERROR!

Beispiel automatische Typumwandlung in JavaScript

Wenn in JavaScript ein String mit einer Number addiert wird entsteht ein neuer String ohne Fehlermeldung. Dadurch kann es zu schwerauffindbaren Bugs kommen. In TypeScript kann dies nicht passieren, da es sofort einen Fehler geben würde.

let s  = "Hallo Welt";
let n  = 1234; 
let x = s + n //String plus Zahl geht nicht, deshalb wird die Zahl gemäß JS-Regeln umgewandelt, String "Hallo Welt1234" entsteht ohne Error zuschmeißen 

Typ "Any"

Der Typ "Any" wird benutzt, wenn beim Schreiben des Programmes noch nicht klar ist von welchem Typ eine Variable ist. Der Unterschied zu Object ist, dass einem Object zwar auch jeder beliebige Typ zugewiesen werden kann, jedoch können auf Object Methoden keine Methoden aufgerufen werden. Praktisch ist der Typ "Any" auch bei Arrays die mit unterschiedlichen Typen gefüllt werden sollen.

let notSure : any  = "Hallo Welt";
notSure  = 1234; 
notSure = true;

let list : any[]  = [1, true, "hallo"];
list[1] = "tschüss";

siehe auch: http://stackoverflow.com/questions/18961203/typescript-any-vs-object

TypeScript Transpiler

Um TypeScript überall nutzen zu können müssen die .ts Dateien in .js Dateien kompiliert werden. Die Kompilierung kann mit einem "Guide" für den Transpiler gesteuert werden, dazu wird eine tsconfig.json Datei im root-Verzeichnis des Projekts angelegt, diese enthält Optionen für den Compiler. (Commit 4f884113 )

{
  "compilerOptions" : {
    "target" : "es5",  
    "module" : "system",                // systemjs Modul-System (AMD kompatibel), läd automatisch weitere JS im Browser nach
    "moduleResolution" : "node",
    "sourceMap" : true,
    "emitDecoratorMetaData" : true,
    "experimentalDecorator" : true,
    "removeComments" : false,
    "noImplicitAny" : false    
  }, 
  }

"target": Gibt an ob nach ECMA Script 5 oder ECMA Script 6 kompiliert werden soll. ECMAScript5 wird empfohlen, das verstehen die meisten Browser (ES6 ist noch nicht zu empfehlen)

"noImplicitAny": Wenn false, werden alle nicht Typisierten Variablen auf den Typ "Any" gesetzt. Wenn true, wird bei jeder nicht Typisierten Variablen ein Error geworfen.

siehe auch: https://basarat.gitbooks.io/typescript/content/docs/project/tsconfig.html

Interfaces

Interfaces in TypeScript sind im groben und ganzen so wie wir sie auch von anderen Programmiersprachen kennen. Da es keine Interfaces in JavaScript gibt, sind die Interfaces nach der Kompilierung nicht mehr zu sehen. Neu sind die so genannten Setting Objekte, mit denen man definieren kann, wie Objekte aufgebaut sein müssen.

interface ButtonSettings {
    text : string;
    size? : {width : number; height : number};
    color? : string; 
}

function createButton(settings : ButtonSetting){ ... }

createButton({ text : "Submit" });
createButton({ text : "Submit", size : {width : 2, height : 1} });
createButton({ text : "Submit", size : {width : 2, height : 1}, color: "red" });

siehe auch: https://www.typescriptlang.org/docs/handbook/interfaces.html

Zusammenfassung

TypeScript ist ein Superset von JavaScript. Sie können also normales JavaScript ebenfalls in einer TypeScript-Datei mit einmischen und problemlos zwischen JS Objekte und TS Objekten Daten austauschen usw. Nach der Transpilierung von .ts nach .js sind kleine Interfaces oder Typen mehr übrig. Diese dienen nur während der Programmierung und Transpilierung für (statische) Prüfungen. Browser-Updates sind daher nicht nötig. Diese interpretieren ECMAScript5 oder 6 Code (je nach Einstellungen in Ihrer typings.json Datei, mit welcher Sie das Verhalten des Transpilers steuern können).

hilfreiche Links

• https://www.youtube.com/watch?v=qRD7bkK7m10&nohtml5=False
• http://www.typescriptlang.org/docs/tutorial.html
• http://www.typescriptlang.org/docs/handbook/basic-types.html
• https://angularjs.de/artikel/angular2-tutorial-deutsch
• https://angular.io/docs/ts/latest/guide/typescript-configuration.html

Credits: größtenteils basierend auf TypeScript Intro des ng2-tutorials für RC-4 (Commit 7643c3e). Aktualisiert um Änderungen in TypeScript 2.0