Building type-safe string patterns in Typescript - Step-by-Step Execution

Concept Flow - Building type-safe string patterns

Define string pattern types

↓

Create template literal types

↓

Use pattern types in variables/functions

↓

TypeScript checks string correctness

↓

Compile error if pattern mismatch

↓

Correct strings pass type check

We define string pattern types, use them in variables or functions, and TypeScript checks if strings match the pattern, giving errors if not.

Execution Sample

Typescript

type ID = `user_${number}`;

const validId: ID = "user_123";
const invalidId: ID = "admin_123"; // Error

Defines a type-safe string pattern for IDs starting with 'user_' followed by a number, then checks valid and invalid assignments.

Execution Table

Step	Action	Evaluation	Result
1	Define type ID as template literal `user_${number}`	Type ID created	Type ID expects strings like 'user_123'
2	Assign 'user_123' to validId of type ID	Check if 'user_123' matches `user_${number}`	Passes type check
3	Assign 'admin_123' to invalidId of type ID	Check if 'admin_123' matches `user_${number}`	Type error: string does not match pattern
4	End of checks	No further code	Compilation stops due to error on step 3

💡 Compilation stops because 'admin_123' does not match the pattern `user_${number}`

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
validId	undefined	'user_123'	'user_123'	'user_123'
invalidId	undefined	undefined	Error (no value assigned)	Error (compilation fails)

Key Moments - 2 Insights

Why does assigning 'admin_123' to invalidId cause an error?

Because the type ID requires strings starting with 'user_' followed by a number, 'admin_123' does not match this pattern as shown in execution_table step 3.

Can I assign 'user_abc' to validId?

No, because 'abc' is not a number, so it does not match the pattern `user_${number}`. TypeScript enforces this as seen in the pattern definition.

Visual Quiz - 3 Questions

Look at the execution table, what is the result of assigning 'user_123' to validId at step 2?

A Runtime error

B Passes type check

C Type error

D No effect

💡 Hint

Check execution_table row with Step 2 for assignment result

At which step does the compilation stop due to a type error?

A Step 3

B Step 2

C Step 1

D Step 4

💡 Hint

See exit_note and execution_table row with Step 3

If we change the pattern to `admin_${number}`, what happens when assigning 'user_123'?

A Passes type check

B Runtime error

C Type error

D No effect

💡 Hint

Refer to how pattern matching works in execution_table steps 2 and 3

Concept Snapshot

Type-safe string patterns use template literal types.
Define patterns like `user_${number}`.
Assign strings matching pattern to typed variables.
TypeScript errors if string doesn't match.
Ensures string format correctness at compile time.

Full Transcript

This example shows how to build type-safe string patterns in TypeScript using template literal types. We define a type ID as `user_${number}`, meaning strings must start with 'user_' followed by a number. When we assign 'user_123' to a variable of type ID, TypeScript accepts it because it matches the pattern. But assigning 'admin_123' causes a compile-time error because it does not match the pattern. This helps catch mistakes early by enforcing string formats during coding.