Heim > Web-Frontend > js-Tutorial > Entfesseln Sie die Leistungsfähigkeit von Dienstprogrammtypen in TypeScript

Entfesseln Sie die Leistungsfähigkeit von Dienstprogrammtypen in TypeScript

Patricia Arquette
Freigeben: 2024-11-11 18:44:03
Original
248 Leute haben es durchsucht

Unleashing the Power of Utility Types in TypeScript

Hey, TypeScript-Krieger! ? Sie stecken also mitten in TypeScript und haben sich vielleicht schon einmal gefragt: „Warum gibt es so viel Code nur zum Verwalten von Typen?“ Keine Sorge – Sie sind nicht allein. Wir sind alle zusammen auf dieser wilden, statisch typisierten Fahrt.

Heute tauchen wir in einige der coolsten Tools von TypeScript ein: Utility Types. Dies sind wie die kleinen Cheat-Codes in einem Videospiel, die Ihnen helfen, Ihren Code zu beschleunigen und zu vereinfachen. Also krempeln wir die Ärmel hoch und machen einen unterhaltsamen Rundgang durch die nützlichsten Dienstprogrammtypen in TypeScript – und wie sie Ihren Code deutlich weniger stressig machen können.

Was? Weitere Typen.

Stellen Sie sich vor, Sie versuchen, mit TypeScript-Typen zu arbeiten, ohne alles von Grund auf neu zu schreiben (denn wer hat dafür Zeit?). Mithilfe von Dienstprogrammtypen können Sie neue Typen erstellen, indem Sie Teile anderer Typen umwandeln oder wiederverwenden. Stellen Sie sich das als schicke Küchenhelfer vor, die ohne großen Aufwand schneiden und würfeln können. Sie sparen Zeit, reduzieren Redundanz und erleichtern die Verwaltung Ihres Codes erheblich. Lassen Sie uns sie einzeln aufschlüsseln!

Teilweise

Was es bewirkt: Macht alle Eigenschaften in einem Typ optional. Ja, so einfach ist das.

Warum Sie es lieben werden: Perfekt für Zeiten, in denen Sie einen Teil eines Objekts benötigen, aber nicht alles.

type User = {
  id: number;
  name: string;
  email: string;
};

function updateUser(id: number, newValues: Partial<User>) {
  // Update only the properties you need, no need to bring everything.
}

updateUser(1, { name: "Ash" }); // Only updating name, thanks to Partial!

Nach dem Login kopieren
Nach dem Login kopieren

Erforderlich

Was es tut: Macht alle Eigenschaften in einem Typ obligatorisch. TypeScripts kleine Art zu sagen: „Kein Feld überspringen!“

Warum Sie es lieben werden: Manchmal ist optional einfach keine Option. Sie müssen alles gesperrt und geladen haben, insbesondere wenn bestimmte Eigenschaften zuvor optional waren.

type UserWithOptionalFields = {
  id: number;
  name?: string;
  email?: string;
};

const user: Required<UserWithOptionalFields> = {
  id: 1,
  name: "John",
  email: "john@example.com",
}; // All properties are now required!
Nach dem Login kopieren
Nach dem Login kopieren

Record

Was es tut: Erstellt einen Objekttyp mit den Schlüsseln Schlüssel und Werte Typ. Betrachten Sie es als die Funktion „Erstellen Sie Ihr eigenes Wörterbuch“ von TypeScript.

Warum Sie It lieben werden: Dieser Typ ist Ihr bester Freund, wenn Sie eine schnelle und einfache Möglichkeit zum Zuordnen von Daten suchen, insbesondere wenn Sie die Schlüssel im Voraus kennen.

type Role = "admin" | "user" | "guest";

const rolePermissions: Record<Role, string[]> = {
  admin: ["read", "write", "delete"],
  user: ["read", "write"],
  guest: ["read"],
};
Nach dem Login kopieren
Nach dem Login kopieren

Wählen Sie

Was es tuts: Nimmt einen vorhandenen Typ und wählt nur die von Ihnen angegebenen Eigenschaften aus. Betrachten Sie es als die Art und Weise, wie TypeScript sagt: „Halten wir es kurz und bündig.“

Warum Sie es lieben werden: Perfekt zum Erstellen von Teilmengen eines vorhandenen Typs, ohne alles mitschleppen zu müssen, und weil es einer meiner Favoriten ist.

type User = {
  id: number;
  name: string;
  email: string;
  age: number;
};

type UserPreview = Pick<User, "id" | "name">;
Nach dem Login kopieren

weglassen

Was es tut: Es ist das Gegenteil von Pick. Damit können Sie bestimmte Eigenschaften von einem Typ ausschließen.

Warum Sie es lieben werden: Großartig, wenn Sie einen Typ haben, aber nur ein lästiges Feld haben, das Sie nicht möchten.

type User = {
  id: number;
  name: string;
  email: string;
};

function updateUser(id: number, newValues: Partial<User>) {
  // Update only the properties you need, no need to bring everything.
}

updateUser(1, { name: "Ash" }); // Only updating name, thanks to Partial!

Nach dem Login kopieren
Nach dem Login kopieren

Exclude

Was es tut: Entfernt bestimmte Typen aus einer Union. Es ist der „Kick aus dem Gruppenchat“ von TypeScript.

Warum Sie es lieben werden: Es ist super nützlich, wenn Sie eine große Gewerkschaft haben, aber nur einige Fälle bearbeiten müssen.

type UserWithOptionalFields = {
  id: number;
  name?: string;
  email?: string;
};

const user: Required<UserWithOptionalFields> = {
  id: 1,
  name: "John",
  email: "john@example.com",
}; // All properties are now required!
Nach dem Login kopieren
Nach dem Login kopieren

Extrahieren

Was es tut: Das Zwillingsgeschwister von Exclude, Extract behält nur die Typen, die einer bestimmten Union entsprechen.

Warum Sie es lieben werden: Dieser Typ schränkt einen Verbindungstyp auf nur relevante Teile ein.

type Role = "admin" | "user" | "guest";

const rolePermissions: Record<Role, string[]> = {
  admin: ["read", "write", "delete"],
  user: ["read", "write"],
  guest: ["read"],
};
Nach dem Login kopieren
Nach dem Login kopieren

Und da haben Sie es! ? Auch wenn Extract und Pick ähnlich klingen, eignen sie sich auf einzigartige Weise für unterschiedliche Aufgaben: Extract ist Ihr Filter für Union-Typen, während Picklets Sie Eigenschaften aus Objekttypen herauspicken. Das Gleiche gilt für ihre Gegenstücke Exclude und Omit.

Diese Utility-Typen sind klein, aber oho! Sie sparen Zeit, reduzieren Code-Redundanz und sorgen für Ordnung. Wenn Sie also das nächste Mal mit Typen ringen, denken Sie an diese Helfer. Sie werden da sein, um Ihre TypeScript-Reise zu vereinfachen und ein wenig mehr Spaß zu machen. Viel Spaß beim Programmieren und mögen Ihre Typen immer genau das sein, was Sie brauchen! ?

Das obige ist der detaillierte Inhalt vonEntfesseln Sie die Leistungsfähigkeit von Dienstprogrammtypen in TypeScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage