Template literal type syntax in Typescript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a template literal type in TypeScript?

A template literal type lets you create new string types by combining literal strings and other string types using backticks (`) and placeholders (${...}). It works like string templates but for types.

beginner

How do you define a template literal type that combines 'Hello' and a variable name?

You write: <br>type Greeting = `Hello, ${string}`;<br>This means Greeting can be any string starting with 'Hello, ' followed by any string.

intermediate

Can template literal types use unions inside placeholders?

Yes! You can use unions inside placeholders to create multiple possible string types. For example:<br>type Colors = 'red' | 'blue';<br>type ColorMessage = `Color is ${Colors}`;<br>This creates 'Color is red' or 'Color is blue'.

intermediate

What happens if you nest template literal types?

You can nest template literals to build complex string types. For example:<br>type Name = 'Alice' | 'Bob';<br>type Greeting = `Hello, ${Name}!`;<br>type ExcitedGreeting = `${Greeting} How are you?`;<br>This creates types like 'Hello, Alice! How are you?'.

beginner

What is a practical use of template literal types?

They help create precise string types for things like event names, CSS class names, or formatted strings, improving type safety and auto-completion in code.

Which syntax correctly defines a template literal type combining 'user_' and a number string?

A type UserId = `user_${number}`;

B type UserId = 'user_' + number;

C type UserId = `user_` & number;

D type UserId = 'user_' | number;

Template literal types use backticks and placeholders like `${number}` to combine strings and types.

What does this type represent? <br>type Status = `status_${'success' | 'error'}`;

A Any string starting with 'status_'

B 'success' or 'error'

C 'status_success' or 'status_error'

D 'status_' only

The union inside the placeholder creates two possible string types: 'status_success' and 'status_error'.

Can template literal types include other template literal types inside them?

A No, nesting causes errors.

B Yes, nesting is allowed.

C Only if they are the same type.

D Only with number types.

Template literal types can be nested to build more complex string types.

Which of these is NOT a valid use of template literal types?

A Defining numeric ranges like `1 to 10`

B Combining string unions into formatted strings

C Creating event name types like `on${Capitalize<string>}`

D Building CSS class name types

Template literal types work with strings, not numeric ranges directly.

What TypeScript feature allows placeholders like ${string} inside template literal types?

A Type casting

B Type inference

C Type assertion

D Type interpolation

Type interpolation lets you insert types inside template literal types using ${...}.

Explain how template literal types work and give an example combining a fixed string and a union type.

Think of how string templates work but for types.

Describe a practical scenario where template literal types improve code safety or developer experience.

Consider how you might limit strings to specific patterns.