Erste Schritte mit TypeScript
TypeScript gehört zu einer Gruppe von Sprachen, die das verwenden JavaScript Laufzeit als Ausführungsumgebung: .ts-Dateien, die TypeScript-Code enthalten, werden in normales JavaScript kompiliert, das dann vom Browser ausgeführt werden kann.
- Weihnachtsangebot: Sparen Sie bis zu 49% bei einem Abonnement des Web Designer Magazins
Jeremy Ashkenas machte dieses Konzept zuerst mit seiner CoffeeScript-Sprache populär, aber leider war seine relativ knappe Syntax für Entwickler, die mit C # oder Visual Basic vertraut sind, schwer zu erlernen.
Als Microsoft in Web 2.0-Technologien expandierte, ließ es sich von Jeremy Ashkenas inspirieren. Dank der Funktionen von Visual Studio können Entwickler einfach weghacken und von den verschiedenen Spracherweiterungen profitieren.
TypeScript ist nicht nur auf statische Typisierung beschränkt, sondern bietet auch eine Reihe erweiterter Funktionen, mit denen Sie objektorientierte Programmierparadigmen im Web simulieren können. Diese kurze Anleitung führt Sie durch einige der wichtigsten Funktionen. Wenn die Sprache Sie anspricht, können Sie weitere Informationen im Handumdrehen erlernen.
01. Installieren Sie Visual Studio
Obwohl TypeScript auch unter Linux oder MacOS verwendet werden kann, bleiben wir bei der offiziellen IDE von Microsoft. Laden Sie die kostenlose Community-Edition von Visual Studio 2017 von herunter Microsoft, hier und stellen Sie sicher, dass Sie die ASP.NET-Nutzdaten während der Bereitstellung markieren.
02. Fügen Sie das SDK hinzu
Aufgrund der schnellen Trittfrequenz von TypeScript muss Visual Studio um ein SDK-Modul erweitert werden, das von heruntergeladen werden kann die Microsoft-Site hier . Führen Sie das Installationsprogramm einfach so aus, als wäre es eine Standard-Windows-Anwendung.
03. Laden Sie TypeScript herunter
Es wäre nicht Microsoft, wenn es keinen zusätzlichen Aufwand gäbe: Während das SDK Ihre Visual Studio-Installation aktualisiert, wird der eigentliche TSC-Compiler nicht zu Ihrer Befehlszeile hinzugefügt. Dieses Problem lässt sich am besten mit dem npm-Paketmanager von Node.j in der Befehlszeile lösen.
PS C: Benutzer tamha Downloads> npm install -g Typoskript
C: Benutzer tamha AppData Roaming npm tsc -> C: Benutzer tamha AppData Roaming npm Knotenmodule Typoskript bin tsc
C: Benutzer tamha AppData Roaming npm tsserver -> C: Benutzer tamha AppData Roaming npm Knotenmodule Typoskript bin tsserver
C: Benutzer tamha AppData Roaming npm
`- typescript@2.4.2
04. Brechen Sie aus dem Projekt aus
Visual Studio erwartet, in einem lösungsorientierten Prozess zu arbeiten: Obwohl dies interessant ist, ist dies für unsere Anforderungen nicht ideal. Erstellen Sie stattdessen eine Datei mit dem Namen worker.ts und platzieren Sie sie an einem geeigneten Ort in Ihrem Dateisystem. Öffnen Sie es, indem Sie es in Visual Studio ziehen, und legen Sie es oben in der Symbolleiste ab. Ändern Sie als Nächstes den Inhalt so, dass er den folgenden Code enthält:
function sayOi() { alert('Oi!'); } sayOi();05. Erstellen Sie einen Einstiegspunkt
Wie in der Einleitung erwähnt, kann eine .ts-Datei allein nicht viel bewirken. Erstellen Sie daher eine Datei mit dem Namen index.html, die sich im selben Ordner befinden muss. Fügen Sie als Nächstes den zu diesem Schritt angezeigten Skelettcode hinzu. Es lädt die Ausgabe des Compilers und führt sie so aus, als wäre es ein anderes Stück JavaScript.
06. Kompilieren und ausführen
Der nächste Schritt umfasst das manuelle Neukompilieren der .ts-Datei. Öffnen Sie PowerShell und geben Sie den Befehl tsc gefolgt vom Namen der Eingabedatei ein. Standardmäßig teilt die Ausgabedatei den Basisdateinamen, hat jedoch die Erweiterung .js anstelle von .ts. Öffnen Sie abschließend die Datei index.html in einem Browser Ihrer Wahl, um das Erscheinungsbild des Meldungsfelds zu überprüfen.
PS C:Users amhaDownloads> tsc .worker.ts07. Lass dich tippen
Bisher hat TypeScript kaum mehr getan, als als komplexere JavaScript-Umgebung zu fungieren. Im nächsten Schritt wird die Unterstützung für die statische Typisierung aktiviert: Der Compiler kann eine statische Analyse der Parameter durchführen und dabei ungültige Werte ausschließen. Hierzu wird eine Reihe von Typen benötigt - Grundtypen sind in der obigen Tabelle aufgeführt, während Klassen später erläutert werden.
08. Probieren Sie es aus
Zuweisungen von TypeScript-Variablentypen erfolgen über 'a:' nach dem Variablennamen. Lassen Sie uns unsere Oi-Funktion so ändern, dass sie eine Zahl annimmt, und stattdessen eine Zeichenfolge übergeben. Rufen Sie zum Schluss den TSC-Compiler noch einmal auf, um die Fehlermeldung im obigen Screenshot zu sehen. Visual Studio hebt übrigens auch die betreffende Zeile hervor.
function sayOi(whatToSay: number) { alert(whatToSay); } sayOi('Hello');09. Vermeiden Sie den Prototyp
JavaScript implementiert die Objektorientierung über Prototyping: ein Codestil, der in der .NET- und C / C ++ - Welt ungewöhnlich ist. TypeScript löst dieses Problem, indem es die Erstellung von Klassen ermöglicht - ein Prozess, der im Snippet zu diesem Schritt gezeigt wird.
class Imagine { public myResult: number; public myA: number; public myB: number; constructor(_a: number, _b: number) { this.myResult = _a + _b; this.myA = _a; } }10. Schätzen Sie die Öffentlichkeit
Normalerweise wird das öffentliche Attribut verwendet, um zu deklarieren, dass ein Element eines Programms von außen zugänglich sein soll. Bei Verwendung als Konstruktorparameter wird der TypeScript-Compiler stattdessen angewiesen, lokale Felder mit denselben Namen zu erstellen.
class Imagine { public myResult: number; //public myA: number; constructor(public myA: number, public _b: number) { this.myResult = myA + _b; this.myA = myA; } }11. Methode und Instanz
Erweitern wir unsere Beispielklasse, indem wir ihr eine Methode zur Verfügung stellen, die auf die in myResult und myA gespeicherten Werte zugreift und diese auf dem Bildschirm ausgibt. Schließlich wird der neue Parameter verwendet, um eine Instanz der Klasse zu erstellen - er wird zum Aufrufen der Methode verwendet.
class Imagine { public myResult: number; . . . public saySomething(): void { alert(this.myResult); } } let myImagine: Imagine = new Imagine(2, 2); myImagine.saySomething();12. Verwenden Sie seine magischen Eigenschaften
Das Sprachdesign von TypeScript soll Entwicklern so viel Aufwand wie möglich ersparen. Eine nette Funktion ist die automatische Auffüllung von Parametern, die mit der gezeigten Verknüpfung erstellt wurden.
class Imagine { public myResult: number; constructor(public myA: number, public myB: number) { this.myResult = myA + myB; } public saySomething(): void { alert(this.myA + “ “ + this.myB); } }13. Vererbung durchführen
Einer der Grundpfeiler der objektorientierten Programmierung besteht darin, Klassen aufeinander aufzubauen. Abgeleitete Klassen können dann den Inhalt ihrer Basisklasse überschreiben, was zu flexibel anpassbaren Klassenhierarchien führt.
class Future extends Imagine { public saySomething(): void { console.log(this.myA); } }14. Analysieren Sie das Überschreiben
Das Code-Snippet von oben erweiterte die Imagine-Klasse um ein Unterelement namens Future. Future unterscheidet sich von Imagine dadurch, dass die weiterentwickelte Methode saySomething eine Nachricht in die Befehlszeile des Browsers sendet.
let myImagine: Imagine = new Future(2, 2); myImagine.saySomething(); let myFuture: Future = new Future(9, 9); myFuture.saySomething();15. Analysieren Sie das Überschreiben, Redux
Damit kann der eigentliche Code getestet werden. Beim Ausführen enthält die Browserkonsole zwei Aufrufe von Future - die erweiterte Klasse behält ihre Eigenschaften auch dann bei, wenn sie als Imagine-Objekt aufgerufen wird.
16. Eingeschränkter Zugriff
Das Offenlegen von Mitgliedsvariablen mit dem Modifikator public ist unbeliebt: Es nimmt schließlich die meiste Kontrolle darüber, was Benutzer mit dem Inhalt der Variablen tun. Mit TypeScript-Accessoren können Sie dieses Problem auf ähnliche Weise wie bei herkömmlichem OOP umgehen. Beachten Sie, dass schreibgeschützte Mitglieder ebenfalls unterstützt werden, die Verwendung dieser Funktion jedoch die Aktivierung der ECMAScript5-Unterstützung erfordert.
public _myCache: string; get fullCache(): string { return this._myCache; } set fullCache(newX: string) { if (newX == 'hello') { this._myCache = newX; } else { console.log('Wrong data!'); } }17. Machen Sie es abstrakt
Die Fähigkeit, komplexe Vererbungshierarchien zu erstellen, motiviert Entwickler, ihr Glück in abstrakten Klassen zu versuchen. TypeScript hat Sie auch in dieser Hinsicht behandelt - das Beispiel, das diesen Schritt begleitet, erstellt eine Klasse mit einem abstrakten und einem realen Mitglied. Der Versuch, die abstrakte Klasse direkt zu instanziieren, führt direkt zu einem Compilerfehler.
abstract class Imagine { public myResult: number; abstract sayName(): void; constructor(public myA: number, public myB: number) { this.myResult = myA + myB; } public saySomething(): void { alert(this.myA + ' ' + this.myB); } } class Future extends Imagine { . . . public sayName() { console.log('Hello'); } }18. Erstellen Sie eine Schnittstelle
Wenn Objektstrukturen komplexer werden, sehen sich Entwickler häufig Situationen gegenüber, in denen eine Klasse mehrere Logikbits implementiert. In diesem Fall sorgt eine Schnittstelle für eine gute Problemumgehung - das Beispiel zeigt, was Sie erwartet.
interface DataInterface { field: number; workerMethod(): void; }19. Implementieren Sie es
Wie im Fall der obigen Klasse nützt uns eine Schnittstelle nichts, wenn wir sie nicht verwenden können. Glücklicherweise ist die Implementierung nicht besonders schwierig: Beachten Sie, dass Interface-Autoren außerdem Teile ihrer Erstellung als optional deklarieren können.
class Worker implements DataInterface { field: number; workerMethod(): void { throw new Error('Method not implemented.'); } }20. Verwenden Sie eine generische Klasse
Der TypeScript-Compiler erzwingt eine strikte Überprüfung der Variablengültigkeit. Wenn Sie an einer Speicherklasse arbeiten, können Sie mit Generika den Endbenutzer den Typ bestimmen lassen, der behandelt werden soll. Darüber hinaus erlaubt TypeScript auch andere generische Elemente wie Funktionen, wie im (tautologischen) Snippet aus der Dokumentation gezeigt.
//Generic function function identity(arg: number): number { return arg; } //Generic class class GenericNumber { zeroValue: T; add: (x: T, y: T) => T; }21. Eine Frage der Aufzählung
Zustandsautomaten und ähnliche Elemente profitieren stark von der Möglichkeit, eine Variable auf das Speichern einiger genau definierter Zustände zu beschränken. Dies kann mit dem Datentyp Enum erreicht werden:
enum ParserState { Idle = 1, Read0, Read1 } class Imagine { public myState: ParserState; constructor(public myA: number, public myB: number) { this.myState = ParserState.Idle;22. Erfahren Sie mehr
Es ist fast unmöglich, eine so komplexe Sprache wie TypeScript in einem einzigen Artikel zu behandeln. Schaue auf die Beispiele für TypeScript-Sites um mehr über Sprachbindungen zu erfahren.
Dieser Artikel wurde ursprünglich in Ausgabe 266 veröffentlicht Webdesigner , das kreative Webdesign-Magazin, das Experten-Tutorials, aktuelle Trends und kostenlose Ressourcen bietet. Ausgabe 266 hier kaufen oder Abonnieren Sie hier den Web Designer .
Spezielles Weihnachtsangebot: Sparen Sie bis zu 49% bei einem Abonnement für Web Designer für dich oder einen Freund zu Weihnachten. Es ist ein begrenztes Angebot, also bewegen Sie sich schnell ...
Zum Thema passende Artikel:
- 20 JavaScript-Tools, die Sie umhauen werden
- Erfahren Sie, wie Sie Ihr JavaScript zugänglich machen
- 12 häufig gestellte JavaScript-Fragen beantwortet
