2
visualstudio1.de 30 31 30 Microsoft war im Rahmen der Umstellung auf Webtechnologi- en mit einem neuartigen Problem konfrontiert: JavaScript hat ob seines prototyporientierten Aufbaus und der dynamischen Typisierung nur wenig mit C# und Co gemein. Die 2012 nach rund zwei Jahren In-House-Entwicklung vorgestellte Sprache TypeScript möchte dieses Problem durch Einführung von rigide- ren Sprachstandards beheben. Als Backend-Architektur kommt dabei ein Compiler zum Einsatz, der die .ts-Dateien zur Laufzeit in JavaScript umwandelt. JavaScript trifft C# MICROSOFTS TYPESCRIPT TypeScript liegt mittlerweile in Ver- Ǥ ǣ Ƥ in größeren Projekten (Stichworte AngularJS und NativeScript) Ver- Ǥ Ȃ Unix arbeitende Entwickler kön- nen die Schritte stattdessen mit ei- Ǥ ơ¡ abarbeiten. NICHTS WIE LOS Besuchen Sie die TypeScript-Down- loadseite[1], um die aktuellste Be- ta von TypeScript herunterzuladen. Nutzer von Visual Studio 2015 brau- chen die Datei TypeScript_15beta_ Ǥǡ - assistenten mitbringt. Nach seiner Abarbeitung bietet Visual Studio eine neue Projektkategorie namens TypeScript an, in der sich die Vorlage HTML-Anwendung mit TypeScript ƤǤ Ƥ - ne .html- und eine .ts-Datei. Der Transpiler wandelt letztere in eine normale -js-Datei um, die nach fol- gendem Schema in die Webseite ein- gebunden wird: <html lang=“en“> <head> <script src=“app.js“></script> . . . </head> Für die Abarbeitung unseres Test- harrnisches müssen wir die Websei- te um einen zusätzlichen Button er- gänzen, der im Body nach folgendem Schema angelegt wird: <body> <h1>TypeScript HTML App</h1> <div id=“content“><button onclick=“doSomeTS()“>Harrnisch anwerfen</button></div> </body> ò ò - te folgenden Funktionskorpus ein: Er zeigt die Deklaration von Funktionen Ƥ o- gabeparametern, und stellt in do- SomeTS zudem die Erstellung einer typgebundenen Variable vor: function numericHelper(myVal: number) { alert(myVal); } function typelessHelper(myVal) { alert(myVal); } function doSomeTS() { var aVal: number; aVal = 22; typelessHelper(aVal); numericHelper(aVal); } TypeScript erlaubt das Festlegen von Datentypen: die streng optionale Festlegung weist den Transpiler dazu an, die Korrektheit des übergebenen òǤ kennt die Sprache die sieben in der Tabelle aufgelisteten Typen. Visual Studio transpiliert den Code nach dem Anklicken des Go-Knopfes automatisch. Das Debugging erfolgt – Breakpoints und Co lassen sich wie gewohnt platzieren. Die während der Transpilation erfol- gende Typüberprüfung arbeitet zu- verlässig. Abbildung 1 zeigt die Re- aktion von Visual Studio, wenn der numericHelper mit einem String auf- gerufen wird. COMPOSITE DATENTYPEN Wer seine Programme in Untermo- dule aufteilt, reduziert die Koppelung und erhöht im gleichen Atemzug die Wartbarkeit. Als Schnittstelle zwi- schen den einzelnen Programmtei- Ȃ erlaubt deren Formalisierung durch Ǧòǣ interface UsefulModule { aName: string; sayOi(): void; } ¡ sich fortan wie eine normale Variable verwenden. Als Beispiel dafür dient handleModule – der Parameter _m nutzt UsefulModule wie einen ele- mentaren Datentyp: function handleModule(_m: UsefulModule) { _m.sayOi(); } function doSomeTS() { Typ Bedeutung Any Deaktiviert das Type Checking des Compilers für diese Variable Array Deklaration eines Felds. Kann in klassischer (list:number[]) und generischer (list:Array<number>) Form geschrieben werden Boolean Boole‘sche Variable Enum An C# angelehntes Konstantenfeld Number Numerischer Wert. Weitere Unterteilung in Integer, Float und Co aufgrund Beschränkungen der Runtime unmöglich String Zeichenkette Void Nicht-Typ. Gibt an, dass eine Funktion bzw. Methode nichts zurückliefert. Die sieben akzeptierten Datentypen. Abbildung 1: ¡ Ǥ

JavaScript trifft C# TypeScript liegt mittlerweile in Ver ... · TypeScript möchte dieses Problem durch Einführung von rigide-ren Sprachstandards beheben. Als Backend-Architektur

  • Upload
    others

  • View
    31

  • Download
    0

Embed Size (px)

Citation preview

Page 1: JavaScript trifft C# TypeScript liegt mittlerweile in Ver ... · TypeScript möchte dieses Problem durch Einführung von rigide-ren Sprachstandards beheben. Als Backend-Architektur

visualstudio1.de30 3130

Microsoft war im Rahmen der Umstellung auf Webtechnologi-en mit einem neuartigen Problem konfrontiert: JavaScript hat ob seines prototyporientierten Aufbaus und der dynamischen Typisierung nur wenig mit C# und Co gemein. Die 2012 nach rund zwei Jahren In-House-Entwicklung vorgestellte Sprache TypeScript möchte dieses Problem durch Einführung von rigide-ren Sprachstandards beheben. Als Backend-Architektur kommt dabei ein Compiler zum Einsatz, der die .ts-Dateien zur Laufzeit in JavaScript umwandelt.

JavaScript trifft C#

MICROSOFTS TYPESCRIPT

TypeScript liegt mittlerweile in Ver-

in größeren Projekten (Stichworte AngularJS und NativeScript) Ver-

Unix arbeitende Entwickler kön-nen die Schritte stattdessen mit ei-

abarbeiten.

NICHTS WIE LOSBesuchen Sie die TypeScript-Down-loadseite[1], um die aktuellste Be-ta von TypeScript herunterzuladen. Nutzer von Visual Studio 2015 brau-chen die Datei TypeScript_15beta_

-assistenten mitbringt. Nach seiner Abarbeitung bietet Visual Studio eine neue Projektkategorie namens TypeScript an, in der sich die Vorlage HTML-Anwendung mit TypeScript

-ne .html- und eine .ts-Datei. Der Transpiler wandelt letztere in eine normale -js-Datei um, die nach fol-gendem Schema in die Webseite ein-gebunden wird:<html lang=“en“><head> <script src=“app.js“></script> . . .</head>

Für die Abarbeitung unseres Test-harrnisches müssen wir die Websei-te um einen zusätzlichen Button er-gänzen, der im Body nach folgendem Schema angelegt wird:<body> <h1>TypeScript HTML App</h1>

<div id=“content“><button onclick=“doSomeTS()“>Harrnisch anwerfen</button></div></body>

-te folgenden Funktionskorpus ein: Er

zeigt die Deklaration von Funktionen -

gabeparametern, und stellt in do-SomeTS zudem die Erstellung einer typgebundenen Variable vor:function numericHelper(myVal: number){ alert(myVal);}

function typelessHelper(myVal){ alert(myVal);

}function doSomeTS(){ var aVal: number; aVal = 22; typelessHelper(aVal); numericHelper(aVal);}

TypeScript erlaubt das Festlegen von Datentypen: die streng optionale Festlegung weist den Transpiler dazu an, die Korrektheit des übergebenen

kennt die Sprache die sieben in der Tabelle aufgelisteten Typen.Visual Studio transpiliert den Code

nach dem Anklicken des Go-Knopfes automatisch. Das Debugging erfolgt

– Breakpoints und Co lassen sich wie gewohnt platzieren.Die während der Transpilation erfol-gende Typüberprüfung arbeitet zu-verlässig. Abbildung 1 zeigt die Re-aktion von Visual Studio, wenn der numericHelper mit einem String auf-gerufen wird.

COMPOSITE DATENTYPENWer seine Programme in Untermo-dule aufteilt, reduziert die Koppelung und erhöht im gleichen Atemzug die Wartbarkeit. Als Schnittstelle zwi-schen den einzelnen Programmtei-

erlaubt deren Formalisierung durch

interface UsefulModule{ aName: string; sayOi(): void;}

sich fortan wie eine normale Variable verwenden. Als Beispiel dafür dient handleModule – der Parameter _m nutzt UsefulModule wie einen ele-mentaren Datentyp:function handleModule(_m: UsefulModule){ _m.sayOi();}

function doSomeTS(){

Typ BedeutungAny Deaktiviert das Type Checking des Compilers für diese VariableArray Deklaration eines Felds. Kann in klassischer (list:number[]) und generischer

(list:Array<number>) Form geschrieben werdenBoolean Boole‘sche VariableEnum An C# angelehntes KonstantenfeldNumber Numerischer Wert. Weitere Unterteilung in Integer, Float und Co aufgrund

Beschränkungen der Runtime unmöglichString ZeichenketteVoid Nicht-Typ. Gibt an, dass eine Funktion bzw. Methode nichts zurückliefert.

Die sieben akzeptierten Datentypen.

Abbildung 1:

Page 2: JavaScript trifft C# TypeScript liegt mittlerweile in Ver ... · TypeScript möchte dieses Problem durch Einführung von rigide-ren Sprachstandards beheben. Als Backend-Architektur

visualstudio1.de32 33

var myObj = { aName: „Test“, sayOi: function () { } }; myObj.sayOi = function () { alert(„Oi!“); } handleModule(myObj);}

TypeScript unterscheidet sich an die-ser Stelle insofern von JavaScript, als die in einem Objekt anzulegenden Member im Rahmen der Deklarati-on festgelegt werden müssen. Wir bedienen uns hierbei eines JSON-Blocks, der das zu erzeugende Objekt in serialisierter Form vorhält. Das Einschreiben des Methodenkorpus von sayOi erfolgt vor dem Aufruf von handleModule().

-rung der Flexibilität mit optionalen Attributen ausstatten. Diese müssen von den implementierenden Objek-ten nicht unbedingt realisiert wer-den: achten Sie darauf, dass vor der

erfolgt:interface Optionales { valA?: string; valB?: number;}

-

Deklaration einer Schnittstelle nach folgendem Schema demonstriert:function printLabel(labelledObj: {label: string}) { console.log(labelledObj.label);}

var myObj = {size: 10, label: „Size 10 Object“};printLabel(myObj);

KLASSEN FÜR JEDERMANNDie von Addy Osmani und Kollegen zusammengetragene Sammlung von Design Patterns erlaubt die Reali-sierung von an Klassen erinnernden Strukturen. Leider setzt ihre Nut-zung Disziplin voraus: ein mit den Patterns unerfahrener Entwickler kann immensen Schaden anrichten.TypeScript bietet mit Class ein Key-word an, das C#-Programmierern be-kannt vorkommen sollte. Folgendes Snippet realisiert eine Klasse samt Konstruktormethode:

class PPEDVClass{ myField: string; constructor(val: string) { this.myField = val; } resetMe() { this.myField = „RESET“; }}

erfolgt in doSomeTS nach dem von normalen JavaScript-Objekten be-kannten Schema:function doSomeTS(){ var myClass: PPEDVClass = new PPEDVClass(„Test“); alert(myClass.myField);}

Beim Umstieg von .net-Sprachen lauert eine kleine Besonderheit: in TypeScript sind alle Member eines Objekts per Default für die Allge-meinheit sichtbar. Falls Sie die Sicht-barkeit eines Elements einschränken wollen, so müssen Sie auf das private-Schlüsselwort zurückgreifen.Statische Variablen sind im aka-demischen Bereich nicht beson-ders populär, bei der Realisierung von Singletons und anderen Kons-trukten aber nur schwer ersetzbar.

Erfreulicherweise bietet die Ty-peScript-Runtime ein Schlüsselwort an, das ihre Realisierung erleichtert:class PPEDVClass{ myField: string; static mySharedField: string; . . .

auf die statischen Teile einer Klasse immer über den Klassennamen er-folgt – wer versehentlich über This,

-bildung 2 gezeigten Fehlermeldung belohnt:function doSomeTS(){ var myClass: PPEDVClass = new PPEDVClass(„Test“); alert(myClass.myField); PPEDVClass.mySharedField=“TEST“;}

-ren. Dazu ein kurzes Beispiel, das das im vorigen Abschnitt besprochene UsefulModule implementiert:class PPEDVClass implements UsefulModule{ aName: string; sayOi() {

} . . .

nicht auf Vererbung verzichten. Dank des Extend-Schlüsselworts lassen sich Klassen mit Basisklas-sen versehen. Die in der Materklasse implementierten Funktionen lassen sich durch das Super-Objekt anspre-chen: wer beispielsweise foo() über-schreibt, kann die Basisversion durch super.foo() aufrufen. Konstrukto-

Methodenoverloads von super – ein Konstruktor ohne Parameter lässt sich per super() aufrufen.

IN MEHRERE DATEIEN!Bibliotheken lassen sich leichter war-

-ruktionen auf mehrere Files aufgeteilt werden können. TypeScript realisiert dies über ein als Module bezeichne-tes Feature. Als ersten Akt ergänzen wir die Projektmappe um zwei Da-teien namens ModulePart1 und Mo-dulePart2. Versehen Sie ModulePart1 danach mit folgendem Code:module PPEDVModule{ export interface PPEDVI { sayOi: void; }}

Teil der Deklaration. Eine Reference-Path-Direktive weist den Compiler auf den Aufenthaltsort des weiteren Codes hin:

/// <reference path=“ModulePart1.ts“ />module PPEDVModule{ export function sayHello() { alert(„Hello“); }}

Wer den Transpiler mit den von Haus aus voreingestellten Attributen ver-sorgt, darf sich an der in Abbildung 3 gezeigten Projektstruktur erfreuen. Achten Sie darauf, dass alle .js-Da-

eingebunden werden müssen – ist die Reihenfolge falsch, so scheitert die

<head> <meta charset=“utf-8“ /> <title>TypeScript HTML App</title> <link rel=“stylesheet“ href=“app.css“ type=“text/css“ /> <script src=“ModulePart1.js“></script> <script src=“ModulePart2.js“></script> <script src=“app.js“></script></head>

MEHR ERFAHRENOb des eingeschränkten Platzes kön-nen wir TypeScript an dieser Stelle nicht vollständig besprechen. Das unter http://www.typescriptlang.org/Handbook einsehbare Handbuch bietet eine Übersicht aller implemen-tierten Features: ob des vergleichs-weise geringen Umfangs der Sprache lässt es sich in kurzer Zeit vollständig durcharbeiten.

FAZIT

Sprachstandards bietet Entwicklern immense Freiheiten – leider sind diese mit nicht weniger großer Ver-antwortung verbunden. Dank des

TypeScript an klassische OOP ge-wöhnten Programmierern dabei, ih-ren Code mit bekannten Paradigmata zu strukturieren.

Die Sprachentwickler achteten darauf, das grundlegende Aussehen von JavaScript nicht übermäßig zu

aus der Wissenschaft kommenden exotischen Shortcut-Konstruktionen

Co besser zusagen.

LINKS[1] http://www.typescriptlang.org/#Download

TAM HANNAs Karriere im mobile deve-lopment be-gann 2004 am mittlerwei-le legendären Palm IIIc. Seit-

her hat der Gründer der Tamogge-mon Limited diverse Anwendungen und Spiele für Symbian, PalmOS und bada entwickelt. Zusätzlich betreibt der studierte Elektrotechniker (HTL) mit seinem Team eine Gruppe von Online-Newsdiensten für Mobilcom-puter-Techniker und Power User. Au-ßerdem veröffentlicht er Fachbücher und Fachartikel im technischen Be-reich. Twitter: @tamhanna

Abbildung 3: Das Modul bleibt auch nach der Transpilation in mehrere Dateien aufgeteilt.

Abbildung 2: Statische Teile einer Klasse sind per This nicht ansprechbar