Mapped type with template literals in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of a mapped type with template literals

What is the type of Result after applying the mapped type with template literals?

Typescript

type Flags = 'success' | 'error';
type Result = {
  [K in `${Flags}Message`]: string;
};

// What is the type of Result?

A { successMessage: string; error: string; }

B { success: string; error: string; }

C { success: string; errorMessage: string; }

D { successMessage: string; errorMessage: string; }

💡 Hint

Template literals combine each union member with 'Message' suffix.

The mapped type iterates over each member of 'Flags' and appends 'Message' to create keys 'successMessage' and 'errorMessage', both typed as string.

❓ Predict Output

intermediate

Output of nested mapped type with template literals

What is the type of Options after applying this nested mapped type?

Typescript

type Sizes = 'small' | 'medium';
type Colors = 'red' | 'blue';

type Options = {
  [S in Sizes as `${S}Size`]: {
    [C in Colors as `${C}Color`]: boolean;
  };
};

A { smallSize: { red: boolean; blue: boolean; }; mediumSize: { red: boolean; blue: boolean; }; }

B { small: { red: boolean; blue: boolean; }; medium: { red: boolean; blue: boolean; }; }

C { smallSize: { redColor: boolean; blueColor: boolean; }; mediumSize: { redColor: boolean; blueColor: boolean; }; }

D { small: { redColor: boolean; blueColor: boolean; }; medium: { redColor: boolean; blueColor: boolean; }; }

💡 Hint

Both outer and inner keys use template literals with 'Size' and 'Color' suffixes.

The outer mapped type renames 'small' and 'medium' to 'smallSize' and 'mediumSize'. The inner mapped type renames 'red' and 'blue' to 'redColor' and 'blueColor'.

🔧 Debug

advanced

Identify the error in mapped type with template literals

What error does this TypeScript code produce?

Typescript

type Keys = 'one' | 'two';
type Mapped = {
  [K in Keys as `${K}Key`]: number;
  [K in Keys as `${K}Value`]: string;
};

A SyntaxError: Missing semicolon between mapped properties

B SyntaxError: Unexpected token '['

C TypeError: Cannot have multiple mapped signatures in one type

D SyntaxError: Duplicate identifier 'K' in mapped type

💡 Hint

Mapped type properties must be separated properly.

The code misses a semicolon between two mapped properties, causing a syntax error.

📝 Syntax

advanced

Which mapped type produces keys with prefix and suffix using template literals?

Choose the mapped type that creates keys like 'pre_one_suf' and 'pre_two_suf' from union 'one' | 'two'.

Typescript

type Keys = 'one' | 'two';

A { [K in Keys as `pre_${K}_suf`]: boolean }

B { [K in `pre_${Keys}_suf`]: boolean }

C { [K in Keys]: boolean as `pre_${K}_suf` }

D { [K in Keys]: boolean & `pre_${K}_suf` }

💡 Hint

Use 'as' to rename keys with template literals.

Option A correctly uses 'as' to rename keys with template literals. Others misuse syntax or types.

🚀 Application

expert

Count keys in a mapped type with template literals

Given this mapped type, how many keys does Config have?

Typescript

type Modes = 'auto' | 'manual' | 'off';
type Config = {
  [M in Modes as `${M}Mode`]: number;
};

A 6

B 3

C 1

D 0

💡 Hint

Each union member creates one key with 'Mode' suffix.

The union has 3 members, each mapped to one key with suffix 'Mode', so total keys are 3.

Practice

1.

What does a mapped type with template literals in TypeScript allow you to do?

Example: { [K in keyof T as `get${Capitalize}`]: () => T[K] }

easy

A. Create new variables at runtime

B. Rename keys dynamically in object types

C. Change values of an object at runtime

D. Execute functions based on key names

Solution

1. Step 1: Understand mapped types

   Mapped types create new object types by transforming keys or values of an existing type.

2. Step 2: Role of template literals

   Template literals let you rename keys dynamically by combining strings and key names.

3. Final Answer:

   Rename keys dynamically in object types -> Option B

4. Quick Check:

   Mapped type + template literals = dynamic key renaming [OK]

Hint: Mapped types + template literals = dynamic key renaming [OK]

Common Mistakes:

• Confusing runtime behavior with type transformations
• Thinking it changes object values instead of keys
• Assuming it creates variables or runs code

2.

Which of the following is the correct syntax to rename keys using a mapped type with template literals?

type RenameKeys<T> = { [K in keyof T as ???]: T[K] }

easy

A. `new_${string & K}`

B. `new_${K}`

C. `new_${number & K}`

D. `new_${any & K}`

Solution

1. Step 1: Understand key remapping syntax

   Use as with template literals and intersect key type with string to ensure keys are strings.

2. Step 2: Check each option

   `new_${string & K}` uses string & K which is correct; others use incorrect types like number or any.

3. Final Answer:

   `new_${string & K}` -> Option A

4. Quick Check:

   Use string & K for safe key renaming [OK]

Hint: Use string & K to rename keys safely in template literals [OK]

Common Mistakes:

• Using K directly without string intersection
• Using number or any instead of string & K
• Missing backticks for template literals

3.

What is the resulting type of the following code?

type User = { name: string; age: number };
type PrefixedUser = { [K in keyof User as `get${Capitalize}`]: () => User[K] };

medium

A. { name: () => string; age: () => number }

B. { getName: string; getAge: number }

C. { getname: () => string; getage: () => number }

D. { getName: () => string; getAge: () => number }

Solution

1. Step 1: Analyze key transformation

   Keys 'name' and 'age' are capitalized and prefixed with 'get', becoming 'getName' and 'getAge'.

2. Step 2: Analyze value transformation

   Values become functions returning the original property types: () => string and () => number.

3. Final Answer:

   { getName: () => string; getAge: () => number } -> Option D

4. Quick Check:

   Mapped keys capitalized + function values = { getName: () => string; getAge: () => number } [OK]

Hint: Capitalize keys and prefix with 'get' for function types [OK]

Common Mistakes:

• Not capitalizing keys
• Returning values instead of functions
• Using original keys without prefix

4.

Identify the error in this mapped type using template literals:

type Flags = { isActive: boolean; isAdmin: boolean };
type PrefixedFlags = { [K in keyof Flags as `flag_${K}`]: Flags[K] };

medium

A. Key remapping must use Capitalize utility

B. Cannot use template literals in mapped types

C. Missing string intersection with K in template literal

D. Flags[K] is invalid syntax

Solution

1. Step 1: Check key remapping syntax

   Template literal keys must intersect K with string: string & K to ensure keys are strings.

2. Step 2: Identify missing intersection

   The code uses `flag_${K}` without string & K, causing a type error.

3. Final Answer:

   Missing string intersection with K in template literal -> Option C

4. Quick Check:

   Use string & K in template literals to fix error [OK]

Hint: Always intersect K with string in template literals [OK]

Common Mistakes:

• Omitting string & K intersection
• Thinking Capitalize is mandatory
• Believing template literals can't be used here

5.

Given this type, how would you create a mapped type that prefixes keys with on and capitalizes them, but only for keys starting with handle?

type Handlers = { handleClick: () => void; handleHover: () => void; reset: () => void };

hard

A. type Prefixed = { [K in keyof Handlers as K extends `handle${string}` ? `on${Capitalize}` : never]: Handlers[K] };

B. type Prefixed = { [K in keyof Handlers as `on${Capitalize}`]: Handlers[K] };

C. type Prefixed = { [K in keyof Handlers as K extends string ? `on${Capitalize<K>}` : never]: Handlers[K] };

D. type Prefixed = { [K in keyof Handlers as K extends `on${string}` ? `handle${Capitalize}` : never]: Handlers[K] };

Solution

1. Step 1: Filter keys starting with 'handle'

   Use conditional type K extends `handle${string}` to select only keys starting with 'handle'.

2. Step 2: Rename keys with 'on' prefix and capitalize

   Use template literal `on${Capitalize}` to rename keys accordingly.

3. Step 3: Assign original value types

   Keep the original function types from Handlers[K].

4. Final Answer:

   type Prefixed = { [K in keyof Handlers as K extends `handle${string}` ? `on${Capitalize}` : never]: Handlers[K] }; -> Option A

5. Quick Check:

   Conditional key remapping with prefix and capitalize = type Prefixed = { [K in keyof Handlers as K extends `handle${string}` ? `on${Capitalize}` : never]: Handlers[K] }; [OK]

Hint: Use conditional types to filter keys before renaming [OK]

Common Mistakes:

• Not filtering keys by prefix
• Applying rename to all keys
• Incorrect conditional syntax