Building type-safe string patterns in Typescript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does it mean to build type-safe string patterns in TypeScript?

It means creating string types that only allow specific formats or values, so the TypeScript compiler can catch mistakes before running the code.

intermediate

How can template literal types help in building type-safe string patterns?

Template literal types let you combine strings and types to create new string types that match specific patterns, like fixed prefixes or suffixes.

beginner

What is the role of union types in type-safe string patterns?

Union types let you specify multiple allowed string values or patterns, so a variable can only be one of those specific strings.

intermediate

Explain this TypeScript type:

type ID = `user_${number}`;

This type means any string starting with 'user_' followed by a number is allowed, like 'user_123'. It ensures the string matches that pattern.

beginner

Why is building type-safe string patterns useful in real projects?

It helps catch errors early, improves code clarity, and makes sure strings follow expected formats, reducing bugs and confusion.

Which TypeScript feature allows creating string types that combine fixed text and variable parts?

A Template literal types

B Enums

C Interfaces

D Classes

Template literal types let you build string types by combining fixed strings and placeholders.

What does this type represent?

type Status = 'success' | 'error' | 'loading';

A A template literal type

B A number type

C A boolean type

D A union of specific string values

It defines a union type allowing only the strings 'success', 'error', or 'loading'.

How does TypeScript help with string patterns at compile time?

A By running the code faster

B By changing string values automatically

C By checking if strings match defined types

D By ignoring string errors

TypeScript checks if strings match the allowed patterns or values during compilation.

What would be a valid value for this type?

type FileName = `file_${string}.txt`;

A "file_report.doc"

B "file_report.txt"

C "report_file.txt"

D "file.txt"

The string must start with 'file_', have any string, and end with '.txt'.

Which benefit does NOT come from using type-safe string patterns?

A Automatically fix runtime bugs

B Improve code clarity

C Catch errors early

D Ensure strings follow expected formats

Type-safe patterns help catch errors but do not fix bugs automatically at runtime.

Describe how template literal types can be used to create type-safe string patterns in TypeScript.

Think about how you can build strings with parts that are fixed and parts that vary.

Explain why using union types with string literals helps in building type-safe string patterns.

Consider how limiting options helps avoid mistakes.

Practice

1. What is the main benefit of using type-safe string patterns in TypeScript?

easy

A. They ensure strings follow a specific format at compile time.

B. They make strings run faster at runtime.

C. They automatically convert strings to numbers.

D. They allow strings to be used as arrays.

Solution

1. Step 1: Understand type-safe string patterns

   Type-safe string patterns use TypeScript's template literal types to enforce string formats during coding.

2. Step 2: Identify the benefit

   This enforcement helps catch errors early by ensuring strings match expected patterns before running the program.

3. Final Answer:

   They ensure strings follow a specific format at compile time. -> Option A

4. Quick Check:

   Type-safe string patterns = compile-time format check [OK]

Hint: Type-safe patterns check string format before running code [OK]

Common Mistakes:

• Thinking they improve runtime speed
• Confusing with string-to-number conversion
• Assuming they change string behavior at runtime

2. Which of the following is the correct syntax to define a type-safe string pattern for a URL starting with "https://" in TypeScript?

easy

A. type URL = 'https://' & string;

B. type URL = "https://" + string;

C. type URL = string | 'https://';

D. type URL = `https://${string}`;

Solution

1. Step 1: Recognize template literal type syntax

   Type-safe string patterns use backticks and ${} placeholders, like `https://${string}`.

2. Step 2: Compare options

   type URL = `https://${string}`; uses correct template literal syntax. Options A, B, and D use invalid or incorrect TypeScript syntax for this purpose.

3. Final Answer:

   type URL = `https://${string}`; -> Option D

4. Quick Check:

   Template literal type syntax = backticks + ${} [OK]

Hint: Use backticks and ${} for template literal types [OK]

Common Mistakes:

• Using quotes with + for concatenation in types
• Using & or | operators incorrectly
• Not using backticks for template literals

3. Given the type definition type ID = `user_${number}`;, which of the following assignments will cause a TypeScript error?

medium

A. const a: ID = 'user_123';

B. const d: ID = 'user_0';

C. const b: ID = 'user_abc';

D. const c: ID = `user_${456}`;

Solution

1. Step 1: Understand the pattern

   The type ID requires strings starting with 'user_' followed by a number.

2. Step 2: Check each assignment

   A is 'user_123' (valid number), B is 'user_0' (valid number), C uses template literal with number 456 (valid), D is 'user_abc' (letters, invalid).

3. Final Answer:

   const b: ID = 'user_abc'; causes error -> Option C

4. Quick Check:

   Pattern requires number after 'user_' = D error [OK]

Hint: Check if string part after prefix matches number type [OK]

Common Mistakes:

• Assuming any string after prefix is valid
• Confusing template literal with runtime string
• Ignoring number type constraint

4. Identify the error in this TypeScript code snippet:

type Email = `${string}@${string}.com`;
const myEmail: Email = 'john.doe@gmail';

medium

A. The variable myEmail should be a number, not a string.

B. The type Email does not allow missing '.com' suffix.

C. The template literal syntax is incorrect.

D. The '@' symbol is not allowed in template literal types.

Solution

1. Step 1: Analyze the type Email pattern

   Email requires a string, then '@', then another string, then '.com' exactly.

2. Step 2: Check the assigned value

   myEmail is 'john.doe@gmail' missing the '.com' suffix, so it does not match the pattern.

3. Final Answer:

   The type Email does not allow missing '.com' suffix. -> Option B

4. Quick Check:

   Pattern requires '.com' suffix = missing causes error [OK]

Hint: Match full pattern including suffix exactly [OK]

Common Mistakes:

• Ignoring required suffix in pattern
• Thinking '@' is invalid in template literals
• Confusing type errors with runtime errors

5. You want to create a type-safe pattern for a version string like v1.2.3 where each number can be one or more digits. Which of these TypeScript types correctly enforces this pattern?

hard

A. type Version = `v${number}.${number}.${number}`;

B. type Version = `v${string}.${string}.${string}`;

C. type Version = `v${number}.${string}.${number}`;

D. type Version = `v${number}.${number}`;

Solution

1. Step 1: Understand the version pattern

   The version string starts with 'v' followed by three numbers separated by dots.

2. Step 2: Evaluate each type

   A uses number for all three parts, matching the pattern exactly. B uses string, allowing invalid formats. C mixes number and string incorrectly. D misses the third number part.

3. Final Answer:

   type Version = `v${number}.${number}.${number}`; -> Option A

4. Quick Check:

   All parts as number with dots = type Version = `v${number}.${number}.${number}`; [OK]

Hint: Use ${number} for numeric parts in template literals [OK]

Common Mistakes:

• Using string instead of number for numeric parts
• Missing parts of the pattern
• Mixing types inconsistently