Soorten nutsvoorzieningen

TypeScript biedt verschillende globale hulpprogrammatypen om algemene typetransformaties te vergemakkelijken. Deze typen zijn generiek en stellen u in staat declaratief nieuwe typen op te bouwen op basis van bestaande typen.

De vier meest gebruikte typen nutsvoorzieningen zijn:

1. Partial<T>

Maakt alle eigenschappen van het type T optioneel. Dit is uiterst handig voor update-/patchfuncties waarbij de beller mogelijk slechts een subset van velden opgeeft:

interface User {
  id: number;
  name: string;
  email: string;
}

// All properties of User become optional: { id?: number; name?: string; email?: string; }
type UserUpdate = Partial<User>;

2. Readonly<T>

Maakt alle eigenschappen van het type T alleen-lezen. Elke poging om een ​​eigenschap opnieuw toe te wijzen zal een compilatiefout tijdens het compileren veroorzaken:

interface Point {
  x: number;
  y: number;
}

const p: Readonly<Point> = { x: 10, y: 20 };
// p.x = 5; // Error: cannot assign to 'x' because it is a read-only property

3. Pick<T, Keys>

Creëert een type door alleen een specifieke set sleutels te selecteren (weergegeven door een tekenreeksvereniging) van het type T:

interface Article {
  id: number;
  title: string;
  content: string;
  views: number;
}

// Selects only 'title' and 'views': { title: string; views: number; }
type ArticlePreview = Pick<Article, 'title' | 'views'>;

4. Omit<T, Keys>

Creëert een type door een specifieke set sleutels van het type T te verwijderen. Het is de duale van Pick:

interface Product {
  id: number;
  name: string;
  price: number;
  secretVendorCode: string;
}

// Removes 'secretVendorCode': { id: number; name: string; price: number; }
type PublicProduct = Omit<Product, 'secretVendorCode'>;

5. Record<Keys, Type>

Creëert een objecttype waarvan de eigenschapssleutels Keys zijn en waarvan de eigenschapswaarden Type zijn. Het is uiterst handig voor het toewijzen van sleutels aan waarden, die woordenboeken of hashtabellen vertegenwoordigen (sleutel-waarde-kaarten):

type Page = 'home' | 'about' | 'contact';

interface PageInfo {
  title: string;
}

// Creates a dictionary with keys 'home' | 'about' | 'contact' and values PageInfo
const nav: Record<Page, PageInfo> = {
  home: { title: 'Home Page' },
  about: { title: 'About Us' },
  contact: { title: 'Contact Us' },
};

Probeer het zelf

Oefening 1: Profielupdate met gedeeltelijke

Oefening 2: Gevoelige velden verwijderen met Omit

Oefening 3: Openbare configuratie met Pick en Readonly

Oefening 4: Gebruikersregister met Record en Readonly