spinny:~/writing $ vim advanced-typescript-patterns.md
1~2TypeScript is de industriestandaard geworden voor grootschalige webontwikkeling. Hoewel de meeste ontwikkelaars de basisbeginselen van interfaces en types kennen, ligt de echte kracht in het geavanceerde typesysteem. Hier zijn 5 patronen die je als senior engineer onderscheiden.3~4## 1. Generic Constraints5~6Generics zijn krachtig, maar soms moet je beperken wat er kan worden doorgegeven. `extends` is hier je vriend.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~18Door ervoor te zorgen dat `T` `HasId` uitbreidt, garanderen we dat het benaderen van `.id` binnen de functie veilig is.19~20## 2. Conditional Types21~22Conditional types stellen je in staat om niet-uniforme type-mappings te creëren. De syntax lijkt op de ternary operator in JavaScript.23~24```typescript25type IsString<T> = T extends string ? true : false;26~27type A = IsString<string>; // true28type B = IsString<number>; // false29```30~31Een praktisch gebruiksscenario is het filteren van types uit een 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 stellen je in staat om nieuwe types te creëren op basis van bestaande types door eigenschappen te transformeren.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~55Je kunt zelfs modifiers toevoegen of verwijderen:56~57```typescript58type Mutable<T> = {59 -readonly [P in keyof T]: T[P];60};61```62~63## 4. Template Literal Types64~65Geïntroduceerd in TypeScript 4.1, hiermee kun je string types direct manipuleren.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~78Dit is ontzettend handig voor het typeren van strings die een specifiek patroon volgen, zoals CSS-klassen of eventnamen.79~80## 5. Het `infer` Keyword81~82Het `infer` keyword binnen conditional types stelt je in staat om types te extraheren uit andere types.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~94Hier vragen we TypeScript om het return type `R` van een functie te "infereren" en het terug te geven.95~96## Conclusie97~98Het beheersen van deze patronen stelt je in staat om bibliotheken en hulpprogramma's te schrijven die robuust zijn en een uitstekende ontwikkelaarservaring (DX) bieden. Het doel van geavanceerd TypeScript is niet complexiteit omwille van complexiteit, maar veiligheid en expressiviteit.99~
NORMAL · advanced-typescript-patterns.md [readonly]99 lines · :q to close