Share
Ende 2012 hat Microsoft TypeScript eingeführt, ein typisiertes Superset für JavaScript, das in einfaches JavaScript übersetzt wird. TypeScript konzentriert sich darauf, nützliche Tools für umfangreiche Anwendungen bereitzustellen, indem Funktionen wie Klassen, Typanmerkungen, Vererbung, Module und vieles mehr implementiert werden. In diesem Lernprogramm beginnen wir mit TypeScript, verwenden einfache Codebeispiele in Bissgröße, kompilieren diese in JavaScript und zeigen die Instant-Ergebnisse in einem Browser an.
TypeScript-Funktionen werden nur zur Kompilierzeit erzwungen.
Sie richten Ihre Maschine entsprechend Ihrer spezifischen Plattform und Ihren Bedürfnissen ein. Benutzer von Windows und Visual Studio können das Visual Studio Plugin einfach herunterladen. Wenn Sie mit Windows arbeiten und kein Visual Studio haben, probieren Sie es mit Visual Studio Express für Web aus. Die TypeScript-Erfahrung in Visual Studio ist anderen Code-Editoren derzeit überlegen.
Wenn Sie sich auf einer anderen Plattform befinden (oder Visual Studio nicht verwenden möchten), benötigen Sie lediglich einen Texteditor, einen Browser und das TypeScript-npm-Paket, um TypeScript verwenden zu können. Befolgen Sie diese Installationsanweisungen:
$ curl http://npmjs.org/install.sh | sh $ npm - Version 1.1.70
$ npm install -g typescript $ npm Ansicht Typoscript-Version npm http GET https://registry.npmjs.org/typescript npm http 304 https://registry.npmjs.org/typescript 0.8.1-1
Das ist es; wir sind bereit, ein einfaches zu machen "Hallo Welt"Anwendung in TypeScript!
TypeScript ist eine Obermenge von Ecmascript 5 (ES5) und enthält die für ES6 vorgeschlagenen Funktionen. Aus diesem Grund ist jedes JavaScript-Programm bereits ein TypeScript-Programm. Der TypeScript-Compiler führt lokale Dateiumwandlungen für TypeScript-Programme durch. Daher entspricht die endgültige JavaScript-Ausgabe der TypeScript-Eingabe.
Zuerst erstellen wir eine Basis index.html Datei und Referenz auf eine externe Skriptdatei:
TypeScript lernen
Dies ist eine einfache "Hello World" -Anwendung. Erstellen wir also eine Datei mit dem Namen Hallo. Das * .ts Erweiterung bezeichnet eine TypeScript-Datei. Fügen Sie den folgenden Code hinzu Hallo:
Accentsconagua
alert ('Hallo Welt in TypeScript!'); Öffnen Sie als Nächstes die Befehlszeilenschnittstelle, und navigieren Sie zu dem Ordner, der den Ordner enthält Hallo, und führen Sie den TypeScript-Compiler mit dem folgenden Befehl aus:
tsc hallo.ts
Das tsc Befehl ist der TypeScript-Compiler, der sofort eine neue Datei mit dem Namen generiert hallo.js. Unsere TypeScript-Anwendung verwendet keine TypeScript-spezifische Syntax. Daher wird in JavaScript derselbe JavaScript-Code angezeigt hallo.js dass wir geschrieben haben Hallo.
Großartig! Jetzt können wir die Features von TypeScript kennenlernen und sehen, wie es uns helfen kann, umfangreiche JavaScript-Anwendungen zu verwalten und zu erstellen.
Typanmerkungen sind eine optionale Funktion, mit der wir unsere Absicht in den von uns geschriebenen Programmen überprüfen und ausdrücken können. Lassen Sie uns ein einfaches erstellen Bereich() Funktion in einer neuen TypeScript-Datei mit dem Namen type.ts
Funktionsbereich (Form: Zeichenfolge, Breite: Anzahl, Höhe: Anzahl) Var Bereich = Breite * Höhe; return "I'm a" + shape + "mit einer Fläche von" + area + "cm squared."; document.body.innerHTML = Bereich ("Rechteck", 30, 15); Als nächstes ändern Sie die Skriptquelle in index.html zu type.js und führen Sie den TypeScript-Compiler mit aus tsc type.ts. Aktualisieren Sie die Seite im Browser, und es sollte Folgendes angezeigt werden:
Wie im vorherigen Code gezeigt, werden die Typanmerkungen als Teil der Funktionsparameter ausgedrückt. Sie geben an, welche Arten von Werten Sie an die Funktion übergeben können. Zum Beispiel die gestalten Parameter wird als Stringwert bezeichnet und Breite und Höhe sind numerische Werte.
Typanmerkungen und andere TypeScript-Funktionen werden nur zur Kompilierzeit erzwungen. Wenn Sie diesen Parametern andere Werte übergeben, gibt der Compiler einen Fehler bei der Kompilierung aus. Dieses Verhalten ist beim Erstellen umfangreicher Anwendungen äußerst hilfreich. Zum Beispiel übergeben wir absichtlich einen String-Wert für Breite Parameter:
Funktionsbereich (Form: Zeichenfolge, Breite: Anzahl, Höhe: Anzahl) Var Bereich = Breite * Höhe; return "I'm a" + shape + "mit einer Fläche von" + area + "cm squared."; document.body.innerHTML = Bereich ("Rechteck", "Breite", 15); // falscher Breitentyp Wir wissen, dass dies zu einem unerwünschten Ergebnis führt, und das Kompilieren der Datei weist auf das Problem mit dem folgenden Fehler hin:
$ tsc type.ts type.ts (6,26): Die angegebenen Parameter stimmen mit keiner Signatur des Anrufziels überein
Beachten Sie, dass der Compiler trotz dieses Fehlers die type.js Datei. Der Fehler hindert den TypeScript-Compiler nicht daran, das entsprechende JavaScript zu generieren. Der Compiler warnt uns jedoch vor möglichen Problemen. Wir beabsichtigen Breite eine Zahl sein Das Weitergeben von etwas anderem führt zu unerwünschtem Verhalten in unserem Code. Andere Typanmerkungen umfassen bool oder auch irgendein.
Erweitern wir unser Beispiel, um eine Schnittstelle einzuschließen, die eine Form als ein Objekt mit einem optionalen Objekt beschreibt Farbe Eigentum. Erstellen Sie eine neue Datei mit dem Namen interface.ts, und ändern Sie die Skriptquelle in index.html einschließen interface.js. Geben Sie den folgenden Code ein interface.ts:
Schnittstelle Shape Name: String; Breite: Anzahl; Höhe: Anzahl; Farbe ?: String; Funktionsbereich (Shape: Shape) var area = shape.width * shape.height; Rückgabe von "I'm" + Form.Name + "mit Fläche" + Fläche + "cm im Quadrat"; console.log (Bereich (Name: "Rechteck", Breite: 30, Höhe: 15)); console.log (Bereich (Name: "Quadrat", Breite: 30, Höhe: 30, Farbe: "Blau")));
Schnittstellen sind Namen, die Objekttypen gegeben werden. Wir können nicht nur eine Schnittstelle deklarieren, sondern auch als Typanmerkung verwenden.
Kompilieren interface.js führt zu keinen Fehlern. Um einen Fehler hervorzurufen, fügen Sie eine weitere Codezeile an interface.js mit einer Form, die keine Namenseigenschaft hat, und das Ergebnis in der Konsole des Browsers anzeigen. Fügen Sie diese Zeile an interface.js:
console.log (Bereich (width: 30, height: 15));
Kompilieren Sie nun den Code mit tsc interface.js. Sie erhalten eine Fehlermeldung, aber machen Sie sich jetzt keine Sorgen. Aktualisieren Sie Ihren Browser und sehen Sie sich die Konsole an. Sie sehen etwas ähnlich dem folgenden Screenshot:
Nun sehen wir uns den Fehler an. Es ist:
interface.ts (26,13): Die angegebenen Parameter stimmen nicht mit der Signatur eines Aufrufziels überein. Der Typ 'Shape' konnte nicht auf Argument 1 angewendet werden, das vom Typ 'width: number; Höhe: Anzahl; '
Wir sehen diesen Fehler, weil das Objekt an übergeben wurde Bereich() entspricht nicht der Gestalten Schnittstelle; Dafür braucht es eine Namenseigenschaft.
Den Umfang des verstehen diese Das Schlüsselwort ist eine Herausforderung, und TypeScript macht es etwas einfacher, da es Ausdrücke für Pfeilfunktionen unterstützt, ein neues Feature, das für ECMAScript 6 diskutiert wird. Pfeilfunktionen behalten den Wert von diese, Das Schreiben und Verwenden von Rückruffunktionen wird erheblich vereinfacht. Betrachten Sie den folgenden Code:
var shape = Name: "Rechteck", popup: function () console.log ('This inside popup ():' + this.name); setTimeout (function () console.log ('This inside setTimeout ():' + this.name); console.log ("Ich bin ein" + this.name + "!");, 3000); ; shape.popup (); Das dieser Name Zeile sieben wird eindeutig leer sein, wie in der Browserkonsole gezeigt:
Wir können dieses Problem leicht beheben, indem Sie die TypeScript-Pfeilfunktion verwenden. Einfach austauschen Funktion() mit () =>.
var shape = Name: "Rechteck", popup: function () console.log ('This inside popup ():' + this.name); setTimeout (()) => console.log ('This inside setTimeout ():' + this.name); console.log ("Ich bin ein" + this.name + "!");, 3000); ; shape.popup (); Und die Ergebnisse:
Werfen Sie einen Blick auf die generierte JavaScript-Datei. Sie werden sehen, dass der Compiler eine neue Variable eingefügt hat, var _this = das;, und benutzte es in setTimeout ()Callback-Funktion zum Verweisen auf Name Eigentum.
TypeScript unterstützt Klassen und deren Implementierung folgt stark dem Vorschlag von ECMAScript 6. Erstellen wir eine weitere Datei namens class.ts, und überprüfen Sie die Klassensyntax:
Klasse Shape Bereich: Nummer; Farbe: String; Konstruktor (Name: String, Breite: Nummer, Höhe: Nummer) this.area = width * height; this.color = "pink"; ; shoutout () return "I'm" + this.color + "" + this.name + "mit einem Bereich von" + this.area + "cm squared."; var Quadrat = neue Form ("Quadrat", 30, 30); console.log (square.shoutout ()); console.log ('Formbereich:' + Quadratbereich); console.log ('Name der Form:' + Quadratname); console.log ('Farbe der Form:' + Quadratfarbe); console.log ('Width of Shape:' + square.width); console.log ('Höhe der Form:' + Quadrat.Höhe); Obenstehendes Gestalten Klasse hat zwei Eigenschaften, Bereich und Farbe, ein Konstruktor (passend benannt) Konstrukteur()) sowie ein schreien () Methode. Der Bereich der Konstruktorargumente (Name, Breite und Höhe) sind lokal für den Konstruktor. Deshalb werden Fehler im Browser sowie im Compiler angezeigt:
class.ts (12,42): Die Eigenschaft 'name' ist bei einem Wert vom Typ 'Shape' nicht vorhanden class.ts (20,40): Die Eigenschaft 'name' ist bei einem Wert des Typs 'Shape' nicht vorhanden. ts (22,41): Die Eigenschaft 'width' ist beim Wert des Typs 'Shape' nicht vorhanden class.ts (23,42): Die Eigenschaft 'height' ist beim Wert des Typs 'Shape' nicht vorhanden
Jedes JavaScript-Programm ist bereits ein TypeScript-Programm.
Als nächstes wollen wir das erkunden Öffentlichkeit und Privatgelände Eingabehilfen Auf öffentliche Mitglieder kann von überall aus zugegriffen werden, während auf private Mitglieder nur innerhalb des Klassenkörpers zugegriffen werden kann. Natürlich gibt es in JavaScript keine Funktion, um den Datenschutz durchzusetzen. Daher wird der private Zugriff nur während der Kompilierung erzwungen und dient als Warnung an die ursprüngliche Absicht des Entwicklers, ihn privat zu machen.
Als Beispiel fügen wir die Öffentlichkeit Eingabehilfemodifizierer für das Konstruktorargument, Name, und ein Privatgelände Eingabehilfemodifizierer für das Mitglied, Farbe. Wenn wir hinzufügen Öffentlichkeit oder Privatgelände Wenn Sie auf ein Argument des Konstruktors zugreifen können, wird dieses Argument automatisch zum Member der Klasse mit dem entsprechenden Zugriffsmodifizierer.
… Private Farbe: Zeichenfolge;… Konstruktor (öffentlicher Name: Zeichenfolge, Breite: Nummer, Höhe: Nummer) …
class.ts (24,41): Die Eigenschaft 'color' ist bei einem Wert vom Typ 'Shape' nicht vorhanden.
Schließlich können Sie eine vorhandene Klasse erweitern und eine erstellen abgeleitete Klasse davon mit dem erweitert Stichwort. Hängen wir den folgenden Code an die vorhandene Datei an, class.ts, und kompilieren Sie es:
Klasse Shape3D erweitert Shape Volumen: Anzahl; Konstruktor (öffentlicher Name: String, Breite: Nummer, Höhe: Nummer, Länge: Nummer) super (Name, Breite, Höhe); this.volume = length * this.area; ; shoutout () return "I'm" + this.name + "mit einem Volume von" + this.volume + "cm cube."; superShout () return super.shoutout (); var cube = new Shape3D ("cube", 30, 30, 30); console.log (cube.shoutout ()); console.log (cube.superShout ()); Mit dem abgeleiteten geschieht einiges Shape3D Klasse:
Gestalten Klasse erbt das Bereich und Farbe Eigenschaften.Super Methode ruft den Konstruktor der Basisklasse auf, Gestalten, vorbei am Name, Breite, und Höhe Werte. Vererbung ermöglicht uns die Wiederverwendung des Codes von Gestalten, so können wir leicht berechnen dieses.Volumen mit dem vererbten Bereich Eigentum.schreien () überschreibt die Implementierung der Basisklasse und eine neue Methode superShout () ruft die Basisklasse direkt auf schreien () Methode mit der Super Stichwort.Mit nur wenigen zusätzlichen Codezeilen können Sie eine Basisklasse einfach erweitern, um spezifischere Funktionen hinzuzufügen und unsere Absicht durch TypeScript bekannt zu machen.
Trotz des extrem jungen Alters von TypeScript finden Sie viele nützliche Ressourcen in der Sprache des Internets (einschließlich eines vollständigen Kurses, der zu Tuts + Premium kommt!). Achten Sie darauf, diese zu überprüfen:
TypeScript unterstützt Klassen und deren Implementierung folgt stark dem Vorschlag von ECMAScript 6.
Das Testen von TypeScript ist einfach. Wenn Sie einen statisch typisierten Ansatz für große Anwendungen bevorzugen, erzwingen die Features von TypeScript eine vertraute, disziplinierte Umgebung. Obwohl es mit CoffeeScript oder Dart verglichen wurde, unterscheidet sich TypeScript dadurch, dass es JavaScript nicht ersetzt. es fügt JavaScript Funktionen hinzu.
Wir haben noch nicht gesehen, wie sich TypeScript weiterentwickeln wird, aber Microsoft hat erklärt, dass es seine vielen Funktionen (Typanmerkungen) mit ECMAScript 6 in Einklang bringen wird. Wenn Sie also viele der neuen ES6-Funktionen ausprobieren möchten, ist TypeScript die ideale Lösung eine ausgezeichnete Möglichkeit, dies zu tun! Los, probieren Sie es aus!
