© Liashko/Shutterstock.com
Entwickler Magazin
Typisierung für JavaScript

Grundkurs TypeScript

TypeScript ist eine echte Obermenge von JavaScript mit optionaler statischer Typisierung. Es bietet schon heute zahlreiche Features aus den zukünftigen ECMAScript-Standards. Dabei transpiliert es zu JavaScript in der ECMAScript-Version 3/5 und ist damit kompatibel zu allen Browsern. Wir wollen uns in diesem Artikel die grundlegenden Konzepte der Sprache etwas genauer ansehen.

Johannes Dienst


TypeScripts [1] wichtigstes Feature ist die optionale statische Typisierung, die laut Projektleiter Anders Hejlsberg JavaScript-Entwicklung in großem Stil ermöglicht. Die 2012 als Open Source veröffentlichte Sprache wird unter großem Einfluss der Community weiterentwickelt. Sie transpiliert wahlweise zu ECMAScript 3, 5 oder 6 und garantiert dadurch auch, dass das erzeugte JavaScript auf allen Browsern lauffähig ist. Abgerundet wird das Paket durch ein Tooling, das sich in das Ökosystem rund um Node.js und npm einfügt.

Etablierte IDEs und Editoren profitieren von der Architektur des TypeScript-Compilers, durch die Plug-ins mit Codevervollständigung und Refaktorisierungsmöglichkeiten gebaut werden können. Mit den vorhandenen Werkzeugen sind große JavaScript-Codebasen handhabbar. Spätestens seit Google für sein beliebtes Framework Angular auf TypeScript setzt, kann man davon ausgehen, dass das Projekt ein langes Leben haben wird.

Hauptmerkmal von TypeScript ist die optionale statische Typisierung. Dafür stellt es eine ganze Reihe von Basistypen bereit, die in Listing 1 in Aktion gezeigt werden. Neben den klassischen Typen für boolesche Werte boolean, string für Strings und number für Zahlenwerte im Format dezimal, hexadezimal, binär und oktär, lassen sich auch Arrays definieren, sogar auf zwei Arten: klassisch zum Beispiel ein Array aus strings mit

let aArray: string[] = ['Hello', 'World', '!'];

oder mit Generics

let aArray: Array = ['Hello', 'World', '!'];

Ein letzter Basistyp ist enum, mit dem sich Aufzählungen definieren lassen, die aufsteigend von 0 angelegt werden. Alternativ können auch die numerischen Werte selbst belegt werden.

Listing 1: Basistypenlet isDone: boolean = false;let decimal: number = 6;let color: string = 'berlin'; // Getype Arrays auf zwei Artenlet aArray: number[] = [1, 2, 3];let aGenericArray: Array = [4,5,6]; enum Color {Red, Green, Blue};let c: Color = Color.Green;

Die Migration von JavaScript auf TypeScript bringt mitunter Fehler ans Tageslicht. Diese betreffen die Typisierung der Codebasis und Spezialfälle mit nicht klar aufgelösten Typen. Dafür gibt es auch einige Spezialtypen, die die Integration mit JavaScript vereinfachen. Listing 2 zeigt zuerst den Typ any, der immer dann zum Einsatz kommen kann, wenn eine Variable Werte von unterschiedlichen Typen annehmen kann. Arrays können auch verschiedene Typen enthalten, so wie:

let tuple: [string, number];

Zu beachten ist hierbei, dass damit eine Reihenfolge verbunden ist...

Entwickler Magazin
Typisierung für JavaScript

Grundkurs TypeScript

TypeScript ist eine echte Obermenge von JavaScript mit optionaler statischer Typisierung. Es bietet schon heute zahlreiche Features aus den zukünftigen ECMAScript-Standards. Dabei transpiliert es zu JavaScript in der ECMAScript-Version 3/5 und ist damit kompatibel zu allen Browsern. Wir wollen uns in diesem Artikel die grundlegenden Konzepte der Sprache etwas genauer ansehen.

Johannes Dienst


TypeScripts [1] wichtigstes Feature ist die optionale statische Typisierung, die laut Projektleiter Anders Hejlsberg JavaScript-Entwicklung in großem Stil ermöglicht. Die 2012 als Open Source veröffentlichte Sprache wird unter großem Einfluss der Community weiterentwickelt. Sie transpiliert wahlweise zu ECMAScript 3, 5 oder 6 und garantiert dadurch auch, dass das erzeugte JavaScript auf allen Browsern lauffähig ist. Abgerundet wird das Paket durch ein Tooling, das sich in das Ökosystem rund um Node.js und npm einfügt.

Etablierte IDEs und Editoren profitieren von der Architektur des TypeScript-Compilers, durch die Plug-ins mit Codevervollständigung und Refaktorisierungsmöglichkeiten gebaut werden können. Mit den vorhandenen Werkzeugen sind große JavaScript-Codebasen handhabbar. Spätestens seit Google für sein beliebtes Framework Angular auf TypeScript setzt, kann man davon ausgehen, dass das Projekt ein langes Leben haben wird.

Hauptmerkmal von TypeScript ist die optionale statische Typisierung. Dafür stellt es eine ganze Reihe von Basistypen bereit, die in Listing 1 in Aktion gezeigt werden. Neben den klassischen Typen für boolesche Werte boolean, string für Strings und number für Zahlenwerte im Format dezimal, hexadezimal, binär und oktär, lassen sich auch Arrays definieren, sogar auf zwei Arten: klassisch zum Beispiel ein Array aus strings mit

let aArray: string[] = ['Hello', 'World', '!'];

oder mit Generics

let aArray: Array = ['Hello', 'World', '!'];

Ein letzter Basistyp ist enum, mit dem sich Aufzählungen definieren lassen, die aufsteigend von 0 angelegt werden. Alternativ können auch die numerischen Werte selbst belegt werden.

Listing 1: Basistypenlet isDone: boolean = false;let decimal: number = 6;let color: string = 'berlin'; // Getype Arrays auf zwei Artenlet aArray: number[] = [1, 2, 3];let aGenericArray: Array = [4,5,6]; enum Color {Red, Green, Blue};let c: Color = Color.Green;

Die Migration von JavaScript auf TypeScript bringt mitunter Fehler ans Tageslicht. Diese betreffen die Typisierung der Codebasis und Spezialfälle mit nicht klar aufgelösten Typen. Dafür gibt es auch einige Spezialtypen, die die Integration mit JavaScript vereinfachen. Listing 2 zeigt zuerst den Typ any, der immer dann zum Einsatz kommen kann, wenn eine Variable Werte von unterschiedlichen Typen annehmen kann. Arrays können auch verschiedene Typen enthalten, so wie:

let tuple: [string, number];

Zu beachten ist hierbei, dass damit eine Reihenfolge verbunden ist...

Neugierig geworden?


   
Loading...

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang