Share
Nachdem Sie das einführende Tutorial zu TypeScript gelesen haben, sollten Sie jetzt in der Lage sein, eigenen TypeScript-Code in eine IDE zu schreiben, die ihn unterstützt, und dann in JavaScript kompilieren. In diesem Lernprogramm erfahren Sie, welche Arten von Datentypen in TypeScript verfügbar sind.
JavaScript verfügt über sieben verschiedene Datentypen: Null, Undefined, Boolean, Number, String, Symbol (eingeführt in ES6) und Object. TypeScript definiert einige weitere Typen und alle werden in diesem Tutorial ausführlich behandelt.
Genau wie in JavaScript Null Datentyp in TypeScript kann nur einen gültigen Wert haben: Null. Eine Nullvariable darf keine anderen Datentypen wie number und string enthalten. Wenn Sie eine Variable auf null setzen, wird der Inhalt gelöscht, falls vorhanden.
Denken Sie daran, wenn die strictNullChecks Flag ist auf gesetzt wahr im tsconfig.json, Variablen mit dem Typ null können nur der Wert null zugewiesen werden. Dieses Flag ist standardmäßig deaktiviert. Das bedeutet, dass Sie den Nullwert auch Variablen mit anderen Typen zuweisen können Nummer oder Leere.
// Wenn strictNullChecks auf true gesetzt ist, lassen Sie a: null = null; // Ok lass b: undefined = null; // Fehler let c: number = null; // Fehler let d: void = null; // Fehler // Wenn strictNullChecks auf false gesetzt ist, lassen Sie a: null = null; // Ok lass b: undefined = null; // Ok, lassen Sie c: number = null; // Ok lass d: void = null sein; // OK
Jede Variable, deren Wert Sie nicht angegeben haben, ist auf festgelegt nicht definiert. Sie können den Typ einer Variablen jedoch auch explizit auf undefined setzen, wie im folgenden Beispiel.
Denken Sie daran, dass eine Variable mit Art einstellen nicht definiert kann nur undefined als Wert haben. Wenn die strictNullChecks Option ist auf gesetzt falsch, Sie können auch zuweisen nicht definiert auf Variablen mit Nummern- und Zeichenfolgentypen usw.
// Wenn strictNullChecks auf true gesetzt ist, lassen Sie a: undefined = undefined; // Ok lass b: undefined = null; // Fehler let c: number = undefined; // Fehler let d: void = undefined; // Ok // Wenn strictNullChecks auf false gesetzt ist, lassen Sie a: undefined = undefined; // Ok lass b: undefined = null; // Ok, lassen Sie c: number = undefined; // Ok lass d: void = undefined; // OK
Der void-Datentyp wird verwendet, um das Fehlen von a anzuzeigen Art für eine Variable. Variablen einstellen, damit a Leere type ist möglicherweise nicht sehr nützlich, aber Sie können den Rückgabetyp von Funktionen festlegen, für die nichts zurückgegeben wird Leere. Bei Verwendung mit Variablen der Typ Leere kann nur zwei gültige Werte haben: Null und nicht definiert.
// Wenn strictNullChecks auf true gesetzt ist, lassen Sie a: void = undefined; // Ok lass b: void = null; // Fehler let c: void = 3; // Fehler let d: void = "apple"; // Fehler // Wenn strictNullChecks auf false gesetzt ist, lassen Sie a: void = undefined; // Ok lass b: void = null; // Ok, lassen Sie c: void = 3; // Fehler let d: void = "apple"; // Error
nicht so wie Nummer und Schnur Datentypen, boolean hat nur zwei gültige Werte. Sie können den Wert nur auf einen der beiden Werte setzen wahr oder falsch. Diese Werte werden häufig in Kontrollstrukturen verwendet, in denen ein Code ausgeführt wird, wenn eine Bedingung erfüllt ist wahr und ein anderer Code wird ausgeführt, wenn eine Bedingung erfüllt ist falsch.
Hier ist ein sehr einfaches Beispiel für die Deklaration von booleschen Variablen:
sei ein: boolean = true; sei b: boolean = false; sei c: boolean = 23; // Fehler let d: boolean = "blue"; // Error
Das Nummer Der Datentyp wird verwendet, um sowohl Ganzzahlen als auch Gleitkommawerte in JavaScript sowie TypeScript darzustellen. Beachten Sie jedoch, dass alle Zahlen intern als Gleitkommawerte dargestellt werden. Zahlen können auch als Hexadezimal-, Oktal- oder Binär-Literale angegeben werden. Beachten Sie, dass Oktal- und Binärdarstellungen in ES6 eingeführt wurden. Dies kann zu unterschiedlichem JavaScript-Code führen, abhängig von der Version, auf die Sie abzielen.
Es gibt auch drei zusätzliche spezielle symbolische Werte, die unter der Nummer Art: +Unendlichkeit, -Unendlichkeit, und NaN. Hier sind einige Beispiele für die Verwendung von Nummer Art.
// Wenn strictNullChecks auf true gesetzt ist, lassen Sie a: number = undefined; // Fehler let b: number = null; // Fehler let c: number = 3; sei d: number = 0b111001; // Binär sei e: number = 0o436; // Oktal let f: number = 0xadf0d; // Hexadezimal lassen Sie g: number = "cat"; // Fehler // Wenn strictNullChecks auf false gesetzt ist, lassen Sie a: number = undefined; // Ok lass b: number = null; // Ok, lass c: number = 3; sei d: number = 0b111001; // Binär sei e: number = 0o436; // Oktal let f: number = 0xadf0d; // Hexadezimal lassen Sie g: number = "cat"; // Error
Wenn die Zielversion auf ES6 eingestellt ist, wird der obige Code in das folgende JavaScript übersetzt:
sei a = undefined; sei b = null; sei c = 3; sei d = 0b111001; sei e = 0o436; sei f = 0xadf0d; sei g = "cat";
Sie sollten beachten, dass die JavaScript-Variablen weiterhin mit deklariert werden Lassen, die in ES6 eingeführt wurde. Sie sehen auch keine Fehlermeldungen im Zusammenhang mit dem Art von verschiedenen Variablen, da der JavaScript-Code keine Kenntnis von den im TypeScript-Code verwendeten Typen hat.
Wenn die Zielversion auf ES5 eingestellt ist, wird der zuvor geschriebene TypeScript-Code mit folgendem JavaScript kompiliert:
var a = undefiniert; var b = null; var c = 3; var d = 57; var e = 286; var f = 0xadf0d; var g = "cat";
Wie Sie sehen können, sind diesmal alle Vorkommnisse des Lassen Schlüsselwort wurde in geändert var. Beachten Sie auch, dass die Oktal- und Binärzahlen in Dezimalzahlen geändert wurden.
Der String-Datentyp 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 enthalten, die in Anführungszeichen stehen.
// Wenn strictNullChecks auf true gesetzt ist, lassen Sie a: string = undefined; // Fehler let b: string = null; // Fehler let c: string = ""; sei d: string = "y"; lassen Sie e: string = "building"; sei f: string = 3; // Fehler let g: string = "3"; // Wenn strictNullChecks auf false gesetzt ist, lassen Sie a: string = undefined; // Ok lass b: string = null; // Ok let c: string = ""; sei d: string = "y"; lassen Sie e: string = "building"; sei f: string = 3; // Fehler let g: string = "3";
TypeScript unterstützt auch Vorlagenzeichenfolgen oder Vorlagenliterale. Diese Vorlagenliterale ermöglichen das Einbetten von Ausdrücken in eine Zeichenfolge. Vorlagenliterale werden vom Back-Tick-Zeichen eingeschlossen (') anstelle von Anführungszeichen und einfachen Anführungszeichen, die reguläre Zeichenfolgen einschließen. Sie wurden in ES6 eingeführt. Das bedeutet, dass Sie unterschiedliche JavaScript-Ausgaben basierend auf der Version erhalten, auf die Sie abzielen. Hier ist ein Beispiel für die Verwendung von Vorlagenliteralen in TypeScript:
lassen Sie e: string = "building"; sei f: number = 300; let satz: string = 'Das $ e vor meinem Büro ist $ f Meter groß.';
Beim Kompilieren erhalten Sie das folgende JavaScript:
// Ausgabe in ES5 var e = "building"; var f = 300; var satz = "Das" + e + "vor meinem Büro ist" + f + "Fuß groß."; // Ausgabe in ES6 let e = "building"; sei f = 300; let satz = 'Das $ e vor meinem Büro ist $ f Meter groß.';
Wie Sie sehen, wurde das Vorlagenliteral in ES5 in eine reguläre Zeichenfolge geändert. Dieses Beispiel zeigt, wie Sie mit TypeScript die neuesten JavaScript-Funktionen nutzen können, ohne sich über die Kompatibilität Gedanken machen zu müssen.
Sie können Array-Typen in JavaScript auf zwei verschiedene Arten definieren. Bei der ersten Methode geben Sie den Typ der Arrayelemente an, gefolgt von [] was ein Array dieses Typs bezeichnet. Eine andere Methode ist die Verwendung des generischen Array-Typs Array. Das folgende Beispiel zeigt, wie Sie Arrays mit diesen beiden Methoden erstellen. Angeben Null oder nicht definiert als eines der Elemente führt zu Fehlern, wenn die strictNullChecks Flagge ist wahr.
// Wenn strictNullChecks auf false gesetzt ist, lassen Sie a: number [] = [1, 12, 93, 5]; sei b: string [] = ["a", "Aprikose", "Mango"]; sei c: number [] = [1, "Apfel", "Kartoffel"]; // Fehler let d: Array= [null, undefiniert, 10, 15]; lassen Sie e: Array = ["pie", null, ""]; // Wenn strictNullChecks auf true gesetzt ist, lassen Sie a: number [] = [1, 12, 93, 5]; sei b: string [] = ["a", "Aprikose", "Mango"]; sei c: number [] = [1, "Apfel", "Kartoffel"]; // Fehler let d: Array = [null, undefiniert, 10, 15]; // Fehler let e: Array = ["pie", null, ""]; // Error
Mit dem Tupel-Datentyp können Sie ein Array erstellen, in 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:
sei a: [number, string] = [11, "montag"]; sei b: [number, string] = ["montag", 11]; // Fehler let c: [number, string] = ["a", "monkey"]; // Fehler let d: [number, string] = [105, "owl", 129, 45, "cat"]; sei e: [number, string] = [13, "bat", "spiderman", 2]; e [13] = "Elefant"; e [15] = falsch; // Error
Für alle Tupel in unserem Beispiel haben wir das gesetzt Art des ersten Elements zu a Nummer und das Art des zweiten Elements zu einem Schnur. Da haben wir nur ein angegeben Art Bei den ersten beiden Elementen kann der Rest entweder eine Zeichenfolge oder eine Zahl sein. Tupel erstellen b und c führt zu einem Fehler, da versucht wurde, eine Zeichenfolge als Wert für das erste Element zu verwenden, wenn wir erwähnt hatten, dass das erste Element eine Zahl sein würde.
Ebenso können wir den Wert eines Tupel-Elements nicht auf setzen falsch nach der Angabe, dass es nur Zeichenfolgen und Zahlen enthält. Deshalb führt die letzte Zeile zu einem Fehler.
Das enum Der Datentyp ist in vielen Programmiersprachen wie C und Java vorhanden. Es fehlt in JavaScript, aber mit TypeScript können Sie Enums erstellen und damit arbeiten. Wenn Sie nicht wissen was enums Sie ermöglichen es Ihnen, eine Sammlung zusammengehöriger Werte mit einprägsamen Namen zu erstellen.
enum Animals Katze, Löwe, Hund, Kuh, Affe let c: Animals = Animals.cat; console.log (Tiere [3]); // cow console.log (Animals.monkey); // 4
Standardmäßig beginnt die Nummerierung der Aufzählungen bei 0, Sie können jedoch auch einen anderen Wert für das erste oder ein anderes Element manuell festlegen. Dadurch wird der Wert aller folgenden Mitglieder geändert, indem der Wert um 1 erhöht wird. Sie können alle Werte auch manuell in einstellen enum.
enum Tiere cat = 1, Löwe, Hund = 11, Kuh, Affe let c: Animals = Animals.cat; console.log (Tiere [3]); // undefined console.log (Animals.monkey); // 13
Im Gegensatz zum vorherigen Beispiel ist der Wert von Tiere [3] ist nicht definiert diesmal. Dies liegt daran, dass der Wert 3 dem Hund zugewiesen worden wäre, wir setzen ihn jedoch explizit auf 11. Der Wert für die Kuh bleibt bei 12 und nicht bei 3, da angenommen wird, dass der Wert um einen Wert größer als der Wert des letzten Mitglieds ist.
Angenommen, Sie schreiben ein Programm, bei dem der Wert einer Variablen von den Benutzern oder dem in einer Drittanbieter-Bibliothek geschriebenen Code bestimmt wird. In diesem Fall können Sie den Typ dieser Variablen nicht korrekt festlegen. Die Variable kann einen beliebigen Typ haben, z. B. eine Zeichenfolge, eine Zahl oder ein Boolean. Dieses Problem kann durch die Verwendung von gelöst werden irgendein Art. Dies ist auch hilfreich, wenn Sie Arrays mit Elementen gemischter Typen erstellen.
Sei a: any = "Apfel"; sei b: beliebig = 14; sei c: any = false; sei d: any [] = ["Tür", "Küche", 13, falsch, null]; b = "Menschen";
Im obigen Code konnten wir eine Nummer vergeben b und ändern Sie dann ihren Wert in eine Zeichenfolge, ohne einen Fehler zu erhalten, da der Typ irgendein kann alle Arten von Werten akzeptieren.
Das noch nie Typ wird verwendet, um Werte darzustellen, die niemals vorkommen sollen. Beispielsweise können Sie zuweisen noch nie als Rückgabetyp einer Funktion, die niemals zurückkehrt. Dies kann passieren, wenn eine Funktion immer einen Fehler auslöst oder wenn sie in einer Endlosschleife stecken bleibt.
lass ein: niemals; // Ok lass b: never = false; // Fehler let c: never = null; // Fehler let d: never = "Montag"; // Fehlerfunktion stuck (): never while (true)
In diesem Lernprogramm haben Sie alle in TypeScript verfügbaren Typen vorgestellt. Wir haben gelernt, wie die Zuordnung eines anderen Werttyps zu einer Variablen Fehler in TypeScript anzeigt. Diese Prüfung kann dazu beitragen, beim Schreiben großer Programme viele Fehler zu vermeiden. Wir haben auch gelernt, wie man verschiedene Versionen von JavaScript anvisiert.
Wenn Sie nach zusätzlichen Ressourcen suchen, um zu studieren oder in Ihrer Arbeit zu verwenden, schauen Sie nach, was wir auf dem Envato-Marktplatz zur Verfügung haben.
Im nächsten Lernprogramm lernen Sie die Schnittstellen in TypeScript kennen. Wenn Sie Fragen zu diesem Tutorial haben, lassen Sie es mich in den Kommentaren wissen.
Accentsconagua