TypeScript ist eine leistungsstarke Obermenge von JavaScript, die statische Typisierung und andere Funktionen hinzufügt, um das Entwicklungserlebnis zu verbessern. Während viele Entwickler mit den Grundlagen vertraut sind, kann die Beherrschung fortgeschrittener TypeScript-Konzepte Ihre Fähigkeit, robusten, wartbaren und skalierbaren Code zu schreiben, erheblich verbessern. Hier sind 10 fortgeschrittene TypeScript-Konzepte, die jeder Entwickler kennen sollte.
Union-Typen ermöglichen es einer Variablen, einen von mehreren Typen zu enthalten, was Ihnen die Flexibilität gibt, verschiedene Datentypen zu verarbeiten und gleichzeitig die Typsicherheit beizubehalten. Es ist, als hätte man ein Multitool ?️, das verschiedene Aufgaben bewältigen kann.
Example 1:
let value: string | number;
value = "Hello";
console.log(value); // "Hello"
value = 123;
console.log(value); // 123
Example 2:
type status = "review" | "published" | "expired";
function getJobStatus(status: status): string {
switch (status) {
case "review":
return "Job is on Review";
case "published":
return "Job is Published";
case "expired":
return "Job is Expired";
default:
return "Unknown status";
}
}
Schnittpunkttypen kombinieren mehrere Typen zu einem, was erfordert, dass eine Variable alle Eigenschaften der kombinierten Typen aufweist.
interface Person {
name: string;
age: number;
}
interface Employee {
employeeId: number;
}
type Developer = Person & Employee;
const emp: Developer = {
name: "Alice",
age: 25,
employeeId: 12345
};
console.log(emp);
In diesem Beispiel haben wir zwei Typen definiert, Person und Mitarbeiter, und dann eine Schnittmenge verwendet, um einen Entwicklertyp zu erstellen, der die Eigenschaften „Mitarbeiter“ und „Person“ kombiniert. Dies stellt die Identität und Rolle eines Entwicklers in der Organisation dar.
Typwächter helfen Ihnen, den Typ einer Variablen innerhalb eines bedingten Blocks einzugrenzen und so die Typsicherheit zu gewährleisten. Betrachten Sie sie als Sicherheitstürsteher? in einem Nachtclub, nur die richtigen Typen reinlassen.
function isString(value: any): value is string {
return typeof value === "string";
}
function printValue(value: string | number) {
if (isString(value)) {
console.log(value.toUpperCase());
} else {
console.log(value.toFixed());
}
}
printValue("Hello"); // "HELLO"
printValue(123); // "123"
Typwächter: weil wir alle ein wenig Sicherheit in unserem Leben brauchen.
Bedingte Typen ermöglichen Ihnen das Erstellen von Typen basierend auf Bedingungen und bieten leistungsstarke Typtransformationen. Es ist wie ein Abenteuerbuch, bei dem man sein eigenes Abenteuer auswählt?.
type IsString<T> = T extends string ? "Yes" : "No"; type Result1 = IsString<string>; // "Yes" type Result2 = IsString<number>; // "No"
Bedingte Typen sind unglaublich leistungsfähig und ermöglichen es Ihnen, dynamische und flexible Typen basierend auf Bedingungen zu erstellen.
Mit zugeordneten Typen können Sie vorhandene Typen in neue umwandeln, indem Sie auf jede Eigenschaft eine Transformation anwenden.
type Readonly<T> = {
readonly [P in keyof T]: T[P];
};
interface Todo {
title: string;
description: string;
}
const todo: Readonly<Todo> = {
title: "Learn TypeScript",
description: "Study advanced concepts"
};
// todo.title = "New Title"; // Error: Cannot assign to 'title' because it is a read-only property.
type Nullable<T> = {
[P in keyof T]: T[P] | null;
};
interface User {
id: number;
name: string;
email: string;
}
type NullableUser = Nullable<User>;
type NullableUser = {
id: number | null;
name: string | null;
email: string | null;
};
// In this example, Nullable transforms each property of User to also accept null.
Mit Vorlagenliteraltypen können Sie Typen durch die Kombination von Zeichenfolgenliteralen erstellen und so Ihre Typdefinitionen ausdrucksvoller gestalten.
type Color = "red" | "green" | "blue";
type Brightness = "light" | "dark";
type Theme = `${Brightness}-${Color}`;
const theme1: Theme = "light-red";
const theme2: Theme = "dark-blue";
// const theme3: Theme = "bright-yellow"; // Error: Type '"bright-yellow"' is not assignable to type 'Theme'.
Mit Vorlagenliteraltypen können Sie einen Designtyp definieren, der dem Muster „Helligkeit-Farbe“ folgen muss. Es ist, als würden Sie Ihren Typen einen Styleguide geben, dem sie folgen können.
Rekursive Typen sind Typen, die auf sich selbst verweisen und es Ihnen ermöglichen, komplexe Datenstrukturen wie Bäume und verknüpfte Listen zu modellieren.
Erstellen eines rekursiven Typs für eine Baumstruktur:
interface TreeNode {
value: number;
left?: TreeNode;
right?: TreeNode;
}
const tree: TreeNode = {
value: 1,
left: {
value: 2,
left: { value: 3 },
right: { value: 4 }
},
right: {
value: 5
}
};
Rekursive Typen: Denn manchmal braucht man Typen, die ewig weitergehen, wie eine Endlosschleife (aber auf eine gute Art).
TypeScript ist ein leistungsstarkes Tool, und die Beherrschung dieser fortgeschrittenen Konzepte kann Ihren Code robuster, wartbarer und einfach beeindruckender machen. Wenn Sie diese erweiterten Funktionen weiter erkunden, werden Sie feststellen, dass Ihr Code prägnanter, Ihre Typdefinitionen präziser und Ihr gesamter Entwicklungsworkflow reibungsloser wird.
Viel Spaß beim Codieren! ?
Das obige ist der detaillierte Inhalt vonErweiterte TypeScript-Konzepte, die jeder Entwickler kennen sollte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
