TypeScript vs. JavaScript: Einführung in TypeScript

Mit JavaScript können Entwickler interaktive Webseiten erstellen. Die Programmiersprache gehört zu den wichtigsten Technologien des Internets. Sie erweitert statische HTML-Webseiten um dynamische Inhalte und reagiert auf Ereignisse und Benutzereingaben im Browser. TypeScript fügt JavaScript praktische Funktionen hinzu und gewinnt immer mehr an Bedeutung. In dieser TypeScript-Einführung lernen Sie die Unterschiede der Sprachen kennen und erfahren mehr über Vorteile und Möglichkeiten.

Die großen 3: HTML, CSS und JavaScript

JavaScript bildet mit HTML und CSS den Grundpfeiler für die Webentwicklung.

HTML strukturiert Seiten mit Überschriften, Abschnitten und Bildern.
CSS gestaltet HTML-Elemente mit Stilregeln für Hintergrundfarben, Spalten und Rahmen.
JavaScript macht Websites dynamisch und interaktiv, zum Beispiel durch Layoutänderungen bei Mausklicks und Formularvalidierungen.

JavaScript entstand als browserbasierte Technologie und wurde stets weiterentwickelt. Die Sprache eignet sich für clientseitige (Browser) und serverseitige Anwendungen. Es gibt JavaScript-Bibliotheken und -Frameworks für verschiedene Anwendungsfälle. So ermöglicht beispielsweise Node.js die Erstellung serverseitiger Anwendungen und ist wie andere JavaScript-Frameworks auch mit TypeScript kompatibel.

Einschränkungen von JavaScript

Bei der Programmierung dienen Variablen als Platzhalter für Text, Zahlen oder ein Datum. Viele Programmiersprachen erlauben die Definition des Variablentyps, sodass darin bestimmte Datentypen gespeichert werden können. In JavaScript führt zum Beispiel die Addition von String und Zahl zur Umwandlung der Zahl in einen String, was zu unerwarteten Fehlern führen kann, die erst zur Laufzeit auffallen.
Beispiel:
let zahl = 10;
let text = „20“;
let ergebnis = zahl + text;
console.log(ergebnis); // Ausgabe ist „1020“ und nicht 30.

JavaScript ist eine schwach typisierte Programmiersprache. Der Programmierer kann den Variablentyp nicht definieren, sodass eine Variable zur Laufzeit jeden Datentyp speichern kann.

Immer beliebter: TypeScript erweitert JavaScript

TypeScript ist ein sogenanntes Superset von JavaScript und erweitert es um optionale statische Typisierung und zusätzliche Funktionen. JavaScript-Code ist somit gültiger TypeScript-Code. Jede Variable kann einen bestimmten Typ wie String oder Number haben, der während der Kompilation geprüft wird. Es ermöglicht Entwicklern frühzeitig Fehler im Code zu erkennen und saubereren Code zu schreiben. Das Beispiel von oben in TypeScript:

let zahl: number = 10;
let text: string = „20“;
let ergebnis = zahl + text; // Fehler in TypeScript

TypeScript meldet hier einen Fehler, weil die Addition von String und Zahl nicht ohne Typumwandlung möglich ist. Eine Umwandlung des Strings mit „parseInt(text)“ wäre vor der Addition notwendig.

Vorteile von TypeScript

Die Programmiersprache wurde von Microsoft 2012 veröffentlicht und seither kontinuierlich weiterentwickelt. Sie ist open source und bietet eine Reihe von Vorteilen:

Kompilierung zu JavaScript, kann in jedem JavaScript-Umfeld verwendet werden
Kompatibel zu bestehenden JavaScript-Bibliotheken und -Frameworks
Statische Typisierung zur Verbesserung von Codequalität und Wartung
Erweiterungen wie Interfaces, Klassendefinitionen, Module und objektorientierte Programmiertechniken
Ermöglicht in Code-Editoren wie VS Code durch Typüberprüfung frühzeitige Fehlererkennung zur Compile-Zeit

Wofür ist die Verwendung von TypeScript gedacht?

TypeScript eignet sich besonders für größere Projekte mit mehreren Entwicklern, verbessert aber auch in kleinen Projekten die Codequalität. Die Typisierung hilft, Fehler zu vermeiden; die Objektorientierung hilft, übersichtlicheren und wartbareren Code zu schreiben, der sich leichter wiederverwenden lässt.

TypeScript-Einführung: Typen, Funktionen, Klassen und Interfaces

TypeScript fügt JavaScript stark typisierte und objektorientierte Konzepte hinzu. Es ist nicht möglich, Variablen Werte zuzuweisen, die außerhalb des angegebenen Bereichs liegen.

Typzuweisung

Die Typzuweisung erfolgt nach einem Doppelpunkt hinter den Variablennamen. Durch die Typisierung kann der Compiler beim Kompilieren prüfen, ob ein Typfehler vorliegt.

let name: string = "Max"; // ein String ist immer in einzelne oder doppelte Anführungszeichen eingeschlossen
const alter: number = 25; // kann ganze Nummern oder Gleitzahlen enthalten
number = "Max"; // die Zuweisung würde direkt als Fehler angezeigt werden

Hinweis: Die Deklaration muss nicht erfolgen. Wenn möglich, erkennt TypeScript den Typ anhand der Initialisierung: let name = „Max“; // die Variable name wird als String interpretiert.

Hier ist eine Auswahl weiterer wichtiger Typen:
let wahr: boolean = true; // Boolean
let geburtstag: Date = new Date(„1990-12-04“); // Datum
let irgendwas: any = „beliebig“; // any lässt ähnlich wie in JavaScript jeden Typ zu
let nix: null = null; // die Variable ist null
let undefiniert: undefined = undefined; // die Variable ist undefiniert
let zahlenreihe: number[] = [1,2,3]; // ein Array von Zahlen
let personen: [string, number] = [„Max“, 25]; // ein Tupel kann mehrere Elemente mit unterschiedlichen Typen haben
let person: object = { name: „Max“, alter: 25 }; // Objekt-Typen repräsentieren Werte, die kein einfacher Typ wie string oder number sind

Funktionen

function test(): void {console.log("test");} // void gibt an, dass eine Funktion keinen Wert zurückgibt
function test1(): number {return 26;} // legt fest, dass eine Nummer zurückgegeben wird

Enum

Ein enum ist ein Aufzählungstyp mit einer Menge von benannten Werten.
enum Wochentag { Montag, Dienstag, Mittwoch, Donnerstag, Freitag};
let heute: Wochentag = Wochentag.Dienstag;

Klassen

Mit TypeScript-Klassen lassen sich Objekte in einem abstrahierten Modell abbilden. Sie definieren Eigenschaften und Methoden. Von den Klassen lassen sich Instanzen mit spezifischen Eigenschaften erstellen, die zur Laufzeit existieren.

class Person { name: string; alter: number; constructor (name: string, alter: number) { this.name = name; this.alter = alter; } hallo() { console.log("Hallo, ich bin ${this.name} und ${this.alter} Jahre alt"); } }

// eine Instanz
const person1 = new Person(„Max“, 30);
person1.hallo(); // Ausgabe ist „Hallo, ich bin Max und 30 Jahre alt“

Interfaces

TypeScript-Interfaces beschreiben die Form von Objekten, ohne Logik oder Methoden zu implementieren. Sie stellen sicher, dass ein Objekt bestimmte Eigenschaften hat, und dienen zur Typüberprüfung. Interfaces werden nicht zu JavaScript kompiliert.

Interface Person {
name: string;
alter: number;
hallo(): string;
}
let person : Person = { name: „Max“, alter= 30, hallo: function() { return „Hallo, ich bin ${this.name} und ${this.alter} Jahre alt“}};
console.log(person.hallo()); // Hallo, ich bin Max und 30 Jahre alt

Klassen dienen also zur konkreten Erstellung von Objekten, während Interfaces Strukturen und Typen definieren und keine Logik implementieren.

Tipp: Host Europe bietet für Webprojekte mit unterschiedlichen Anforderungen maßgeschneiderte Hosting-Tarife!

Warum TypeScript JavaScript verbessert – Fazit

TypeScript erweitert JavaScript um praktische Funktionen wie Typisierung, Klassen, Interfaces und Module für robusteren und übersichtlicheren Code. Es ermöglicht die Fehlererkennung bereits im Code-Editor und beim Kompilieren statt erst zur Laufzeit. Vorteile wie Wartbarkeit und Skalierbarkeit machen sich besonders für Teams und bei großen Projekten bemerkbar. Der TypeScript-Playground eignet sich gut zum Lernen, Üben und Ausprobieren.

Über
Letzte Artikel

Host Europe

Hinter Ihrem Web-Erfolg steht höchste Leistung. Wir erfüllen auch Ihre Hosting-Wünsche – mit engagierten Experten und führenden Technologien. Host Europe - Professionelle Hosting Services für Privatkunden & Unternehmen.

Letzte Artikel von Host Europe (Alle anzeigen)