Hinzufügen zum Skript mit TypeScript

Quelle des Titelbildes: Daria Kraplak

Inhaltsverzeichnis

Einführung
Zweck von TypeScript
Vergleich von JavaScript und TypeScript
Fazit

Einführung

Bevor wir uns mit TypeScript befassen, sprechen wir zunächst über JavaScript! Wussten Sie, dass JavaScript 1995 erfunden wurde? Ich auch nicht.

In dieser Zeit erfüllte es den Bedarf, einfache Webseiten in den Browsern der Menschen zu verarbeiten. Seit 1999 wurde JavaScript verbessert und kann die unterhaltsamen und dynamischen Webseiten, die wir heutzutage erstellen, bewältigen. Darüber hinaus handelt es sich um eine relativ einfach zu verwendende Programmiersprache, da sie flexibel mit (hier ein kleiner Spoiler) Datentypen ist.

Es gab jedoch ein Problem, das nicht behoben wurde. Ironischerweise ist der Grund, warum JavaScript einfach zu verwenden ist, derselbe, warum es unseren Code beschädigen kann. Hier kann uns TypeScript helfen!

Zweck von TypeScript

TypeScript ist eine Obermenge von JavaScript. Was bedeutet das? Nun, für einige ist TypeScript keine Programmiersprache, da es zur Unterstützung des bereits vorhandenen JavaScript-Codes verwendet wird. Unabhängig davon hilft TypeScript uns JavaScript-Benutzern, indem es die Struktur unseres Codes stärkt. Dies geschieht durch Sicherstellung der Konsistenz der Datentypen für jede Variable, die wir haben. Dies ist beim Testen von Vorteil, da es potenzielle Fehler während der Entwicklung hervorhebt und uns warnt, bevor der Code in JavaScript kompiliert wird.

Vergleich von JavaScript und TypeScript

Sie teilen diese Datentypen

• Zeichenfolge
• Nummer
• boolean
• undefiniert
• null

Ihre Umsetzung erfordert jedoch einen anderen Ansatz. Ich zeige Ihnen wie!

Schlussfolgerungen

Beim Definieren einer Variablen in JavaScript kann sich ihr Datentyp später ändern, wenn wir dies wünschen. Anders verhält es sich bei TypeScript, da der Datentyp einer Variablen entweder von TypeScript abgeleitet oder von uns explizit angegeben wird. Der Datentyp einer Variablen kann beliebig werden, wenn er nicht abgeleitet werden kann oder nicht explizit angegeben wird!

// JavaScript 
let x = 6;  // x stores a number value.  
x = "Hello there";  // x is now storing a string value.  
// This is valid since JavaScript allows dynamic type reassignment.  

// TypeScript 
let x = 6;  // x stores a number value.  
// (For line below) Error: Type string is not assignable to type number.  
x = "Hello there";  
// The reassigned value below matches the inferred or declared type of 
// the variable. TypeScript is okay with this.  
x = 8;  

// For both 
// x stores a number value and does not allow reassignment here. 
const x = 20; 
// Error: Cannot assign to 'x' because it is a constant.  
x = 25; 

Geben Sie Anmerkung ein

Als Fortsetzung des obigen Unterabschnitts können wir den Datentyp einer Variablen in TypeScript auch explizit angeben, indem wir Typannotationen verwenden. Das bedeutet, dass nach der Namensgebung einer Variablen ein Doppelpunkt und ein Typ (: ) hinzugefügt werden müssen.

// JavaScript 
let x = 6;  // x stores a number value.  
x = "Hello there";  // x is now storing a string value.  
// This is valid since JavaScript allows dynamic type reassignment.  

// TypeScript 
let x = 6;  // x stores a number value.  
// (For line below) Error: Type string is not assignable to type number.  
x = "Hello there";  
// The reassigned value below matches the inferred or declared type of 
// the variable. TypeScript is okay with this.  
x = 8;  

// For both 
// x stores a number value and does not allow reassignment here. 
const x = 20; 
// Error: Cannot assign to 'x' because it is a constant.  
x = 25; 

Formen

Was bedeuten „Formen“ in TypeScript? Wenn es beispielsweise um Strings geht, verfügen ihre Methoden über eigene Eigenschaften. Diese „Eigenschaften“ bilden die „Form“ oder Struktur der Variablen. Um auf die Eigenschaften einer Variablen zuzugreifen, müssen wir zunächst sicherstellen, dass die von uns verwendete Methode die erforderlichen Informationen bereitstellt. JavaScript ist dabei nicht streng und ermöglicht es Variablen, ihre Form zur Laufzeit zu ändern. Allerdings müssen wir bei TypeScript vorsichtig sein, da es nach den genauen Eigenschaften einer Variablen sucht. Es ist, als würde man Blöcke in die Umrisse einpassen, die zu ihren Formen passen.

// JavaScript 
// No need to state the data type here, just assign the variable a value. 
let color = ‘purple’;
// Since JavaScript is flexible, it is fine with this reassignment. 
color = ‘blue’;
// This is also the case even if the value changes to 10. 

// TypeScript 
// 'color' is declared and expected to have a string value.  
let color: string;
// Similar to the line above, except we assign a value as well.  
let color: string = 'red';
color = ‘purple’;  // 'purple' is a string value, so this is valid.  
color = ‘blue’;  // 'blue' is a string value, so this is valid.  

Es gibt noch viel mehr als diese!

Abschluss

Das waren bisher meine ersten Eindrücke von TypeScript. Man kann mit Sicherheit sagen, dass ich davon fasziniert bin, wie es das, was JavaScript bereits für uns tun kann, noch weiter steigern kann. Ich bin gespannt darauf, mehr zu erfahren und es in meine JavaScript-Projekte zu implementieren!

Ich hoffe, dass dies Ihr Interesse geweckt hat, neben JavaScript auch TypeScript zu Ihrer Sandbox/Toolbox hinzuzufügen. Wer möchte nicht, dass sein Code besser strukturiert ist?

Das obige ist der detaillierte Inhalt vonHinzufügen zum Skript mit TypeScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!