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.