Verktygstyper i TypeScript

Den här artikeln förklarar verktygstyper i TypeScript.

YouTube Video

Verktygstyper i TypeScript

TypeScript-verktygstyper är bekväma verktyg för att skapa nya typer baserade på befintliga typer. Detta möjliggör mer flexibla typdefinitioner och ökar kodens återanvändbarhet. Här kommer vi att förklara vanligt använda verktygstyper i detalj och diskutera hur man använder var och en med exempel på kod.

Partial<T>

Partial<T> gör alla egenskaper i en objekttyp valfria (tillåter undefined). Det är användbart när du bara vill använda några av de egenskaper som den ursprungliga typen har.

 1interface User {
 2  id: number;
 3  name: string;
 4  age: number;
 5}
 6
 7function updateUser(user: Partial<User>) {
 8  console.log(user);
 9}
10
11updateUser({ name: "Alice" }); // Updates only 'name'

Förklaring:

I exemplet ovan gör användningen av Partial<User> alla egenskaper i typen User valfria. Därför kan du i funktionen updateUser skicka endast en delmängd av egenskaperna.

Required<T>

Required<T> gör alla egenskaper, inklusive de valfria, obligatoriska. Den används när du vill göra valfria egenskaper obligatoriska.

 1interface User {
 2  id: number;
 3  name?: string;
 4  age?: number;
 5}
 6
 7function createUser(user: Required<User>) {
 8  console.log(user);
 9}
10
11// createUser({ id: 1 }); // Error: 'name' and 'age' are required
12createUser({ id: 1, name: "Alice", age: 25 });

Förklaring:

Genom att använda Required<User> behandlas egenskaper som name och age som obligatoriska.

Readonly<T>

Readonly<T> gör alla egenskaper i ett objekt skrivskyddade. Detta förhindrar att objektets värden ändras.

 1interface User {
 2  id: number;
 3  name: string;
 4}
 5
 6const user: Readonly<User> = {
 7  id: 1,
 8  name: "Alice"
 9};
10
11// user.id = 2; // Error: 'id' is read-only
12console.log(user);

Förklaring:

Genom att använda Readonly<T> kan du skydda ett objekts egenskaper från att ändras. Det är effektivt när du vill förhindra att data ändras av misstag under utvecklingen.

Record<K, T>

Record<K, T> skapar en karttyp med specificerade nyckel- och värdetyper. K är typen för nycklarna (såsom string eller number), och T är typen för värdena.

 1type Roles = "admin" | "user" | "guest";
 2interface Permissions {
 3  read: boolean;
 4  write: boolean;
 5}
 6
 7const rolePermissions: Record<Roles, Permissions> = {
 8  admin: { read: true, write: true },
 9  user: { read: true, write: false },
10  guest: { read: false, write: false },
11};
12
13console.log(rolePermissions);

Förklaring:

Record<K, T> är användbart när du vill definiera nyckel-värde-par. I exemplet ovan definieras behörigheter baserat på användarroller.

Pick<T, K>

Pick<T, K> extraherar endast specificerade egenskaper från en objekttyp. Du kan skapa en ny typ genom att extrahera endast de nödvändiga egenskaperna.

 1interface User {
 2  id: number;
 3  name: string;
 4  age: number;
 5}
 6
 7type UserSummary = Pick<User, "id" | "name">;
 8
 9const summary: UserSummary = {
10  id: 1,
11  name: "Alice"
12};
13
14console.log(summary);

Förklaring:

Genom att använda Pick<T, K> kan du extrahera specifika egenskaper från en objekttyp och behandla dem som en ny typ. Till exempel extraheras endast id och name i exemplet ovan.

Omit<T, K>

Omit<T, K> utesluter specificerade egenskaper från en objekttyp. Detta är motsatt operation till Pick.

 1interface User {
 2  id: number;
 3  name: string;
 4  age: number;
 5  email: string;
 6}
 7
 8type UserWithoutEmail = Omit<User, "email">;
 9
10const userWithoutEmail: UserWithoutEmail = {
11  id: 1,
12  name: "Alice",
13  age: 25
14};
15
16console.log(userWithoutEmail);

Förklaring:

Genom att använda Omit<T, K> kan du skapa en ny typ genom att utesluta specificerade egenskaper. I exemplet ovan är egenskapen email utesluten.

Exclude<T, U>

Exclude<T, U> skapar en ny typ genom att ta bort typen U från unionstypen T. Det används när du vill ta bort en specifik typ.

1type Status = "active" | "inactive" | "pending";
2type ExcludedStatus = Exclude<Status, "pending">;
3
4const status: ExcludedStatus = "active"; // "pending" is excluded, so it cannot be chosen
5console.log(status);

Förklaring:

Genom att använda Exclude<T, U> kan du ta bort onödiga typer inom en unionstyp. I exemplet ovan, eftersom "pending" är uteslutet, kan endast "active" eller "inactive" väljas.

Extract<T, U>

Extract<T, U> extraherar de delar som matchar typen U inom unionstypen T. Det är användbart när du vill extrahera endast en specifik typ.

1type Status = "active" | "inactive" | "pending";
2type ActiveStatus = Extract<Status, "active" | "pending">;
3
4const status: ActiveStatus = "active"; // "inactive" cannot be chosen
5console.log(status);

Förklaring:

Extract<T, U> utför motsatt operation till Exclude. I exemplet ovan kan endast "active" och "pending" väljas.

NonNullable<T>

NonNullable<T> skapar en typ där null och undefined är uteslutna. Det är hjälpsamt när du vill utesluta dessa värden från valfria typer.

1type UserName = string | null | undefined;
2type ValidUserName = NonNullable<UserName>;
3
4const name: ValidUserName = "Alice"; // null and undefined cannot be chosen
5console.log(name);

Förklaring:

NonNullable<T> utesluter null och undefined från en typ som innehåller dem. Detta är användbart när du vill säkerställa att ett värde definitivt existerar.

Slutsats

TypeScripts hjälpverktygstyp är kraftfulla verktyg för att göra typ-definitioner mer koncisa och flexibla. Att förstå och använda grundläggande hjälpverktygstyp som Partial, Required, Readonly, Record, etc., på ett lämpligt sätt kan förbättra återanvändbarheten och underhållbarheten i koden. Att behärska dessa typer möjliggör mer robust och säker typ-definition, vilket underlättar effektiv utveckling.

TypeScripts keyof-operatör

TypeScripts keyof-operatör används för att hämta alla egenskapsnamn av en objekttyp. Genom att använda denna operator kan du få nycklarna för en objekttyp som en unionstyp. Detta är extremt användbart för att skriva typsäkert kod.

Grundläggande användning

1interface Person {
2    name: string;
3    age: number;
4    email: string;
5}
6
7// Use keyof to get the property names of Person
8type PersonKeys = keyof Person; // "name" | "age" | "email"

Exempel på användning

1. Använda den i funktionsargument

   Du kan använda keyof för att definiera en funktion som har typer baserade på specifika egenskaper hos ett objekt.

1function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
2    return obj[key];
3}
4
5const person: Person = { name: "Alice", age: 30, email: "alice@example.com" };
6const name = getProperty(person, "name"); // type is string
7const age = getProperty(person, "age");   // type is number

2. Förbättra typbegränsningar

   Genom att använda keyof kan du säkerställa att de nycklar som skickas till en funktion valideras vid kompilering.

1// Passing an invalid property name results in an error
2const invalid = getProperty(person, "invalidKey"); // Error

Sammanfattning

• keyof-operatorn används för att hämta alla egenskapsnamn för en objekttyp.
• Du kan erhålla egenskapsnamnen som en unionstyp och uppnå typsäker kod.
• Genom att använda den i funktionsargument kan du begränsa funktionen till att endast acceptera giltiga egenskapsnamn.

På detta sätt förbättrar keyof-operatorn typskyddet i TypeScript och hjälper dig att skriva mer robust kod.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video