Typscript für Anfänger, Teil 1: Erste Schritte

Beginnen wir dieses Tutorial mit der Frage: "Was ist TypeScript?"

TypeScript ist ein typisiertes Superet von JavaScript, das mit Plain JavaScript kompiliert. Als Analogie wäre Typscript, wenn JavaScript CSS wäre, SCSS.

Alle gültigen JavaScript -Code, den Sie schreiben, ist auch ein gültiger TypeScript -Code. Mit TypeScript können Sie jedoch statische Tipps und die neuesten Funktionen verwenden, die in Plain JavaScript zusammengestellt werden, das von allen Browsern unterstützt wird. TypeScript zielt darauf ab, das Problem zu lösen, JavaScript skalierbar zu machen, und es macht einen ziemlich guten Job.

In diesem Tutorial lesen Sie zunächst die verschiedenen Funktionen von Typenkript und warum es eine gute Idee ist. Der Rest der Abschnitte im Artikel wird die Installation und Kompilierung von TypeScript zusammen mit einigen beliebten Texteditoren abdecken, die Ihnen Unterstützung für die Typscript -Syntax und andere wichtige Funktionen bieten.

Warum brauchen wir TypeScript?

Wir verwenden Programmiersprachen, um Computer anzuweisen, wie wir etwas tun sollen. Sie fungieren im Grunde genommen als Kommunikationsmedium. Computer verstehen jedoch nicht direkt den von uns geschriebenen JavaScript-, PHP- oder Python -Code. Der gesamte von uns geschriebene menschlich lesbare Code wird letztendlich in den Maschinencode konvertiert, den die Computer ausführen und verstehen können.

Moderne Programmiersprachen werden unter Berücksichtigung des Programmierers geschrieben. Dies bedeutet, dass verschiedene Programmiersprachen aufgrund der Art und Weise, wie sie verwendet werden sollen, mit unterschiedlichen Funktionssätzen entwickelt werden. JavaScript wurde geschrieben, um es sehr einfach zu machen, Dinge zu erledigen, indem eine minimale Menge an Code geschrieben wurde.

JavaScript ist seit seinen frühen Tagen viel beliebter geworden und wird heute für kleine und groß angelegte Projekte verwendet. Einige Einschränkungen von JavaScript, die beim Schreiben kleiner Programme akzeptabel waren, können die Produktivität bei großer Projekte mit vielen Teammitgliedern behindern.

TypeScript wurde erstellt, um diese Einschränkungen zu beheben, indem eine Vielzahl von Funktionen wie Typ-Überprüfungen hinzugefügt wird, um Ihnen dabei zu helfen, Fehler zu erfassen, die möglicherweise bei Änderungen des Code in groß angelegten Projekten auftreten.

Warum TypeScript lernen?

Wenn Sie Typenkript noch nie verwendet haben, fragen Sie sich möglicherweise, warum Sie sich darum kümmern sollten, es überhaupt zu lernen, wenn es am Ende zu JavaScript kompiliert.

Lassen Sie mich Ihnen versichern, dass Sie nicht viel Zeit damit verbringen müssen, Typenkript zu lernen. Sowohl TypeScript als auch JavaScript haben eine sehr ähnliche Syntax, und Sie können Ihr CONT-Schlüsselwort einfach umbenennen, um festzustellen, dass wir Änderungen des Wertes dieser Variablen durch Neuzuweisung oder der Neuanschlüsselung verhindern möchten. Dies bedeutet jedoch nicht, dass der Wert der Variablen unveränderlich ist. Es gibt noch andere Möglichkeiten, es zu ändern. Hier ist ein Beispiel:

 const fruits = ["Äpfel", "Mangos", "Bananen"];<br> const megetables = ["Kartoffeln", "Zwiebeln", "Gurken"];<br><br> fruits.push ("orange");<br> // ["Äpfel", "Mangos", "Bananen", "Orange"]<br><br> Früchte [0] = "Papayas";<br> // ["Papayas", "Mangos", "Bananen", "Orange"]<br><br> Früchte = Gemüse // Fehler<br>

Bis zur letzten Zeile ist der obige Code perfekt gültig JavaScript und wirft keine Fehler aus. Wir haben als Wert undefiniert erklärt. Dieser Ansatz ist sinnvoll, da wir die Eigenschaften eines Objekts dynamisch hinzufügen, entfernen oder aktualisieren können. Es kann jedoch auch eine Quelle von Fehlern oder unerwartetem Verhalten sein. Hier ist ein Beispiel:

 lass guy = {<br> Name: 'Mario',<br> Alter: 56<br> }<br><br> console.log (Guy.Name 'ist' Guy.Ahe 'Jahre alt.');<br> // Mario ist undefiniert Jahre alt.<br>

Die Besiedlung von AHE wird nicht als Fehler in JavaScript angesehen, wäre jedoch in Typenkript gefangen gewesen. Versuchen Sie, den obigen Code von TypeScript zu JavaScript zu kompilieren, und Sie werden einen Fehler über das Perimetertriangle () sehen. Dies führt dazu, dass ein unsinniger Wert als Umfang unseres Dreiecks ausgegeben wird.

 Funktion Perimetertriangle (a, b, c) {<br> console.log (`Perimeter des Dreiecks ist: $ {abc}`);<br> }<br><br> Perimetertriangle (20, 30, "Kartoffel");<br> // Umfang des Dreiecks ist: 50potato<br><br> Perimetertriangle ("Kartoffel", 10);<br> // Umfang des Dreiecks ist: potato10undediniert<br><br> Perimetertriangle ();<br> // Umfang des Dreiecks ist: Nan<br><br> Perimetertriangle (20, 30, 50);<br> // Umfang des Dreiecks ist: 100<br>

Auch wenn Sie keine Änderungen am obigen Code vornehmen und versuchen, ihn von TypeScript in JavaScript zu kompilieren, erhalten Sie aufgrund einer Nichtübereinstimmung in der Anzahl der angegebenen Argumente trotzdem Fehler mit den Aufrufen der zweiten und dritten Funktion. Wir können jedoch unsere Funktionsdefinition mehr Informationen hinzufügen, indem wir die Art der Argumente angeben, die wir erwarten, dass die Funktion perimeterTriangle() akzeptiert wird.

 Funktion Perimetertriangle (A: Nummer, b: Nummer, c: number) {<br> console.log (`Perimeter des Dreiecks ist: $ {abc}`);<br> }<br><br> Perimetertriangle (20, 30, "Kartoffel");<br> // Fehler: Argument der Typ -Zeichenfolge, die nicht zugewiesen werden kann.<br><br> Perimetertriangle ("Kartoffel", 10);<br> // Fehler: Erwartete drei Argumente, aber 2.<br><br> Perimetertriangle ();<br> // Fehler: Erwartete drei Argumente, aber 0 erhielt.<br><br> Perimetertriangle (20, 30, 50);<br> // Umfang des Dreiecks beträgt 100.<br>

Jetzt wirft auch der erste Funktionsaufruf einen Fehler aufgrund der Nichtübereinstimmung im Argumentyp aus. TypeScript hilft Ihnen dabei, viele solche Fehler zu fangen und auf lange Sicht viel Zeit zu sparen.

Kompilieren Sie Typenkript in JavaScript

Angenommen, Sie haben einen TypeScript -Code in einer .ts -Datei geschrieben. Browser können diesen Code nicht selbst ausführen. Sie müssen das Typenkript in einfaches JavaScript zusammenstellen, das von Browsern verstanden werden kann.

Wenn eine IDE verwendet wird, kann der Code in der IDE selbst mit JavaScript kompiliert werden. Mit Visual Studio können Sie beispielsweise den TypeScript -Code direkt in JavaScript kompilieren. Sie müssen eine tsconfig.json -Datei erstellen, in der Sie alle Konfigurationsoptionen für das Kompilieren Ihrer Typscript -Datei in JavaScript angeben.

Der anfängerfreundlichste Ansatz, wenn Sie nicht an einem großen Projekt arbeiten, ist die Verwendung des Terminals selbst. Zuerst müssen Sie zum Speicherort der Typscript -Datei im Terminal übergehen und dann den folgenden Befehl ausführen.

 tsc first.ts<br>

Dadurch wird eine neue Datei namens First.js am selben Ort erstellt. Denken Sie daran, dass wenn Sie bereits eine Datei namens First.js hätten, sie überschrieben werden.

Wenn Sie alle Dateien im aktuellen Verzeichnis kompilieren möchten, können Sie dies mit Hilfe von Wildcards tun. Denken Sie daran, dass dies nicht rekursiv funktioniert.

 tsc *.ts<br>

Schließlich können Sie nur einige bestimmte Dateien kompilieren, indem Sie ihre Namen explizit in einer einzigen Zeile bereitstellen. In solchen Fällen werden JavaScript -Dateien mit entsprechenden Dateinamen erstellt.

 tsc first.ts product.ts bot.ts<br>

Schauen wir uns das folgende Programm an, das zwei Zahlen in TypeScript multipliziert.

 Sei a: number = 12;<br> Sei B: Nummer = 17;<br><br> FunktionshowProduct (zuerst: Nummer, zweite: Nummer): void {<br> console.log ("Das Produkt ist:" Erst * zweitens);<br> }<br><br> showProduct (a, b);<br>

Der obige TypeScript -Code wird in den folgenden JavaScript -Code kompiliert, wenn die gezielte Version auf ES6 festgelegt wird. Beachten Sie, wie alle Typinformationen, die Sie in TypeScript angegeben haben, jetzt nach der Zusammenstellung verschwunden sind. Mit anderen Worten, der Code wird in JavaScript zusammengestellt, das vom Browser verstanden werden kann, aber Sie können die Entwicklung in einer viel besseren Umgebung durchführen, die Ihnen helfen kann, viele Fehler zu fangen.

 Sei a = 12;<br> sei B = 17;<br> FunktionshowProduct (zuerst, zweite) {<br> console.log ("Das Produkt ist:" Erst * zweitens);<br> }<br> showProduct (a, b);<br>

Im obigen Code haben wir den Typ der Variablen a und b als Zahlen angegeben. Wenn Sie später versuchen, den Wert von b auf eine Zeichenfolge wie "Apple" festzulegen, zeigt TypeScript einen Fehler, dass "Apple" der number nicht zugeordnet werden kann. Ihr Code wird weiterhin zu JavaScript kompilieren, aber in dieser Fehlermeldung werden Sie wissen, dass Sie einen Fehler gemacht haben und Ihnen helfen, ein Problem während der Laufzeit zu vermeiden.

Hier ist ein Screenshot, der die Fehlermeldung im Visual Studio -Code anzeigt:

Das obige Beispiel zeigt, wie TypeScript Ihnen immer wieder Hinweise auf mögliche Fehler im Code gibt. Dies war ein sehr grundlegendes Beispiel, aber wenn Sie sehr große Programme erstellen, können Sie wie diese Ihnen dabei helfen, robusten Code mit weniger Fehlerwahrscheinlichkeit zu schreiben.

Letzte Gedanken

In diesem Tutorial in der Serie wurde Ihnen ein sehr kurzer Überblick über verschiedene Typenkriptfunktionen und die Installation der Sprache zusammen mit einigen Vorschlägen für IDEs und Texteditoren erhalten, die Sie für die Entwicklung verwenden können. Der nächste Abschnitt umfasste verschiedene Möglichkeiten zum Kompilieren Ihres TypsScript -Codes in JavaScript und zeigte Ihnen, wie TypeScript Ihnen helfen kann, einige häufige Fehler zu vermeiden.

Ich hoffe, Ihnen hat dieses Tutorial gefallen. Auf dem nächsten Tutorial der Serie werden verschiedene in Typenkript verfügbare Variablentypen erörtert.

Das obige ist der detaillierte Inhalt vonTypscript für Anfänger, Teil 1: Erste Schritte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!