Lernen Sie TypeScript in 5 Minuten - Ein Tutorial für Anfänger

TypeScript ist eine typisierte Obermenge von JavaScript, die darauf abzielt, die Sprache skalierbarer und zuverlässiger zu machen.

Es ist Open Source und wird von Microsoft seit seiner Erstellung im Jahr 2012 gepflegt. TypeScript hat jedoch seinen ersten Durchbruch als zentrale Programmiersprache in Angular 2 erzielt. Seitdem ist es auch in den React- und Vue-Communities weiter gewachsen.

In diesem Tutorial lernen Sie anhand von praktischen Beispielen die Grundlagen von TypeScript.

Wir sind auch dabei, einen kostenlosen 22-teiligen TypeScript-Kurs auf Scrimba zu starten. Hinterlassen Sie Ihre E-Mail-Adresse hier, wenn Sie frühzeitig darauf zugreifen möchten!

Lass uns anfangen.

TypeScript installieren

Bevor wir mit dem Codieren beginnen, müssen wir TypeScript auf unserem Computer installieren. Wir werden npmdies verwenden, also öffnen Sie einfach das Terminal und geben Sie den folgenden Befehl ein:

npm install -g typescript 

Sobald es installiert ist, können wir es überprüfen, indem wir den Befehl tsc -vausführen, der die Version des installierten TypeScript anzeigt.

Code schreiben

Lassen Sie uns unsere erste TypeScript-Datei erstellen und Code darin schreiben. Öffnen Sie Ihre bevorzugte IDE oder Ihren bevorzugten Texteditor und erstellen Sie eine Datei mit dem Namen first.ts - Für TypeScript-Dateien verwenden wir die Erweiterung.ts

Im Moment werden wir nur ein paar Zeilen einfaches altes JavaScript schreiben, da der gesamte JavaScript-Code auch gültiger TypeScript-Code ist:

let a = 5; let b = 5; let c = a + b; console.log(c); 

Der nächste Schritt besteht darin, unser TypeScript in einfaches JavaScript zu kompilieren, da Browser möchten, dass .jsDateien gelesen werden.

TypeScript kompilieren

Zum Kompilieren führen wir den Befehl von aus tsc filename.ts, der eine JavaScript-Datei mit demselben Dateinamen, aber einer anderen Erweiterung erstellt und den wir schließlich an unsere Browser weitergeben können.

Öffnen Sie also das Terminal am Speicherort der Datei und führen Sie den folgenden Befehl aus:

tsc first.ts 

Tipp : Wenn Sie alle TypeScript-Dateien in einem Ordner kompilieren möchten, verwenden Sie den folgenden Befehl:tsc *.ts

Datentypen

TypeScript ist - wie der Name schon sagt - die typisierte Version von JavaScript. Dies bedeutet, dass wir zum Zeitpunkt der Deklaration Typen für verschiedene Variablen angeben können. Sie enthalten in diesem Bereich immer denselben Datentyp.

Das Schreiben ist eine sehr nützliche Funktion, um Zuverlässigkeit und Skalierbarkeit sicherzustellen. Die Typprüfung stellt sicher, dass unser Code wie erwartet funktioniert. Außerdem hilft es bei der Suche nach Fehlern und Fehlern und bei der ordnungsgemäßen Dokumentation unseres Codes.

Die Syntax zum Zuweisen eines Typs zu einer Variablen besteht darin, den Namen der Variablen gefolgt von einem :Vorzeichen und dann den Namen des Typs gefolgt von einem =Vorzeichen und den Wert der Variablen zu schreiben .

In TypeScript gibt es drei verschiedene Typen: den anyTyp, die Built-inTypen und die User-definedTypen. Schauen wir uns jeden an.

jeder Typ

Der anyDatentyp ist die Obermenge aller Datentypen in TypeScript. Wenn Sie einer Variablen den Typ geben, anyentspricht dies dem Deaktivieren der Typprüfung für eine Variable.

let myVariable: any = 'This is a string' 

Eingebaute Typen

Dies sind die Typen, die in TypeScript erstellt werden. Dazu gehört number, string, boolean, void, nullund undefined.

let num: number = 5; let name: string = 'Alex'; let isPresent: boolean = true; 

Benutzerdefinierte Typen

Die User-definedTypen gehören enum, class, interface, array, und tuple. Wir werden einige davon später in diesem Artikel diskutieren.

Objekt orientierte Programmierung

TypeScript unterstützt alle Funktionen der objektorientierten Programmierung, z. B. Klassen und Schnittstellen. Diese Funktion ist ein enormer Schub für JavaScript - es hat immer mit seiner OOP-Funktionalität zu kämpfen gehabt, insbesondere seit Entwickler damit begonnen haben, sie für große Anwendungen zu verwenden.

Klasse

Bei der objektorientierten Programmierung ist eine Klasse die Vorlage von Objekten. Eine Klasse definiert, wie ein Objekt in Bezug auf die Merkmale und Funktionen dieses Objekts aussehen würde. Eine Klasse kapselt auch Daten für das Objekt.

TypeScript bietet integrierte Unterstützung für Klassen, die von ES5 und früheren Versionen nicht unterstützt wurden. Dies bedeutet, dass wir das classSchlüsselwort verwenden können, um einfach eines zu deklarieren.

class Car { // fields model: String; doors: Number; isElectric: Boolean; constructor(model: String, doors: Number, isElectric: Boolean) { this.model = model; this.doors = doors; this.isElectric = isElectric; } displayMake(): void { console.log(`This car is ${this.model}`); } } 

Im obigen Beispiel haben wir eine CarKlasse zusammen mit einigen ihrer Eigenschaften deklariert , die wir in der initialisieren constructor. Wir haben auch eine Methode, die eine Nachricht unter Verwendung ihrer Eigenschaft anzeigt.

Mal sehen, wie wir eine neue Instanz dieser Klasse erstellen können:

const Prius = new Car('Prius', 4, true); Prius.displayMake(); // This car is Prius 

Um ein Objekt einer Klasse zu erstellen, verwenden wir das Schlüsselwort von newund rufen den Konstruktor der Klasse auf und übergeben ihm die Eigenschaften. Nun ist dieses Objekt Priushat seine eigenen Eigenschaften model, doorsund isElectric. Das Objekt kann auch die Methode von aufrufen displayMake, die Zugriff auf die Eigenschaften von hätte Prius.

Schnittstelle

The concept of interfaces is another powerful feature of TypeScript, which allows you to define the structure of variables. An interface is like a syntactical contract to which an object should conform.

Interfaces are best described through an actual example. So, suppose we have an object of Car:

const Car = { model: 'Prius', make: 'Toyota', display() => { console.log('hi'); } } 

If we look at the object above and try to extract its signature, it would be:

{ model: String, make: String, display(): void } 

If we want to reuse this signature, we can declare it in the form of an interface. To create an interface, we use the keyword interface.

interface ICar { model: String, make: String, display(): void } const Car: ICar = { model: 'Prius', make: 'Toyota', display() => { console.log('hi'); } } 

Here, we’ve declared an interface called ICar , and created an object Car. Car is now binding to the ICar interface, ensuring that the Car object defines all the properties which are in the interface.

Conclusion

So I hope this gave you a quick glimpse into how TypeScript can make your JavaScript more stable and less prone to bugs.

TypeScript is gaining a lot of momentum in the world of web development. There’s also an increasing amount of React developers who are adopting it. TypeScript is definitely something any front-end developer in 2018 should be aware of.

Happy coding :)

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.