Mapped type with template literals in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a mapped type that adds 'get' prefix to each key.

Typescript

type Getters<T> = {
  [K in keyof T as `get$[1]`]: () => T[K];
};

Drag options to blanks, or click blank then click option'

Astring

BUppercase<K>

CLowercase<K>

DCapitalize<string & K>

Attempts:

3 left

💡 Hint

Common Mistakes

Using Uppercase or Lowercase changes all letters, not just the first.

Forgetting to intersect with string & K causes type errors.

The Capitalize utility capitalizes the first letter of the key, so the template literal forms keys like 'getName'.

2fill in blank

medium

Complete the mapped type to create setter methods with 'set' prefix and capitalized keys.

Typescript

type Setters<T> = {
  [K in keyof T as `set$[1]`]: (value: T[K]) => void;
};

Drag options to blanks, or click blank then click option'

ACapitalize<string & K>

BUppercase<string & K>

CLowercase<K>

Dstring

Attempts:

3 left

💡 Hint

Common Mistakes

Using Uppercase capitalizes all letters, which is not desired here.

Not intersecting with string & K causes type errors.

Using Capitalize capitalizes the first letter of the key, forming keys like 'setAge'.

3fill in blank

hard

Fix the error in the mapped type to correctly create keys with 'is' prefix and capitalized keys.

Typescript

type BooleanFlags<T> = {
  [K in keyof T as `is$[1]`]: boolean;
};

Drag options to blanks, or click blank then click option'

AUppercase<K>

BCapitalize<string & K>

CLowercase<string & K>

Dstring

Attempts:

3 left

💡 Hint

Common Mistakes

Using Uppercase capitalizes all letters, which is not correct here.

Not intersecting with string & K causes errors.

The Capitalize utility capitalizes the first letter of the key, so keys become like 'isActive'.

4fill in blank

hard

Fill both blanks to create a mapped type that adds 'on' prefix and capitalizes keys for event handlers.

Typescript

type EventHandlers<T> = {
  [K in keyof T as `on$[1]`]: (event: T[K]) => void;
};

// Usage example:
// const handlers: EventHandlers<{ click: MouseEvent, keypress: KeyboardEvent }>;

Drag options to blanks, or click blank then click option'

ACapitalize<string & K>

BUppercase<K>

CLowercase<K>

Dstring

Attempts:

3 left

💡 Hint

Common Mistakes

Using Uppercase instead of Capitalize changes all letters.

Not using string in the template literal causes type errors.

The first blank uses Capitalize to capitalize the key's first letter. The second blank is string as a fallback type in the template literal.

5fill in blank

hard

Fill all three blanks to create a mapped type that adds 'with' prefix, capitalizes keys, and appends 'Value' suffix.

Typescript

type WithValue<T> = {
  [K in keyof T as `with$[1]$[2]`]: T[K];
};

// Example usage:
// type Example = WithValue<{ name: string, age: number }>;
// Result keys: 'withNameValue', 'withAgeValue'

Drag options to blanks, or click blank then click option'

ACapitalize<string & K>

BValue

Cstring

DUppercase<K>

Attempts:

3 left

💡 Hint

Common Mistakes

Using Uppercase instead of Capitalize changes all letters.

Forgetting to add the suffix 'Value'.

Not including string in the template literal causes errors.

The first blank capitalizes the key's first letter. The second blank adds the suffix 'Value'. The third blank is string to ensure the template literal works correctly.