Generate TypeScript mapped types that transform object types using property mapping, modifiers, and key remapping patterns.
Generate TypeScript mapped types that transform object types using property mapping, modifiers (readonly, optional), and key remapping with template literals.
This skill helps you create TypeScript mapped types based on the official TypeScript documentation. It generates type transformations that:
When the user requests a TypeScript mapped type, follow these steps:
1. **Understand the transformation requirement**
- Ask clarifying questions about the desired type transformation
- Identify the source type structure
- Determine what properties need to be transformed, added, removed, or renamed
2. **Choose the appropriate mapped type pattern**
**Basic property mapping:**
```typescript
type OptionsFlags<Type> = {
[Property in keyof Type]: boolean;
};
```
**Remove readonly modifier:**
```typescript
type CreateMutable<Type> = {
-readonly [Property in keyof Type]: Type[Property];
};
```
**Remove optional modifier:**
```typescript
type Concrete<Type> = {
[Property in keyof Type]-?: Type[Property];
};
```
**Key remapping with template literals:**
```typescript
type Getters<Type> = {
[Property in keyof Type as `get${Capitalize<string & Property>}`]: () => Type[Property];
};
```
**Filter properties:**
```typescript
type RemoveKindField<Type> = {
[Property in keyof Type as Exclude<Property, "kind">]: Type[Property];
};
```
**Map over discriminated unions:**
```typescript
type EventConfig<Events extends { kind: string }> = {
[E in Events as E["kind"]]: (event: E) => void;
};
```
3. **Generate the mapped type**
- Write the generic type definition
- Use appropriate syntax: `keyof`, `in`, `as`, template literals
- Apply modifiers with `+`/`-` prefixes as needed
- Add type constraints where necessary
4. **Provide usage example**
- Show the source interface/type
- Demonstrate applying the mapped type
- Display the resulting type shape
5. **Explain the transformation**
- Describe what the mapped type does
- Highlight key syntax elements
- Note any modifiers or remapping logic
**Example 1: Create getters for all properties**
User: "Create a type that converts all properties to getter functions"
```typescript
type Getters<Type> = {
[Property in keyof Type as `get${Capitalize<string & Property>}`]: () => Type[Property];
};
interface Person {
name: string;
age: number;
location: string;
}
type LazyPerson = Getters<Person>;
// Result:
// {
// getName: () => string;
// getAge: () => number;
// getLocation: () => string;
// }
```
**Example 2: Make all properties mutable**
User: "Remove readonly from all properties"
```typescript
type CreateMutable<Type> = {
-readonly [Property in keyof Type]: Type[Property];
};
type LockedAccount = {
readonly id: string;
readonly name: string;
};
type UnlockedAccount = CreateMutable<LockedAccount>;
// Result:
// {
// id: string;
// name: string;
// }
```
**Example 3: Remove optional properties**
User: "Make all optional properties required"
```typescript
type Concrete<Type> = {
[Property in keyof Type]-?: Type[Property];
};
type MaybeUser = {
id: string;
name?: string;
age?: number;
};
type User = Concrete<MaybeUser>;
// Result:
// {
// id: string;
// name: string;
// age: number;
// }
```
Based on official TypeScript documentation: https://www.typescriptlang.org/docs/handbook/2/mapped-types.html
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/typescript-mapped-types-generator/raw