spinny:~/writing $ vim advanced-typescript-patterns.md
1~2TypeScript er blevet industristandarden for storstilet webudvikling. Mens de fleste udviklere kender det grundlæggende om interfaces og typer, ligger den virkelige kraft i dets avancerede typesystem. Her er 5 mønstre, der vil adskille dig som seniorudvikler.3~4## 1. Generic Constraints5~6Generics er kraftfulde, men nogle gange har du brug for at begrænse, hvad der kan sendes ind. `extends` er din ven her.7~8```typescript9interface HasId {10 id: string;11}12~13function getById<T extends HasId>(list: T[], id: string): T | undefined {14 return list.find((item) => item.id === id);15}16```17~18Ved at sikre, at `T` udvider `HasId`, garanterer vi, at det er sikkert at tilgå `.id` inde i funktionen.19~20## 2. Conditional Types21~22Conditional Types giver dig mulighed for at oprette ikke-uniforme typemappings. Syntaksen ligner den ternære operator i JavaScript.23~24```typescript25type IsString<T> = T extends string ? true : false;26~27type A = IsString<string>; // true28type B = IsString<number>; // false29```30~31Et praktisk anvendelsestilfælde er at filtrere typer fra en union:32~33```typescript34type Diff<T, U> = T extends U ? never : T;35type NonNullable<T> = Diff<T, null | undefined>;36```37~38## 3. Mapped Types39~40Mapped Types giver dig mulighed for at oprette nye typer baseret på gamle ved at transformere egenskaber.41~42```typescript43type ReadOnly<T> = {44 readonly [P in keyof T]: T[P];45};46~47interface User {48 name: string;49 age: number;50}51~52type ReadOnlyUser = ReadOnly<User>;53```54~55Du kan endda tilføje eller fjerne modifikatorer:56~57```typescript58type Mutable<T> = {59 -readonly [P in keyof T]: T[P];60};61```62~63## 4. Template Literal Types64~65Introduceret i TypeScript 4.1 giver disse dig mulighed for at manipulere strengtyper direkte.66~67```typescript68type World = 'world';69type Greeting = `hello ${World}`; // "hello world"70~71type Color = 'red' | 'blue';72type Quantity = 'light' | 'dark';73~74type Palette = `${Quantity}-${Color}`;75// "light-red" | "light-blue" | "dark-red" | "dark-blue"76```77~78Dette er utroligt nyttigt til at type strenge, der følger et bestemt mønster, som CSS-klasser eller hændelsesnavne.79~80## 5. Nøgleordet `infer`81~82Nøgleordet `infer` inden for conditional types giver dig mulighed for at udtrække typer fra andre typer.83~84```typescript85type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any;86~87function check(): boolean {88 return true;89}90~91type CheckReturn = ReturnType<typeof check>; // boolean92```93~94Her beder vi TypeScript om at "udlede" returtypen `R` af en funktion og returnere den.95~96## Konklusion97~98At mestre disse mønstre giver dig mulighed for at skrive biblioteker og værktøjer, der er robuste og giver en fremragende udvikleroplevelse (DX). Målet med avanceret TypeScript er ikke kompleksitet for kompleksitetens skyld, men sikkerhed og udtryksfuldhed.99~
NORMAL · advanced-typescript-patterns.md [readonly]99 lines · :q to close