ts-utility-type

Utility Type

In TS gibt es einen Typ namens Utility Types, der uns hilft, bestehende Typen zu modifizieren, ohne sie zu ändern.

Partial<Type>

Es ist das genaue Gegenteil von Required<Type>. Es macht alle Eigenschaften des gegebenen Typs optional.

interface Person {
  name: string;
  age: number;
  adress?: string;
}

const person1: Person = {
  name: "John",
  age: 30,
};

type PartialPerson = Partial<Person>;

const person2: PartialPerson = {
  name: "John",
};

Dieses Codebeispiel zeigt die Verwendung des Partial Utility Types in TypeScript.

  • Zunächst wird ein Person-Interface definiert. Dieses Interface enthält die Eigenschaften name und age als obligatorisch und die Eigenschaft adress als optional.
  • Das person1-Objekt wird gemäß dem Person-Interface erstellt. Die Eigenschaften name und age werden angegeben, die optionale Eigenschaft adress wird weggelassen.
  • Dann wird mit Partial<Person> der PartialPerson-Typ erstellt. Der Partial Utility macht alle Eigenschaften des Person-Interfaces optional.
  • Schließlich wird das person2-Objekt vom Typ PartialPerson erstellt. Dieses Objekt enthält nur die Eigenschaft name, da durch Partial alle Eigenschaften optional geworden sind.

Somit können wir dank des Partial Utility Types ein Objekt erstellen, das nur die gewünschten Eigenschaften enthält, ohne alle Eigenschaften des ursprünglichen Person-Interfaces einschließen zu müssen.

Required<Type>

Macht alle Eigenschaften (Properties) des als Parameter übergebenen Typs (Type) obligatorisch.

interface Person {
  name: string;
  age: number;
  adress?: string;
}

const person1: Person = {
  name: "John",
  age: 30,
};


type RequiredPerson = Required<Person>;

const person3: RequiredPerson = {
  name: "John",
  age: 30,
  adress: "New York",
  // email: "john@example" // die Email Eigenschaft sollte unbedingt verwendet werden
};

Dieses Codebeispiel zeigt die Verwendung des Required Utility-Typs in TypeScript.

  • Zunächst wird ein Person-Interface definiert. In diesem Interface sind name und age obligatorisch, während adress optional ist (gekennzeichnet durch das Fragezeichen).
  • Das person1-Objekt wird gemäß dem ursprünglichen Person-Interface erstellt. Es enthält nur die obligatorischen Eigenschaften name und age.
  • Anschließend wird der Typ RequiredPerson mit Required<Person> erstellt. Der Required Utility-Typ macht alle Eigenschaften des Person-Interfaces obligatorisch.
  • Schließlich wird das person3-Objekt vom Typ RequiredPerson erstellt. Dieses Objekt muss nun alle Eigenschaften (name, age und adress) enthalten, da Required sie alle obligatorisch gemacht hat.

Somit haben wir mit dem Required Utility-Typ alle Eigenschaften des ursprünglichen Person-Interfaces obligatorisch gemacht. Dies ist nützlich in Situationen, in denen wir sicherstellen wollen, dass ein Objekt einer bestimmten Struktur genau entspricht.

Hinweis: Im Codebeispiel gibt es einen Kommentar, der besagt, dass die Email-Eigenschaft unbedingt verwendet werden sollte, aber diese Eigenschaft ist im ursprünglichen Person-Interface nicht definiert. Dies könnte ein Fehler oder eine unvollständige Definition sei

Pick<Type, Keys>

Ermöglicht es uns, aus einem gegebenen Typ einige Eigenschaften auszuwählen und einen neuen Typ zu erstellen.

// ! Pick erlaubt es, nur bestimmte Eigenschaften eines Types zu extrahieren
// ! Pick, bir türün yalnızca belirli özelliklerini çıkarmanıza olanak tanır
// ! Pick allows you to extract only certain properties of a type
interface Product {
    id: number;
    name: string;
    price: number;
    description: string;
    price: number;
    category: string;
}

const product_eins: Product = {
    id: 1,
    name: "Product 1",
    price: 100,
    description: "Description",
    category: "Category"
}

console.log(product_eins)

type PickProduct = Pick<Product, "id" | "name" | "price">;

const product_zwei: PickProduct = {
    id: 2,
    name: "Product 2",
    price: 200
}

console.log(product_zwei)

Dieses Codebeispiel zeigt die Verwendung des Pick Utility-Types in TypeScript.

  • Zunächst wird ein Product Interface definiert. Dieses Interface enthält folgende Eigenschaften:
  • id: number
  • name: string
  • price: number
  • description: string
  • category: string

Dann wird mit Pick<Product, "id" | "name" | "price"> der PickProduct-Typ erstellt:

type PickProduct = Pick<Product, "id" | "name" | "price">;

Dieser neue Pick Product-Typ enthält nur die Eigenschaften "id", "name" und "price" aus dem ursprünglichen Product Interface. Der Pick Utility-Typ ermöglicht es Ihnen, bestimmte Eigenschaften aus einem vorhandenen Typ auszuwählen und einen neuen Typ zu erstellen.

Schließlich wird ein Objekt namens product_zwei vom Typ PickProduct erstellt:

const product_zwei: PickProduct = {
    id: 2,
    name: "Product 2",
    price: 200
}

Dieses Objekt muss nur die im PickProduct-Typ angegebenen Eigenschaften ("id", "name" und "price") enthalten.

Der Pick Utility-Typ ist nützlich, wenn Sie einen neuen Typ erstellen möchten, der nur bestimmte Eigenschaften eines vorhandenen Typs enthält.

Omit<Type, Keys>

Man kann sich Omit<Type, Keys> als das Gegenteil von Pick<Type,Keys> vorstellen. Anstatt einige Eigenschaften aus einem Typ auszuwählen und einen neuen Typ zu erstellen, ermöglicht es uns, einige Eigenschaften zu entfernen und einen neuen Typ zu erstellen.

// ! Omit entfernt bestimmte Eigenschaften
// ! Omit removes certain properties
// ! Omit belirli özellikleri kaldırır

type ProductWithOutDesc = Omit<Product, "desc">

const product_drei: ProductWithOutDesc = {
    id: 3,
    name: "Laptop",
    price: 1200,
    category: "Electronics"
}

console.log(product_drei);

Dieses Codebeispiel zeigt die Verwendung des Omit Utility-Typs in TypeScript.

  • Zunächst wird ein neuer Typ mit dem Omit Utility-Typ erstellt: Dies erstellt einen neuen Typ, indem es die Eigenschaft "desc" aus dem Typ Product entfernt.

type ProductWithOutDesc = Omit<Product, "desc">
  • Dann wird ein Objekt mit diesem neuen Typ erstellt:
const product_drei: ProductWithOutDesc = {
    id: 3,
    name: "Laptop",
    price: 1200,
    category: "Electronics"
}

Dieses Objekt enthält alle Eigenschaften des Typs Product, außer der Eigenschaft "desc", entsprechend dem Typ ProductWithOutDesc.

  • Schließlich wird das erstellte Objekt mit console.log ausgegeben:

Der Omit Utility-Typ ist nützlich, wenn Sie einen neuen Typ erstellen möchten, indem Sie bestimmte Eigenschaften aus einem vorhandenen Typ entfernen. In diesem Beispiel wurde ein neuer Typ erstellt, indem die Eigenschaft "desc" aus dem Typ Product entfernt wurde

Record<Keys, Type>

Ermöglicht uns, einen neuen Typ zu erstellen, indem zwei gegebene Typen als Schlüssel-Wert-Paare kombiniert werden. Der erste Parameter wird als Schlüssel und der zweite Parameter als Wert verwendet.

type PermissionLevel = "ADMIN" | "USER" | "GUEST";

type Permission = Record<PermissionLevel, string[]>;

const userPermission: Permission = {
  ADMIN: ["READ", "WRITE", "DELETE"],
  USER: ["READ", "UPDATE"],
  GUEST: ["READ"],
};

if (userPermission.ADMIN.includes("WRITE")) {
  console.log("Yuu are admin");
  
} else if (userPermission.USER.includes("UPDATE")) {
  console.log("You are user");
}else if (userPermission.GUEST.includes("READ")) {
  console.log("You are guest");
}

Dieses Codebeispiel zeigt die Verwendung des Record Utility-Typs in TypeScript.

  • Zunächst wird ein BerechtigungsEbene-Typ definiert:
type PermissionLevel = "ADMIN" | "USER" | "GUEST";

Dies ist ein Union-Typ mit drei möglichen Werten.

  • Dann wird der Berechtigung-Typ mit dem Record Utility-Typ erstellt:
type Permission = Record<PermissionLevel, string[]>;

Dies erstellt einen Objekttyp, der für jede BerechtigungsEbene ein Array von Strings enthält.

  • Ein benutzerBerechtigung-Objekt wird erstellt:
const userPermission: Permission = {
  ADMIN: ["READ", "WRITE", "DELETE"],
  USER: ["READ", "UPDATE"],
  GUEST: ["READ"],
};

Dieses Objekt enthält die erlaubten Aktionen für jede Berechtigungsebene.

  • Schließlich wird ein if-else-Block verwendet, um die Berechtigung des Benutzers zu überprüfen:
if (userPermission.ADMIN.includes("WRITE")) {
  console.log("Yuu are admin");
} else if (userPermission.USER.includes("UPDATE")) {
  console.log("You are user");
} else if (userPermission.GUEST.includes("READ")) {
  console.log("You are guest");
}

Dieser Block gibt eine entsprechende Meldung in der Konsole aus, je nach Berechtigung des Benutzers.

Der Record Utility-Typ ist nützlich für die Definition von Schlüssel-Wert-Paaren eines Objekts. In diesem Beispiel wird er verwendet, um verschiedene Berechtigungsebenen und die dazugehörigen Berechtigungen zu definieren.

Readonly<Type>

Mit diesem Utility-Typ können Sie einen neuen Typ erstellen, bei dem alle Eigenschaften des gegebenen Typs schreibgeschützt (readonly) sind.

type ReadOnlyProduct = Readonly<Product>;
const product_four: Product = {
  id: 1,
  name: "Product 4",
  price: 100,
  description: "Description",
  category: "Category",
};

product_four.price = 200; // erlaubt, weil die Eigenschaft nicht readonly ist

const product_five: ReadOnlyProduct = {
  id: 1,
  name: "Product 5",
  price: 100,
  description: "Description",
  category: "Category",
};

// product_five.price = 200; // Error, weil die Eigenschaft readonly ist

Dieses Beispiel zeigt die Verwendung des Readonly Utility-Typs in TypeScript:

  • Zunächst wird ein neuer Typ namens ReadOnlyProduct erstellt:
type ReadOnlyProduct = Readonly<Product>;

Dies erstellt einen neuen Typ, bei dem alle Eigenschaften des Product-Typs schreibgeschützt sind.

  • Dann wird ein normales Product-Objekt erstellt:
const product_four: Product = {
  id: 1,
  name: "Product 4",
  price: 100,
  description: "Description",
  category: "Category",
};

Die Eigenschaften dieses Objekts können verändert werden.

  • Zum Beispiel kann der Preis geändert werden:
product_four.price = 200; // erlaubt, weil die Eigenschaft nicht readonly ist
  • Anschließend wird ein Objekt vom Typ ReadOnlyProduct erstellt:
const product_five: ReadOnlyProduct = {
  id: 1,
  name: "Product 5",
  price: 100,
  description: "Description",
  category: "Category",
};

Alle Eigenschaften dieses Objekts sind schreibgeschützt.

  • Schließlich wird in der Kommentarzeile gezeigt, dass der Versuch, eine Eigenschaft dieses schreibgeschützten Objekts zu ändern, einen Fehler verursachen würde:
// product_five.price = 200; // Fehler, weil die Eigenschaft readonly ist

Der Readonly Utility-Typ ist nützlich, wenn Sie verhindern möchten, dass die Eigenschaften eines Objekts geändert werden. Dies ist besonders hilfreich beim Erstellen unveränderlicher (immutable) Datenstrukturen.

Exclude<Type>

type BasicColors = "RED" | "BLUE" | "GREEN" | "YELLOW" | "BLACK" | "WHITE";

type RealColors = Exclude<BasicColors, "BLACK" | "WHITE">;

function showColors(color: RealColors) {
  console.log(color);
}

// showColors("BLACK"); // Error

showColors("RED");

Dieses Codebeispiel zeigt die Verwendung des Exclude Utility Types in TypeScript.

  • Zunächst wird ein Union-Typ namens BasicColors definiert:
type BasicColors = "RED" | "BLUE" | "GREEN" | "YELLOW" | "BLACK" | "WHITE";

Dies ist ein Typ, der sechs Grundfarben enthält.

  • Dann wird mit dem Exclude Utility Type ein neuer Typ namens RealColors erstellt:
type RealColors = Exclude<BasicColors, "BLACK" | "WHITE">;

Dies erstellt einen neuen Typ, indem "BLACK" und "WHITE" aus BasicColors ausgeschlossen werden.

  • Eine Funktion namens showColors wird definiert:
function showColors(color: RealColors) {
  console.log(color);
}

Diese Funktion akzeptiert nur einen Parameter vom Typ RealColors.

  • Wie in der Kommentarzeile gezeigt, würde es einen Fehler verursachen, wenn man versucht, die Farbe "BLACK" als Parameter an diese Funktion zu übergeben:
// showColors("BLACK"); // Error

Denn "BLACK" ist nicht im Typ RealColors enthalten.

  • Schließlich wird die Funktion mit der Farbe "RED" aufgerufen:
showColors("RED");

Dies ist ein gültiger Aufruf, da "RED" im Typ RealColors enthalten ist.

Der Exclude Utility Type ist nützlich, wenn Sie einen neuen Typ erstellen möchten, indem Sie bestimmte Werte aus einem vorhandenen Typ ausschließen. In diesem Beispiel wurde ein neuer Farbtyp erstellt, indem Schwarz und Weiß aus den Grundfarben ausgeschlossen wurden.

Popular Tag
TypeScript Utility
Share:

Kommentar hinterlassen