Erweiterte TypeScript-Konzepte, die jeder Entwickler kennen sollte

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.

1. Unionstypen

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";
  }
}

2. Kreuzungstypen

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.

3. Geben Sie Guards ein

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.

Beispiel

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.

4. Bedingte Typen

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?.

Beispiel

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.

5. Zugeordnete Typen

Mit zugeordneten Typen können Sie vorhandene Typen in neue umwandeln, indem Sie auf jede Eigenschaft eine Transformation anwenden.

Beispiel

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.

6. Vorlagenliteraltypen

Mit Vorlagenliteraltypen können Sie Typen durch die Kombination von Zeichenfolgenliteralen erstellen und so Ihre Typdefinitionen ausdrucksvoller gestalten.

Beispiel

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.

7. Rekursive Typen

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.

Beispiel

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).

Abschluss

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.

Zusätzliche Ressourcen

• TypeScript-Dokumentation
• TypeScript GitHub Repository

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!