In der heutigen schnelllebigen digitalen Welt ist JavaScript zur bevorzugten Sprache für die Entwicklung dynamischer Webanwendungen geworden. Die dynamische Typisierung von JavaScript kann jedoch manchmal zu subtilen Fehlern führen, die es schwierig machen, sie in einem frühen Stadium des Entwicklungsprozesses zu erkennen.
Hier kommt TypeScript ins Spiel – um die Art und Weise, wie wir JavaScript-Code schreiben, zu revolutionieren.
In diesem Artikel tauchen wir tief in die Welt von TypeScript ein und erkunden Funktionen, Vorteile und Best Practices. Außerdem erfährst du, wie TypeScript die Grenzen von JavaScript überwindet und die Möglichkeiten der statischen Typisierung für die Entwicklung robuster und skalierbarer Webanwendungen freisetzt.
Lass uns eintauchen!
Was ist TypeScript?
TypeScript ist ein Superset von JavaScript, das JavaScript um optionale statische Typisierung und erweiterte Funktionen erweitert. Es wurde von Microsoft entwickelt und erstmals im Oktober 2012 veröffentlicht. Seit seiner Veröffentlichung im Jahr 2012 hat es sich in der Webentwicklergemeinschaft schnell durchgesetzt.
Laut der Stack Overflow-Entwicklerumfrage aus dem Jahr 2022 ist TypeScript mit 73,46 % die viertbeliebteste Technologie. TypeScript wurde entwickelt, um einige der Einschränkungen von JavaScript zu beseitigen, z. B. das Fehlen einer starken Typisierung, die zu subtilen Fehlern führen kann, die während der Entwicklung schwer zu erkennen sind.
Betrachte zum Beispiel den folgenden JavaScript-Code:
function add(a, b) {
return a + b;
}
let result = add(10, "20"); // No error, but result is "1020" instead of 30Der obige Code erstellt eine Funktion add, die dynamisch typisiert ist. Der Typ der Argumente a und b wird nicht erzwungen. Daher führt die Übergabe einer Zeichenkette anstelle einer Zahl als Argument nicht zu einem Fehler, sondern verkettet die Werte als Zeichenketten, was zu unerwartetem Verhalten führt.
Mit TypeScript wird eine optionale statische Typisierung eingeführt, die es Entwicklern ermöglicht, die Typen von Variablen, Funktionsparametern und Rückgabewerten zu spezifizieren und typbezogene Fehler während der Entwicklung abzufangen.
function add(a: number, b: number): number {
return a + b;
}
let result = add(10, "20"); // Error: Argument of type 'string' is not assignable to parameter of type 'number'Im obigen TypeScript-Code sind die Typen der Parameter a und b ausdrücklich als Zahlen definiert. Wenn eine Zeichenkette als Argument übergeben wird, gibt TypeScript einen Kompilierfehler aus, damit mögliche Probleme frühzeitig erkannt werden können.
Merkmale von TypeScript
TypeScript bietet mehrere leistungsstarke Funktionen für die moderne Webentwicklung, die einige der Einschränkungen von JavaScript beseitigen. Diese Funktionen verbessern die Erfahrung der Entwickler und die Organisation des Codes. Sie umfassen:
1. Statische Typisierung
TypeScript verfügt über ein starkes Typisierungssystem, das es ermöglicht, die Typen von Variablen und Funktionsparametern zur Kompilierungszeit festzulegen. Dies ermöglicht eine frühzeitige Erkennung von typbezogenen Fehlern und macht den Code zuverlässiger und weniger anfällig für Bugs.
In JavaScript hingegen sind die Variablen dynamisch typisiert, d. h. ihr Typ kann sich während der Laufzeit ändern.
Der JavaScript-Code unten zeigt zum Beispiel die Deklaration von zwei Variablen, die dynamisch als Zahl und String typisiert sind:
let num1 = 10; // num1 is dynamically typed as a number
let num2 = "20"; // num2 is dynamically typed as a string
let result = num1 + num2; // No error at compile-time
console.log(result); // Output: "1020"Der obige Code gibt „1020“ aus, eine Verkettung von Zahl und String. Das ist nicht die erwartete Ausgabe – und das kann sich auf deinen Code auswirken. Der Nachteil von JavaScript ist, dass es keinen Fehler ausgibt. Mit TypeScript kannst du dies beheben, indem du die Typen der einzelnen Variablen angibst:
let num1: number = 10; // num1 is statically typed as a number
let num2: string = "20"; // num2 is statically typed as a string
let result = num1 + num2; // Error: Type 'string' is not assignable to type 'number'Im obigen Code führt der Versuch, eine Zahl und eine Zeichenkette mit dem Operator + zu verknüpfen, zu einem Kompilierungsfehler, da TypeScript eine strenge Typenprüfung durchführt.
Dadurch werden potenzielle typbezogene Fehler vor der Ausführung des Codes abgefangen, was zu robusterem und fehlerfreiem Code führt.
2. Optionale Typisierung
TypeScript bietet Flexibilität bei der Wahl, ob statische Typisierung verwendet werden soll oder nicht. Das heißt, du kannst entweder Typen für Variablen und Funktionsparameter angeben oder TypeScript die Typen automatisch aus dem zugewiesenen Wert ableiten lassen.
Ein Beispiel:
let num1: number = 10; // num1 is statically typed as a number
let num2 = "20"; // num2 is dynamically typed as a string
let result = num1 + num2; // Error: Operator '+' cannot be applied to types 'number' and 'string'In diesem Code wird der Typ von num2 anhand des zugewiesenen Wertes als string abgeleitet, aber du kannst den Typ auch angeben, wenn du möchtest.
Du kannst den Typ auch auf any setzen, was bedeutet, dass er jeden Wert akzeptiert:
let num1: number = 10;
let num2: any = "20";
let result = num1 + num2; // Error: Operator '+' cannot be applied to types 'number' and 'string'3. ES6+ Funktionen
TypeScript unterstützt moderne JavaScript-Funktionen, einschließlich derer, die in ECMAScript 6 (ES6) und späteren Versionen eingeführt wurden.
Dies ermöglicht es Entwicklern, saubereren und aussagekräftigeren Code zu schreiben, indem sie Funktionen wie Pfeilfunktionen, Destrukturierung, Template-Literale und mehr nutzen und zusätzlich eine Typüberprüfung durchführen.
Ein Beispiel:
const greeting = (name: string): string => {
return `Hello, ${name}!`; // Use of arrow function and template literal
};
console.log(greeting("John")); // Output: Hello, John!In diesem Code werden die Pfeilfunktion und das Template-Literal perfekt eingesetzt. Das Gleiche gilt für die gesamte JavaScript-Syntax.
4. Code-Organisation
In JavaScript kann die Organisation von Code in separaten Dateien und die Verwaltung von Abhängigkeiten zu einer Herausforderung werden, wenn die Codebasis wächst. TypeScript bietet jedoch integrierte Unterstützung für Module und Namespaces, um den Code besser zu organisieren.
Module ermöglichen die Kapselung von Code in separaten Dateien und machen es einfacher, große Codebases zu verwalten und zu pflegen.
Hier ist ein Beispiel:
// greeting.ts:
export function greet(name: string): string { // Export a function from a module
return `Hello, ${name}!`;
}
// app.ts:
import { greet } from "./greeting"; // Import from a module
console.log(greet("John")); // Output: Hello, John!Im obigen Beispiel haben wir zwei separate Dateien greeting.ts und app.ts. Die Datei app.ts importiert die Funktion greet aus der Datei greeting.ts mit der Anweisung import. Die Datei greeting.ts exportiert die Funktion greet mit dem Schlüsselwort export und macht sie so für den Import in andere Dateien zugänglich.
Dies ermöglicht eine bessere Organisation des Codes und eine bessere Trennung der Bereiche, was die Verwaltung und Wartung großer Codebasen erleichtert.
Namespaces in TypeScript bieten eine Möglichkeit, zusammenhängenden Code zu gruppieren und die Verschmutzung durch globale Namespaces zu vermeiden. Sie können verwendet werden, um einen Container für eine Reihe von verwandten Klassen, Schnittstellen, Funktionen oder Variablen zu definieren.
Hier ist ein Beispiel:
namespace Utilities {
export function greet(name: string): string {
return `Hello, ${name}!`;
}
export function capitalize(str: string): string {
return str.toUpperCase();
}
}
console.log(Utilities.greet("John")); // Output: Hello, John!
console.log(Utilities.capitalize("hello")); // Output: HELLOIn diesem Code definieren wir namespace Utilities, die zwei Funktionen enthält, greet und capitalize. Wir können auf diese Funktionen zugreifen, indem wir den Namen des Namespaces gefolgt vom Namen der Funktion verwenden, um eine logische Gruppierung für verwandten Code zu erhalten.
5. Objektorientierte Programmierung (OOP) Funktionen
TypeScript unterstützt OOP-Konzepte wie Klassen, Schnittstellen und Vererbung und ermöglicht so einen strukturierten und organisierten Code.
Ein Beispiel:
class Person {
constructor(public name: string) {} // Define a class with a constructor
greet(): string { // Define a method in a class
return `Hello, my name is ${this.name}!`;
}
}
const john = new Person("John"); // Create an instance of the class
console.log(john.greet()); // Output: Hello, my name is John!6. Erweitertes Typsystem
TypeScript bietet ein fortschrittliches Typsystem, das Generics, Unions, Überschneidungen und mehr unterstützt. Diese Funktionen verbessern die statische Typüberprüfung von TypeScript und ermöglichen es Entwicklern, robusteren und aussagekräftigeren Code zu schreiben.
Generics: Generics ermöglichen das Schreiben von wiederverwendbarem Code, der mit verschiedenen Typen arbeiten kann. Generics sind wie Platzhalter für Typen, die zur Laufzeit anhand der an eine Funktion oder eine Klasse übergebenen Werte bestimmt werden.
Definieren wir zum Beispiel eine generische Funktion identity, die ein Argument vom Typ T entgegennimmt und einen Wert desselben Typs T zurückgibt:
function identity(value: T): T {
return value;
}
let num: number = identity(10); // T is inferred as number
let str: string = identity("hello"); // T is inferred as stringIm obigen Beispiel wird der Typ T aus dem Typ des an die Funktion übergebenen Wertes abgeleitet. Bei der ersten Verwendung der Funktion identity wird T als Zahl abgeleitet, weil wir 10 als Argument übergeben, und bei der zweiten Verwendung wird T als String abgeleitet, weil wir "hello" als Argument übergeben.
Unions und Schnittmengen: Unions und Überschneidungen werden verwendet, um Typen zusammenzusetzen und komplexere Typbeziehungen zu erstellen.
Unions ermöglichen die Kombination von zwei oder mehr Typen zu einem einzigen Typ, der jeden der kombinierten Typen haben kann. Schnittpunkte ermöglichen die Kombination von zwei oder mehr Typen zu einem einzigen Typ, der alle kombinierten Typen erfüllen muss.
Wir können zum Beispiel zwei Typen definieren: Employee und Manager, die einen Mitarbeiter bzw. eine Führungskraft repräsentieren.
type Employee = { name: string, role: string };
type Manager = { name: string, department: string };Mit den Typen Employee und Manager können wir einen Vereinigungstyp EmployeeOrManager definieren, der entweder ein Employee oder ein Manager sein kann.
type EmployeeOrManager = Employee | Manager; // Union type
let person1: EmployeeOrManager = { name: "John", role: "Developer" }; // Can be either Employee or ManagerIm obigen Code ist die Variable person1 vom Typ EmployeeOrManager, was bedeutet, dass ihr ein Objekt zugewiesen werden kann, das entweder den Typ Employee oder Manager erfüllt.
Wir können auch einen Kreuzungstyp EmployeeOrManager definieren, der die Typen Employee und Manager erfüllen muss.
type EmployeeAndManager = Employee & Manager; // Intersection type
let person2: EmployeeAndManager = { name: "Jane", role: "Manager", department: "HR" }; // Must be both Employee and ManagerIm obigen Code ist die Variable person2 vom Typ EmployeeAndManager, was bedeutet, dass sie ein Objekt sein muss, das sowohl den Typ Employee als auch Manager erfüllt.
7. Kompatibilität mit JavaScript
TypeScript ist als Obermenge von JavaScript konzipiert, was bedeutet, dass jeder gültige JavaScript-Code auch gültiger TypeScript-Code ist. Das macht die Integration von TypeScript in bestehende JavaScript-Projekte einfach, ohne dass der gesamte Code neu geschrieben werden muss.
TypeScript baut auf JavaScript auf und fügt optionale statische Typisierung und zusätzliche Funktionen hinzu, aber du kannst trotzdem einfachen JavaScript-Code verwenden.
Wenn du zum Beispiel eine bestehende JavaScript-Datei app.js hast, kannst du sie in app.ts umbenennen und nach und nach TypeScript-Funktionen nutzen, ohne den bestehenden JavaScript-Code zu ändern. TypeScript ist weiterhin in der Lage, den JavaScript-Code zu verstehen und als gültiges TypeScript zu kompilieren.
Hier ist ein Beispiel dafür, wie TypeScript eine nahtlose Integration mit JavaScript ermöglicht:
// app.js - Existing JavaScript code
function greet(name) {
return "Hello, " + name + "!";
}
console.log(greet("John")); // Output: Hello, John!Du kannst die obige JavaScript-Datei in app.ts umbenennen und damit beginnen, TypeScript-Funktionen zu nutzen:
// app.ts - Same JavaScript code as TypeScript
function greet(name: string): string {
return "Hello, " + name + "!";
}
console.log(greet("John")); // Output: Hello, John!Im obigen Beispiel fügen wir dem Parameter name eine Type-Annotation hinzu und geben ihn als string an, was in TypeScript optional ist. Der Rest des Codes bleibt derselbe wie in JavaScript. TypeScript ist in der Lage, den JavaScript-Code zu verstehen und eine Typüberprüfung für die hinzugefügte Type-Annotation durchzuführen. Dadurch wird es einfach, TypeScript schrittweise in ein bestehendes JavaScript-Projekt zu integrieren.
Erste Schritte mit TypeScript
TypeScript ist ein offizieller Compiler, den du mit npm in deinem Projekt installieren kannst. Wenn du TypeScript 5.0 in deinem Projekt verwenden möchtest, kannst du den folgenden Befehl im Verzeichnis deines Projekts ausführen:
npm install -D typescriptDadurch wird der Compiler in das Verzeichnis node_modules installiert, das du nun mit dem Befehl npx tsc aufrufen kannst.
Für dein JavaScript-Projekt musst du zunächst ein Node-Projekt mit dem folgenden Befehl initialisieren, um eine package.json-Datei zu erstellen:
npm init -yDann kannst du die TypeScript-Abhängigkeit installieren, TypeScript-Dateien mit der Erweiterung .ts erstellen und deinen TypeScript-Code schreiben.
Sobald du deinen TypeScript-Code geschrieben hast, musst du ihn mit dem TypeScript-Compiler (tsc) in JavaScript kompilieren. Du kannst den folgenden Befehl in deinem Projektverzeichnis ausführen:
npx tsc .tsDieser kompiliert den TypeScript-Code in der angegebenen Datei zu JavaScript und erzeugt eine .js-Datei mit demselben Namen.
Du kannst den kompilierten JavaScript-Code dann in deinem Projekt ausführen, genauso wie du normalen JavaScript-Code ausführen würdest. Du kannst Node.js verwenden, um den JavaScript-Code in einer Node.js-Umgebung auszuführen, oder die kompilierte JavaScript-Datei in eine HTML-Datei einbinden und in einem Browser ausführen.
Mit Interfaces arbeiten
Schnittstellen in TypeScript werden verwendet, um Verträge oder Formen von Objekten zu definieren. Sie ermöglichen es dir, die Struktur oder Form festzulegen, der ein Objekt entsprechen soll.
Schnittstellen definieren eine Reihe von Eigenschaften und/oder Methoden, die ein Objekt haben muss, damit es als kompatibel mit der Schnittstelle gilt. Schnittstellen können verwendet werden, um Typkommentare für Objekte, Funktionsparameter und Rückgabewerte bereitzustellen, die eine bessere statische Typüberprüfung und Vorschläge zur Codevervollständigung in IDEs ermöglichen.
Hier ist ein Beispiel für eine Schnittstelle in TypeScript:
interface Person {
firstName: string;
lastName: string;
age: number;
}In diesem Beispiel definieren wir eine Schnittstelle Person, die drei Eigenschaften festlegt: firstName vom Typ string, lastName vom Typ string und age vom Typ number.
Jedes Objekt, das diese drei Eigenschaften mit den angegebenen Typen hat, wird als kompatibel mit der Schnittstelle Person angesehen. Definieren wir nun Objekte, die der Schnittstelle Person entsprechen:
let person1: Person = {
firstName: "John",
lastName: "Doe",
age: 30
};
let person2: Person = {
firstName: "Jane",
lastName: "Doe",
age: 25
};In diesem Beispiel erstellen wir zwei Objekte person1 und person2, die mit der Schnittstelle Person kompatibel sind. Beide Objekte haben die erforderlichen Eigenschaften firstName, lastName und age mit den angegebenen Typen, so dass sie mit der Schnittstelle Person kompatibel sind.
Erweitern von Schnittstellen
Schnittstellen können auch erweitert werden, um neue Schnittstellen zu erstellen, die Eigenschaften von bestehenden Schnittstellen erben.
Zum Beispiel:
interface Animal {
name: string;
sound: string;
}
interface Dog extends Animal {
breed: string;
}
let dog: Dog = {
name: "Buddy",
sound: "Woof",
breed: "Labrador"
};In diesem Beispiel definieren wir eine Schnittstelle Animal mit den Eigenschaften name und sound, und dann definieren wir eine neue Schnittstelle „Dog“, die die Schnittstelle Animal erweitert und eine neue Eigenschaftbreed hinzufügt. Die Schnittstelle Dog erbt die Eigenschaften von der Schnittstelle Animal. Jedes Objekt, das der Schnittstelle Dog entspricht, muss also auch die Eigenschaften name und sound haben.
Optionale Eigenschaften
Schnittstellen können auch optionale Eigenschaften haben, die durch ein ? nach dem Eigenschaftsnamen gekennzeichnet sind.
Hier ist ein Beispiel:
interface Car {
make: string;
model: string;
year?: number;
}
let car1: Car = {
make: "Toyota",
model: "Camry"
};
let car2: Car = {
make: "Honda",
model: "Accord",
year: 2020
};In diesem Beispiel definieren wir eine Schnittstelle Car mit den Eigenschaften make und model und einer optionalen Eigenschaft year. Die Eigenschaft year ist nicht erforderlich, so dass Objekte, die der Schnittstelle Car entsprechen, sie haben können oder nicht.
Erweiterte Typprüfung
TypeScript bietet auch erweiterte Optionen für die Typüberprüfung in tsconfig.json. Diese Optionen können die Typprüfung deines TypeScript-Projekts verbessern und potenzielle Fehler zur Kompilierungszeit abfangen, was zu einem robusteren und zuverlässigeren Code führt.
1. strictNullChecks
Wenn diese Option auf true gesetzt ist, erzwingt TypeScript strikte Nullprüfungen, d.h. Variablen können nicht den Wert null oder undefined haben, es sei denn, sie sind explizit mit dem Union-Typ null oder undefined angegeben.
Ein Beispiel:
{
"compilerOptions": {
"strictNullChecks": true
}
}Wenn diese Option aktiviert ist, fängt TypeScript potenzielle null oder undefined Werte zur Kompilierungszeit ab und hilft so, Laufzeitfehler zu vermeiden, die durch den Zugriff auf Eigenschaften oder Methoden von null oder undefined Variablen verursacht werden.
// Example 1: Error - Object is possibly 'null'
let obj1: { prop: string } = null;
console.log(obj1.prop);
// Example 2: Error - Object is possibly 'undefined'
let obj2: { prop: string } = undefined;
console.log(obj2.prop);2. strictFunctionTypes
Wenn diese Option auf true gesetzt ist, aktiviert TypeScript die strenge Überprüfung von Funktionstypen, einschließlich der Bi-Varianz von Funktionsparametern, wodurch sichergestellt wird, dass Funktionsargumente streng auf Typkompatibilität überprüft werden.
Zum Beispiel:
{
"compilerOptions": {
"strictFunctionTypes": true
}
}Wenn diese Option aktiviert ist, erkennt TypeScript potenzielle Unstimmigkeiten zwischen Funktionsparametern zur Kompilierungszeit und hilft so, Laufzeitfehler durch die Übergabe falscher Argumente an Funktionen zu vermeiden.
// Example: Error - Argument of type 'number' is not assignable to parameter of type 'string'
function greet(name: string) {
console.log(`Hello, ${name}!`);
}
greet(123);3. noImplicitThis
Wenn diese Option auf true gesetzt ist, verbietet TypeScript die Verwendung von this mit einem impliziten Typ any. Dies hilft, mögliche Fehler bei der Verwendung von this in Klassenmethoden zu erkennen.
Zum Beispiel:
{
"compilerOptions": {
"noImplicitThis": true
}
}Wenn diese Option aktiviert ist, fängt TypeScript potenzielle Fehler ab, die durch die Verwendung von this ohne korrekte Typ-Annotationen oder Bindung in Klassenmethoden verursacht werden.
// Example: Error - The 'this' context of type 'void' is not assignable to method's 'this' of type 'MyClass'
class MyClass {
private prop: string;
constructor(prop: string) {
this.prop = prop;
}
printProp() {
console.log(this.prop);
}
}
let obj = new MyClass("Hello");
setTimeout(obj.printProp, 1000); // 'this' context is lost, potential error4. Ziel
Die Option target gibt die ECMAScript-Zielversion für deinen TypeScript-Code an. Sie bestimmt die Version von JavaScript, die der TypeScript-Compiler als Ausgabe erzeugen soll.
Zum Beispiel:
{
"compilerOptions": {
"target": "ES2018"
}
}Wenn diese Option auf „ES2018“ gesetzt ist, erzeugt TypeScript JavaScript-Code, der dem ECMAScript 2018 Standard entspricht.
Das kann nützlich sein, wenn du die neuesten JavaScript-Funktionen und -Syntax nutzen willst, aber auch die Abwärtskompatibilität mit älteren JavaScript-Umgebungen sicherstellen musst.
5. Modul
Die Option module gibt das Modulsystem an, das in deinem TypeScript-Code verwendet werden soll. Gängige Optionen sind „CommonJS„, „AMD„, „ES6„, „ES2015„, usw. Damit wird festgelegt, wie deine TypeScript-Module in JavaScript-Module kompiliert werden.
Zum Beispiel:
{
"compilerOptions": {
"module": "ES6"
}
}Wenn diese Option auf „ES6“ gesetzt ist, erzeugt TypeScript JavaScript-Code, der die ECMAScript 6 Modul-Syntax verwendet.
Das kann nützlich sein, wenn du mit einer modernen JavaScript-Umgebung arbeitest, die ECMAScript 6-Module unterstützt, z. B. in einer Frontend-Anwendung, die einen Modul-Bundler wie Webpack oder Rollup verwendet.
6. noUnusedLocals und noUnusedParameters
Diese Optionen ermöglichen es TypeScript, unbenutzte lokale Variablen bzw. Funktionsparameter abzufangen.
Wenn sie auf true gesetzt sind, gibt TypeScript Kompilierungsfehler für alle lokalen Variablen oder Funktionsparameter aus, die zwar deklariert, aber nicht im Code verwendet werden.
Ein Beispiel:
{
"compilerOptions": {
"noUnusedLocals": true,
"noUnusedParameters": true
}
}Dies sind nur einige weitere Beispiele für erweiterte Optionen zur Typüberprüfung in der tsconfig.json-Datei von TypeScript. In der offiziellen Dokumentation findest du noch mehr.
Best Practices und Tipps für die Verwendung von TypeScript
1. Typen für Variablen, Funktionsparameter und Rückgabewerte richtig annotieren
Einer der Hauptvorteile von TypeScript ist sein starkes Typisierungssystem, mit dem du die Typen von Variablen, Funktionsparametern und Rückgabewerten explizit angeben kannst.
Das verbessert die Lesbarkeit des Codes, fängt potenzielle typbezogene Fehler frühzeitig ab und ermöglicht eine intelligente Codevervollständigung in IDEs.
Hier ist ein Beispiel:
// Properly annotating variable types
let age: number = 25;
let name: string = "John";
let isStudent: boolean = false;
let scores: number[] = [98, 76, 89];
let person: { name: string, age: number } = { name: "John", age: 25 };
// Properly annotating function parameter and return types
function greet(name: string): string {
return "Hello, " + name;
}
function add(a: number, b: number): number {
return a + b;
}2. TypeScripts erweiterte Typfunktionen effektiv nutzen
TypeScript verfügt über eine Vielzahl von fortgeschrittenen Typfunktionen wie Generics, Unions, Überschneidungen, bedingte Typen und gemappte Typen. Diese Funktionen können dir helfen, flexibleren und wiederverwendbaren Code zu schreiben.
Hier ist ein Beispiel:
// Using generics to create a reusable function
function identity(value: T): T {
return value;
}
let num: number = identity(42); // inferred type: number
let str: string = identity("hello"); // inferred type: string
// Using union types to allow multiple types
function display(value: number | string): void {
console.log(value);
}
display(42); // valid
display("hello"); // valid
display(true); // error3. Wartbaren und skalierbaren Code mit TypeScript schreiben
TypeScript fördert das Schreiben von wartbaren und skalierbarerem Code, indem es Funktionen wie Schnittstellen, Klassen und Module bereitstellt.
Hier ist ein Beispiel:
// Using interfaces for defining contracts
interface Person {
name: string;
age: number;
}
function greet(person: Person): string {
return "Hello, " + person.name;
}
let john: Person = { name: "John", age: 25 };
console.log(greet(john)); // "Hello, John"
// Using classes for encapsulation and abstraction
class Animal {
constructor(private name: string, private species: string) {}
public makeSound(): void {
console.log("Animal is making a sound");
}
}
class Dog extends Animal {
constructor(name: string, breed: string) {
super(name, "Dog");
this.breed = breed;
}
public makeSound(): void {
console.log("Dog is barking");
}
}
let myDog: Dog = new Dog("Buddy", "Labrador");
myDog.makeSound(); // "Dog is barking"4. Nutzung von TypeScripts Tooling und IDE-Unterstützung
TypeScript verfügt über eine hervorragende Tooling- und IDE-Unterstützung mit Funktionen wie Autovervollständigung, Typinferenz, Refactoring und Fehlerprüfung.
Nutze diese Funktionen, um deine Produktivität zu steigern und potenzielle Fehler frühzeitig im Entwicklungsprozess zu erkennen. Achte darauf, dass du eine TypeScript-fähige IDE wie Visual Studio Code verwendest und das TypeScript-Plugin installierst, um den Code besser bearbeiten zu können.
Zusammenfassung
TypeScript bietet eine breite Palette an leistungsstarken Funktionen, die deine Webentwicklungsprojekte erheblich verbessern können.
Die starke statische Typisierung, das fortschrittliche Typsystem und die objektorientierten Programmierfähigkeiten machen es zu einem wertvollen Werkzeug für das Schreiben von wartbarem, skalierbarem und robustem Code. Die Werkzeuge und die IDE-Unterstützung von TypeScript sorgen außerdem für eine nahtlose Entwicklungserfahrung.
Wenn du TypeScript und seine Möglichkeiten kennenlernen möchtest, kannst du das mit dem Application Hosting von Kinsta noch heute tun.
