Building type-safe string patterns in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of a template literal type with union

What is the type of Greeting and what will message contain after assignment?

Typescript

type Name = "Alice" | "Bob";
type Greeting = `Hello, ${Name}!`;

const message: Greeting = "Hello, Alice!";

console.log(message);

A "Hello, Charlie!"

B "Hello, Alice!"

C Type error at assignment

D "Hello, Bob!"

💡 Hint

Check which strings are allowed by the template literal type.

The type Greeting allows only strings formed by 'Hello, ' plus either 'Alice' or 'Bob' plus '!'. So 'Hello, Alice!' is valid and prints as is.

🧠 Conceptual

intermediate

Understanding type-safe string pattern constraints

Which of the following TypeScript types correctly restricts a string to only the patterns 'user-123' or 'admin-456'?

A type ID = 'user-123' | 'admin-456';

B type ID = string & (`user-123` | `admin-456`);

C type ID = `user-${number}` | `admin-${number}`;

D type ID = `${string}-${number}`;

💡 Hint

Think about exact string matches versus patterns.

Option A restricts the type to exactly 'user-123' or 'admin-456'. Option A allows any number after 'user-' or 'admin-'. Option A is invalid syntax. Option A allows any string-number pattern.

🔧 Debug

advanced

Identify the error in this type-safe string pattern

What error does this TypeScript code produce?

Typescript

type Event = `on${Capitalize<string>}`;

const clickEvent: Event = "onclick";

A Syntax error: Invalid template literal type

B Runtime error: Cannot capitalize string

C No error, code compiles fine

D Type error: 'onclick' is not assignable to type 'Event'

💡 Hint

Check what Capitalize means in a template literal type.

Capitalize expects a literal string type, but 'string' is a general type, so the template literal type is too broad. The value 'onclick' does not match 'on' + capitalized string, so assignment fails.

📝 Syntax

advanced

Which option correctly defines a type-safe pattern for hex colors?

Choose the option that correctly defines a TypeScript type for strings matching a hex color code like '#A1B2C3'.

A type HexColor = `#${string}`;

B type HexColor = `#${string & { length: 6 }}`;

C type HexColor = `#${Uppercase<string>}${Uppercase<string>}${Uppercase<string>}${Uppercase<string>}${Uppercase<string>}${Uppercase<string>}`;

D type HexColor = `#${string & { length: 6, pattern: /^[0-9A-F]{6}$/ }}`;

💡 Hint

TypeScript template literal types cannot enforce length or regex patterns directly.

Option A is valid syntax and allows any string after '#'. Options B and D use invalid syntax for length or pattern constraints. Option A is invalid because Uppercase cannot be repeated like that in a template literal type.

🚀 Application

expert

Determine the number of valid strings for this type-safe pattern

Given the type type Code = `${'A' | 'B'}${1 | 2 | 3}`;, how many unique strings are assignable to Code?

A 5

B 3

C 6

D 9

💡 Hint

Multiply the number of options in each union to find total combinations.

There are 2 options for the first character ('A' or 'B') and 3 options for the second (1, 2, or 3). Total combinations = 2 * 3 = 6.