Cyber Monday Sale 40% off unlimited courses & creative assets! 40% off unlimited assets! Save Now
Advertisement
  1. Code
  2. TypeScript

TypeScript für Anfänger, Teil 2: Grundlegende Datentypen

by
Read Time:11 minsLanguages:
This post is part of a series called TypeScript for Beginners.
TypeScript for Beginners, Part 1: Getting Started
TypeScript for Beginners, Part 3: Interfaces

German (Deutsch) translation by Federicco Ancie (you can also view the original English article)

Nachdem Sie das einführende TypeScript-Tutorial gelesen haben, sollten Sie nun in der Lage sein, Ihren eigenen TypeScript-Code in eine IDE zu schreiben, die ihn unterstützt, und ihn dann in JavaScript zu kompilieren. In diesem Tutorial lernen Sie verschiedene Arten von Datentypen kennen, die in TypeScript verfügbar sind.

JavaScript verfügt über sieben verschiedene Datentypen: Null, Undefiniert, Boolesch, Zahl, Zeichenfolge, Symbol (in ES6 eingeführt) und Objekt. TypeScript definiert einige weitere Typen, die in diesem Lernprogramm ausführlich behandelt werden.

Der Null-Datentyp/Nullwert

Genau wie in JavaScript kann der Nulldatentyp in TypeScript nur einen gültigen Wert haben: null. Eine Nullvariable kann keine anderen Datentypen wie Zahl und Zeichenfolge enthalten. Wenn Sie eine Variable auf null setzen, wird ihr Inhalt gelöscht, falls vorhanden.

Denken Sie daran, dass, wenn das Flag strictNullChecks in tsconfig.json auf true gesetzt ist, Variablen mit dem Typ null nur der Wert null zugewiesen werden kann. Dieses Flag ist standardmäßig deaktiviert. Dies bedeutet, dass Sie den Nullwert auch Variablen mit anderen Typen wie number oder void zuweisen können.

Der undefinierte Datentyp

Jede Variable, deren Wert Sie nicht angegeben haben, wird auf undefined gesetzt. Sie können den Typ einer Variablen jedoch auch explizit auf undefiniert setzen, wie im folgenden Beispiel.

Beachten Sie, dass eine Variable mit dem type undefined nur undefined als Wert haben kann. Wenn die Option strictNullChecks auf false gesetzt ist, können Sie auch Variablen mit Zahlen- und Zeichenfolgentypen usw. undefined zuweisen.

Der Void-Datentyp

Der void-Datentyp wird verwendet, um das Fehlen eines type für eine Variable anzuzeigen. Das Festlegen von Variablen für einen ungültigen Typ ist möglicherweise void sehr nützlich, aber Sie können den Rückgabetyp von Funktionen festlegen, die nichts an void zurückgeben. Bei Verwendung mit Variablen kann der Typ void nur zwei gültige Werte haben: null und undefined.

Der boolesche Datentyp

Im Gegensatz zu den Datentypen number und string hat boolean nur zwei gültige Werte. Sie können den Wert nur auf true oder false setzen. Diese Werte werden häufig in Kontrollstrukturen verwendet, in denen ein Codeteil ausgeführt wird, wenn eine Bedingung true ist, und ein anderes Codeteil ausgeführt wird, wenn eine Bedingung false ist.

Hier ist ein sehr einfaches Beispiel für die Deklaration von Booleschen Variablen:

Der Nummer-Datentyp

Der Datentyp number wird verwendet, um sowohl Ganzzahlen als auch Gleitkommawerte in JavaScript und TypeScript darzustellen. Beachten Sie jedoch, dass alle Zahlen intern als Gleitkommawerte dargestellt werden. Zahlen können auch als hexadezimale, oktale oder binäre Literale angegeben werden. Beachten Sie, dass in ES6 Oktal- und Binärdarstellungen eingeführt wurden. Dies kann je nach der Version, auf die Sie abzielen, zu unterschiedlichen JavaScript-Code-Ausgaben führen.

Es gibt auch drei zusätzliche spezielle symbolische Werte, die unter den number typ fallen: +Infinity, -Infinity und NaN. Hier einige Beispiele für die Verwendung des number typs.

Wenn die Zielversion auf ES6 eingestellt ist, wird der obige Code mit dem folgenden JavaScript kompiliert:

Sie sollten beachten, dass die JavaScript-Variablen weiterhin mit let deklariert werden, das in ES6 eingeführt wurde. Sie sehen auch keine Fehlermeldungen in Bezug auf den type der verschiedenen Variablen, da der JavaScript-Code keine Kenntnis von den Typen hat, die wir im TypeScript-Code verwendet haben.

Wenn die Zielversion auf ES5 eingestellt ist, wird der zuvor geschriebene TypeScript-Code in folgendes JavaScript kompiliert:

Wie Sie sehen können, wurden diesmal alle Vorkommen des Schlüsselworts let in var geändert. Beachten Sie auch, dass die Oktal- und Binärzahlen in ihre Dezimalform geändert wurden.

Der String-Datentyp

Der Zeichenfolgendatentyp wird zum Speichern von Textinformationen verwendet. Sowohl JavaScript als auch TypeScript verwenden doppelte Anführungszeichen (") sowie einfache Anführungszeichen ('), um Ihre Textinformationen als Zeichenfolge zu umgeben. Eine Zeichenfolge kann null oder mehr Zeichen in Anführungszeichen enthalten.

TypeScript unterstützt auch Vorlagenzeichenfolgen oder Vorlagenliterale. Mit diesen Vorlagenliteralen können Sie Ausdrücke in eine Zeichenfolge einbetten. Vorlagenliterale werden durch das Back-Tick-Zeichen (`) anstelle von doppelten Anführungszeichen und einfachen Anführungszeichen eingeschlossen, die reguläre Zeichenfolgen einschließen. Sie wurden in ES6 eingeführt. Dies bedeutet, dass Sie je nach der Version, auf die Sie abzielen, unterschiedliche JavaScript-Ausgaben erhalten. Hier ist ein Beispiel für die Verwendung von Vorlagenliteralen in TypeScript:

Nach der Kompilierung erhalten Sie folgendes JavaScript:

Wie Sie sehen können, wurde das Vorlagenliteral in ES5 in eine reguläre Zeichenfolge geändert. Dieses Beispiel zeigt, wie TypeScript es Ihnen ermöglicht, die neuesten JavaScript-Funktionen zu verwenden, ohne sich um die Kompatibilität sorgen zu müssen.

Die Array- und Tupel-Datentypen

Sie können Array-Typen in JavaScript auf zwei verschiedene Arten definieren. In der ersten Methode geben Sie den Typ der Array-Elemente an, gefolgt von [], das ein Array dieses Typs bezeichnet. Eine andere Methode ist die Verwendung des generischen Array-Typs Array<elemType>. Das folgende Beispiel zeigt, wie Sie mit beiden Methoden Arrays erstellen. Die Angabe von null oder undefinied als eines der Elemente führt zu Fehlern, wenn das Flag strictNullChecks true ist.

Mit dem Tupel-Datentyp können Sie ein Array erstellen, bei dem der Typ einer festen Anzahl von Elementen im Voraus bekannt ist. Der Typ der restlichen Elemente kann nur einer der Typen sein, die Sie bereits für das Tupel angegeben haben. Hier ist ein Beispiel, das es klarer macht:

Für alle Tupel in unserem Beispiel haben wir den type des ersten Elements auf eine number und den type des zweiten Elements auf eine string festgelegt. Da wir nur einen type für die ersten beiden Elemente angegeben haben, kann der Rest entweder eine Zeichenfolge oder eine Zahl sein. Das Erstellen der Tupel b und c führt zu einem Fehler, da wir versucht haben, eine Zeichenfolge als Wert für das erste Element zu verwenden, als wir erwähnt hatten, dass das erste Element eine Zahl sein würde.

Ebenso können wir den Wert eines Tupelelements nicht auf false setzen, nachdem angegeben wurde, dass es nur Zeichenfolgen und Zahlen enthält. Deshalb führt die letzte Zeile zu einem Fehler.

Der Enum-Datentyp

Der Datentyp enum ist in vielen Programmiersprachen wie C und Java vorhanden. Es fehlte in JavaScript, aber mit TypeScript können Sie Aufzählungen erstellen und damit arbeiten. Wenn Sie nicht wissen, was enums sind, können Sie eine Sammlung verwandter Werte mit einprägsamen Namen erstellen.

Standardmäßig beginnt die Nummerierung der Aufzählungen bei 0, Sie können jedoch auch manuell einen anderen Wert für das erste oder ein anderes Mitglied festlegen. Dadurch wird der Wert aller ihnen folgenden Mitglieder geändert, indem ihr Wert um 1 erhöht wird. Sie können alle Werte auch manuell in einer enum festlegen.

Im Gegensatz zum vorherigen Beispiel ist der Wert von Animals[3] diesmal undefined. Dies liegt daran, dass der Wert 3 dem Hund zugewiesen worden wäre, aber wir setzen seinen Wert explizit auf 11. Der Wert für Kuh bleibt bei 12 und nicht bei 3, da der Wert um eins größer sein soll als der Wert des letzten Mitglieds.

Die Any and Never-Typen

Angenommen, Sie schreiben ein Programm, bei dem der Wert einer Variablen von den Benutzern oder dem in einer Bibliothek eines Drittanbieters geschriebenen Code bestimmt wird. In diesem Fall können Sie den Typ dieser Variablen nicht richtig einstellen. Die Variable kann von einem beliebigen Typ wie einer Zeichenfolge, einer Zahl oder einem Booleschen Wert sein. Dieses Problem kann mit einem any Typ gelöst werden. Dies ist auch nützlich, wenn Sie Arrays mit Elementen gemischter Typen erstellen.

Im obigen Code konnten wir b eine Zahl zuweisen und dann ihren Wert ohne Fehler in eine Zeichenfolge ändern, da der Typ any alle Arten von Werten akzeptieren kann.

Der Typ never wird verwendet, um Werte darzustellen, die niemals auftreten sollen. Beispielsweise können Sie nie als Rückgabetyp einer Funktion zuweisen, die never zurückgibt. Dies kann passieren, wenn eine Funktion immer einen Fehler auslöst oder wenn sie in einer Endlosschleife steckt.

Abschließende Gedanken

Dieses Tutorial führte Sie in alle Typen ein, die in TypeScript verfügbar sind. Wir haben gelernt, wie das Zuweisen eines anderen Werttyps zu einer Variablen Fehler in TypeScript anzeigt. Diese Überprüfung kann Ihnen helfen, viele Fehler beim Schreiben großer Programme zu vermeiden. Wir haben auch gelernt, wie man verschiedene Versionen von JavaScript anvisiert.

Wenn Sie nach zusätzlichen Ressourcen suchen, die Sie studieren oder für Ihre Arbeit verwenden können, lesen Sie, was wir auf dem Envato-Marktplatz zur Verfügung haben.

Im nächsten Tutorial erfahren Sie mehr über Schnittstellen in TypeScript. Wenn Sie Fragen zu diesem Tutorial haben, lassen Sie es mich in den Kommentaren wissen.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.