Nyttetyper i TypeScript
Denne artikkelen forklarer nyttetyper i TypeScript.
YouTube Video
Nyttetyper i TypeScript
Nyttetyper i TypeScript er praktiske verktøy for å lage nye typer basert på eksisterende typer. Dette muliggjør mer fleksible typedefinisjoner og øker gjenbrukbarheten av kode. Her vil vi forklare vanlige nyttetyper i detalj og diskutere hvordan man bruker hver enkelt med eksempler.
Partial<T>
Partial<T> gjør alle egenskaper i en objekttype valgfrie (tillater undefined). Det er nyttig når du kun vil bruke noen av egenskapene som den opprinnelige 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'
Forklaring:
I eksempelet ovenfor gjør bruk av Partial<User> alle egenskapene til User-typen valgfrie. Derfor kan du i updateUser-funksjonen sende inn kun et delsett av egenskapene.
Required<T>
Required<T> gjør alle egenskaper, inkludert valgfrie, påkrevde. Den brukes når du vil gjøre valgfrie egenskaper påkrevde.
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 });Forklaring:
Ved å bruke Required<User> behandles egenskaper som name og age som påkrevde.
Readonly<T>
Readonly<T> gjør alle egenskaper til et objekt skrivebeskyttede. Dette forhindrer at verdiene til objektet kan endres.
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);Forklaring:
Ved å bruke Readonly<T> kan du beskytte et objekts egenskaper fra å bli endret. Det er effektivt når du vil forhindre at data utilsiktet endres under utvikling.
Record<K, T>
Record<K, T> lager en karttype med spesifiserte nøkkel- og verdi-typer. K er typen for nøklene (for eksempel string eller number), og T er typen for verdiene.
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);Forklaring:
Record<K, T> er nyttig når du vil definere nøkkel-verdi-par. I eksempelet ovenfor er tillatelser definert basert på brukerroller.
Pick<T, K>
Pick<T, K> henter ut kun spesifiserte egenskaper fra en objekttype. Du kan lage en ny type ved å hente ut kun de nødvendige egenskapene.
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);Forklaring:
Ved å bruke Pick<T, K> kan du hente ut spesifikke egenskaper fra en objekttype og behandle dem som en ny type. For eksempel, kun id og name hentes ut i eksempelet ovenfor.
Omit<T, K>
Omit<T, K> ekskluderer bestemte egenskaper fra en objekttype. Dette er den motsatte operasjonen av 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);Forklaring:
Ved å bruke Omit<T, K> kan du lage en ny type ved å ekskludere bestemte egenskaper. I eksempelet ovenfor er email-egenskapen ekskludert.
Exclude<T, U>
Exclude<T, U> lager en ny type ved å fjerne typen U fra unionstypen T. Den brukes når du vil fjerne en spesifikk type.
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);Forklaring:
Ved å bruke Exclude<T, U> kan du fjerne unødvendige typer i en unionstype. I eksempelet ovenfor, siden "pending" er ekskludert, kan kun "active" eller "inactive" velges.
Extract<T, U>
Extract<T, U> trekker ut delene som samsvarer med typen U i unionstypen T. Den er nyttig når du vil trekke ut kun en spesifikk type.
1type Status = "active" | "inactive" | "pending";
2type ActiveStatus = Extract<Status, "active" | "pending">;
3
4const status: ActiveStatus = "active"; // "inactive" cannot be chosen
5console.log(status);Forklaring:
Extract<T, U> utfører den motsatte operasjonen av Exclude. I eksempelet ovenfor kan kun "active" og "pending" velges.
NonNullable<T>
NonNullable<T> lager en type der null og undefined er ekskludert. Den er nyttig når du vil ekskludere disse verdiene fra valgfrie typer.
1type UserName = string | null | undefined;
2type ValidUserName = NonNullable<UserName>;
3
4const name: ValidUserName = "Alice"; // null and undefined cannot be chosen
5console.log(name);Forklaring:
NonNullable<T> ekskluderer null og undefined fra en type som inneholder dem. Dette er nyttig når du vil sikre at en verdi definitivt eksisterer.
Konklusjon
TypeScript-nyttetyper er kraftige verktøy for å gjøre typedefinisjoner mer konsise og fleksible. Å forstå og bruke grunnleggende nyttetyper som Partial, Required, Readonly, Record osv. på riktig måte kan forbedre gjenbrukbarheten og vedlikeholdbarheten av koden. Å mestre disse typene gir mulighet for mer robuste og sikre typedefinisjoner, noe som legger til rette for effektiv utvikling.
TypeScripts keyof-operator
TypeScripts keyof-operator brukes til å hente alle egenskapsnavnene til en objekttype. Ved å bruke denne operatoren kan du hente nøklene til en objekttype som en unionstype. Dette er ekstremt nyttig for å skrive typesikker kode.
Grunnleggende bruk
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"
Eksempel på bruk
-
Bruke den i funksjonsargumenter
Du kan bruke
keyoftil å definere en funksjon som har typer basert på spesifikke egenskaper til et 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
-
Forbedre typerestriksjoner
Ved å bruke
keyofkan du sørge for at nøklene som sendes til en funksjon, blir validert under kompilering.
1// Passing an invalid property name results in an error
2const invalid = getProperty(person, "invalidKey"); // Error
Sammendrag
keyof-operatoren brukes til å hente alle egenskapsnavnene til en objekttype.- Du kan hente egenskapsnavnene som en unionstype og oppnå typesikker kode.
- Ved å bruke den i funksjonsargumenter kan du begrense funksjonen til kun å akseptere gyldige egenskapsnavn.
På denne måten forbedrer keyof-operatoren typesikkerheten i TypeScript og hjelper deg med å skrive mer robust kode.
Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.