Typescript - das kann das aufgebohrte JavaScript

2016-11-02 13:27 (Kommentare: 0)

JavaScript ist vor allem bei Entwicklern, die aus höheren Programmiersprachen wie Java oder C++ kommen, oft unbeliebt. TypeScript bietet ihnen eine Brücke: Es ist ein Superset von JavaScript. Die von Microsoft entwickelte Sprache ergänzt die Skriptsprache um Konzepte aus der objektorientierten Programmierung. Der Compiler – oder genauer Transpiler – hilft Entwicklern, Fehler zu finden, Type Deklarationen sind insbesondere für große Projekte interessant und helfen, qualitativen Code zu entwickeln. So eignet sich TypeScript nicht nur für Umsteiger aus den klassischen OOP Sprachen, sondern auch für JavaScript Entwickler, die hohe Ansprüche an die Performance, Sicherheit und Qualität von JavaScript Anwendungen haben. Wir zeigen euch, welche Schlüsselfeatures TypeScript hat und was das Superset ausmacht.

Was ist TypeScript?

Für Leser, die TypeScript nicht kennen: TypeScript ist eine von Microsoft entwickelte, auf JavaScript aufsetzende Programmiersprache. Sie basiert weitestgehend auf ECMAScript-6. Dabei geht Typescript mit dem Standard eine Symbiose ein: Typescript implementiert zu einen den Standard, zum anderen bringt es in den Standard selbst Sprachkonstrukte mit ein. TypeScript erweitert insbesondere die konzeptionellen und formalen Möglichkeiten von JavaScript. Dies ist unter anderem die Möglichkeit, variablen Typesafe zu definieren. Die Ausführung des TypeScript-Codes ist unkompliziert, ebenso der Einsatz gängiger JavaScript Bibliotheken. Beispiele dafür sind jQuery und AngularJS. Bei AngularJS2 wird der Einsatz von TypeScript sogar empfohlen. Möglich macht dies die Kompilierung von Typescript nach JavaScript – entweder nach ECMA Script 3 (ES3) oder nach ECMA Script 5 (ES5).

Wichtige Sprachkonstrukte in TypeScript

TypeScript beherrscht die gängigen OOP Konzepte von Klassen, Interfaces, Funktionen und Variablen. Diese können via Modulen gekapselt werden. Neben externen Modulen, die Bibliotheken wie CommonJS nutzen, erlaubt die Programmiersprache auch interne Module zu definieren. Die Implementierung lehnt sich dabei an ECMAScript 6 an.

Definition und Scoping von Variablen

  • var: Eine mit var definierte Variable ist in der gesamten - sie enthaltenden - Funktion, Modul, Namespace ansprechbar bzw. Global verfügbar.
  • let: Begrenzt den Scope der Variablen auf den umgebenden Code-block.
  • const: Scope-Verhalten wie let, jedoch kann die Variable nicht verändert werden. Sie verhält sich wie eine Konstante.

Beim Einsatz von var kommt es leicht zu Fehlern. Dies lässt sich durch let vermeiden


for (var i = 0; i < matrix.length; i++) {

   var currentRow = matrix[i];
   for (var i = 0; i < currentRow.length; i++) {
      sum += currentRow[i]; 
}
}

Hier ist die Variable i durch das Scope-Verhalten von var in beiden Schleifen verfügbar und die Schleifen überschreiben ihre Zählvariable gegenseitig. Dieses Verhalten kann abgewendet werden, indem let anstelle von var verwendet wird.

Interfaces, Klassen und Funktionen

Mit einem Interface Statement können wir festlegen, dass eine Funktion als Properity 'label' vom Typ String bekommt.


interface LabelledValue { label: string; }

function printLabel(labelledObj: LabelledValue) {
   console.log(labelledObj.label);
}

Eine Klasse zu definieren ist einfach. Umsteiger, beispielsweise aus Java, werden dies intuitiv verstehen:


class Greeter {
   greeting: string;

constructor(message: string) { this.greeting = message; } greet() { return "Hello, " + this.greeting; } }

Neben der Vererbung kennt TypeScript auch die Modifier public, private und protected

  • Public ist der Standard Modifier. Jede Variable, die nicht anderweitig definiert wird, ist Public. Für den Zugriff bedeutet Public: Sie lässt sich auch außerhalb der umschließenden Klasse aufrufen.
  • Private deklarierte Funktionen und Variablen sind nur in der umschließenden Klasse ansprechbar. Selbst Subklassen haben keinen Zugriff.
  • Protected – bei so markierten Elementen wird der Zugriff vererbt. Auch Subklassen (Kinderklassen) haben auf diese Funktionen und Variablen der Elternklasse Zugriff.

Weitere Sprachkonstrukte sind Static und Abstract. Wer wissen will, wie diese funktionieren, kann dies in der TypeScript-Dokumentation nachlesen: https://www.typescriptlang.org/docs/handbook/classes.html

Funktionen

Definieren von default-Werten für Funktionsparameter:

function buildName(firstName: string, lastName = "Smith")

Der Parameter lastName wird mit Smith initialisiert und kann optional beim Funktionsaufruf überschrieben werden. Definition von optionalen Parametern:

function buildName(firstName: string, lastName?: string)

Durch das ? am Ende des Parameternamens wird dieser als optional definiert. Beim Funktionsaufruf kommt es nicht zum Fehler, wenn dieser nicht übergeben wird.

Guter Support für Build-Management-Tools

TypeScript bietet eine gute Integration in Build-Management-Tools. Dies gilt insbesondere für das gängige Grunt. Auch Apache Maven und Gradle werden unterstützt. Die Integration erfolgt dabei über Plug-ins. Beispielsweise ist das Plug-in bei Grunt hier zu finden: https://github.com/TypeStrong/grunt-ts


module.exports = function(grunt) {
   grunt.initConfig({
      ts: {
       default : {
          src: ["**/*.ts", "!node_modules/**"]
        }
      }
}); grunt.loadNpmTasks("grunt-ts"); grunt.registerTask("default", ["ts"]); };

Quelle:https://github.com/TypeStrong/grunt-ts

Das Code-Beispiel zeigt, wie einfach es ist, alle TypeScript-Files in einem Unterverzeichnis mittels Grund nach JavaScript zu transpilieren. Dabei handelt es sich um eine minimale Grunt- Konfiguration. Es sind durchaus kompliziertere Konfigurationen mit Grunt möglich, wie die folgende Seite zeigt: https://github.com/TypeStrong/grunt-ts/blob/master/sample/Gruntfile.js.

Welche Editoren bieten Unterstützung für TypeScript?

Fast alle bekannten Editoren unterstützen inzwischen TypeScript. Dies gilt insbesondere für Sublime, Atom, Eclipse, WebStorm und Microsoft Visual Studio. Doch auch alte Linux-Hasen kommen mit Support für Vim und Emacs auf ihre Kosten.

Zurück

Einen Kommentar schreiben

 

Zahlungsmöglichkeiten

PayPalSofortüberweisung.de
fXmedia © 2009-2017 Alle Rechte vorbehalten. | Support | AGB | Datenschutzerklärung | Impressum