Typescript Mapped Types en Conditional Types Uitgelegd
description
Met deze prompt leer ik hoe ik complexe en dynamische types kan creëren met mapped en conditional types, wat mijn Typescript code flexibeler en onderhoudbaarder maakt. Dit bespaart tijd en voorkomt fouten door type duplicatie en beperkt de noodzaak voor handmatige aanpassingen.
prompt
Leg uit hoe ik in Typescript mapped types en conditional types kan gebruiken om geavanceerde typeconstructies te maken voor <beschrijving van het datamodel of use ...
try_prompt
generate_helper
disclaimerOnPageApi
tags
ai_answers
provider: openai
model: gpt-4.1-nano
In TypeScript kun je mapped types en conditional types gebruiken om krachtige en flexibele typeconstructies te maken. Hieronder leg ik uit hoe je dat kunt doen met een voorbeeldobject zoals `{ id: number; name: string; email: string }`.
**1. Mapped Types**
Mapped types maken het mogelijk om bestaande types te transformeren door over de keys te itereren en nieuwe types te genereren. Bijvoorbeeld, je kunt alle properties van een object omzetten naar optioneel of naar een ander type.
*Voorbeeld: Maak alle properties optioneel:*
```typescript
type OptionalUser = {
[K in keyof User]?: User[K];
};
```
Hier wordt `OptionalUser` een type waarbij alle velden optioneel zijn.
*Voorbeeld: Maak alle property types `string`:*
```typescript
type StringifyUser = {
[K in keyof User]: string;
};
```
Dit verandert alle velden in een object waar alle waarden strings zijn.
**2. Conditional Types**
Conditional types maken het mogelijk om types te afhankelijk te maken van voorwaarden. Ze worden vaak gebruikt om verschillende types te retourneren afhankelijk van het inputtype.
*Voorbeeld: Een type dat `true` is als een property van het object van het type `string`, anders `false`:*
```typescript
type IsStringProperty<T, K extends keyof T> = T[K] extends string ? true : false;
```
Gebruik:
```typescript
type NameIsString = IsStringProperty<User, 'name'>; // true
type IdIsString = IsStringProperty<User, 'id'>; // false
```
*Voorbeeld: Bepalen of een object een bepaald property heeft:*
```typescript
type HasEmail<T> = 'email' extends keyof T ? true : false;
type UserHasEmail = HasEmail<User>; // true
type AnotherType = { id: number };
type Check = HasEmail<AnotherType>; // false
```
**3. Gecombineerde voorbeelden**
Je kunt mapped en conditional types combineren voor nog krachtigere constructies.
*Voorbeeld: Maak alle string-properties van een object readonly:*
```typescript
type ReadonlyStrings<T> = {
[K in keyof T]: T[K] extends string ? Readonly<T[K]> : T[K];
};
```
Gebruik:
```typescript
type UserReadOnlyStrings = ReadonlyStrings<User>;
```
**Samenvatting:**
- Mapped types: door `[K in keyof T]` te gebruiken, kun je types transformeren of aanpassen.
- Conditional types: door `T[K] extends U ? X : Y` kun je afhankelijk van typevoorwaarden nieuwe types maken.
Deze technieken samen maken TypeScript krachtig voor complexe typeconstructies, zoals het genereren van types op basis van bestaande types, validatie en meer!
provider: deepseek
model: deepseek-chat
In TypeScript kun je mapped types en conditional types gebruiken om geavanceerde typeconstructies te maken. Hier is een uitleg met voorbeelden voor een gebruikersobject:
## Basis User Type
```typescript
type User = {
id: number;
name: string;
email: string;
age?: number;
};
```
## Mapped Types Voorbeelden
### 1. Alle velden optioneel maken
```typescript
type PartialUser = {
[K in keyof User]?: User[K];
};
// Resultaat: { id?: number; name?: string; email?: string; age?: number; }
```
### 2. Alle velden readonly maken
```typescript
type ReadonlyUser = {
readonly [K in keyof User]: User[K];
};
```
### 3. Type velden transformeren
```typescript
// Alle string velden omzetten naar number
type StringToNumber<T> = {
[K in keyof T]: T[K] extends string ? number : T[K];
};
type NumericUser = StringToNumber<User>;
// Resultaat: { id: number; name: number; email: number; age?: number; }
```
### 4. Alleen bepaalde velden selecteren
```typescript
type PickUser = Pick<User, 'id' | 'name'>;
// Resultaat: { id: number; name: string; }
```
## Conditional Types Voorbeelden
### 1. Conditioneel op basis van veldtype
```typescript
type StringFields<T> = {
[K in keyof T]: T[K] extends string ? K : never;
}[keyof T];
type UserStringFields = StringFields<User>;
// Resultaat: "name" | "email"
```
### 2. Conditioneel type voor validatie
```typescript
type Validatable<T> = {
[K in keyof T]: T[K] extends string
? { value: T[K], isValid: boolean }
: T[K];
};
type ValidatableUser = Validatable<User>;
// Resultaat: { id: number; name: { value: string, isValid: boolean }; email: { value: string, isValid: boolean }; age?: number; }
```
### 3. Conditioneel op basis van required/optional
```typescript
type RequiredFields<T> = {
[K in keyof T]: undefined extends T[K] ? never : K;
}[keyof T];
type OptionalFields<T> = {
[K in keyof T]: undefined extends T[K] ? K : never;
}[keyof T];
type UserRequired = RequiredFields<User>; // "id" | "name" | "email"
type UserOptional = OptionalFields<User>; // "age"
```
### 4. Geavanceerde combinatie: Conditionele mapped type
```typescript
type ConditionalTransform<T> = {
[K in keyof T]: T[K] extends string
? `formatted_${string}`
: T[K] extends number
? number[]
: T[K];
};
type TransformedUser = ConditionalTransform<User>;
// Resultaat: { id: number[]; name: `formatted_${string}`; email: `formatted_${string}`; age?: number[]; }
```
## Praktijkvoorbeeld: User Form
```typescript
type UserForm = {
[K in keyof User]: {
value: User[K];
error?: string;
touched: boolean;
};
};
// Gebruik:
const userForm: UserForm = {
id: { value: 1, touched: true },
name: { value: "John", error: "Naam is verplicht", touched: true },
email: { value: "john@example.com", touched: false },
age: { value: undefined, touched: false }
};
```
Deze technieken geven je krachtige tools om complexe type-relaties en transformaties te modelleren in TypeScript!