Template literal types 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 other string literal types or string unions using backticks (`) and placeholders (${...}). It works like string templates but for types.

beginner

How do you create a template literal type that combines two string literals, e.g., 'hello' and 'world'?

You write: `type Greeting = `${'hello'} ${'world'}`;` This creates a type that matches the string 'hello world'.

intermediate

Can template literal types use unions inside placeholders? Give an example.

Yes. For example: `type Colors = 'red' | 'blue'; type Shades = `${Colors}Light` | `${Colors}Dark`;` This creates types like 'redLight', 'redDark', 'blueLight', and 'blueDark'.

intermediate

What happens if you use a template literal type with a number or boolean type inside the placeholder?

TypeScript converts the number or boolean to a string literal type. For example, `type NumStr = `${1 | 2}`;` creates a type '1' | '2' as strings.

beginner

Why are template literal types useful in TypeScript?

They help create flexible and precise string types by combining smaller types. This improves type safety and auto-completion for strings that follow patterns.

Which syntax correctly defines a template literal type combining 'foo' and 'bar'?

A type T = `${'foo'}${'bar'}`;

B type T = 'foo' + 'bar';

C type T = 'foo' & 'bar';

D type T = 'foo' | 'bar';

Template literal types use backticks and placeholders to combine strings, like `${'foo'}${'bar'}`.

What type does this produce? `type T = `${'a' | 'b'}${'1' | '2'}`;`

A 'a' | 'b' | '1' | '2'

B 'a1' | 'a2' | 'b1' | 'b2'

C 'a12' | 'b12'

D 'a' & '1' & 'b' & '2'

It creates all combinations of the unions inside the template literal.

Can template literal types include expressions other than string literals?

A Yes, but only boolean types

B No, only string literals are allowed

C Yes, including unions of strings and numbers converted to strings

D No, only numbers are allowed

Template literal types can include unions of strings, numbers, and booleans, which are converted to string literal types.

What is the result type of `type T = `${number}`;`?

A string

B never

C number

D template literal type representing any number as string

It creates a template literal type representing string versions of numbers, but since number is broad, it acts like string.

Why use template literal types instead of plain string unions?

A To build complex string patterns from smaller parts

B To allow any string value

C To convert numbers to booleans

D To disable type checking

Template literal types let you combine smaller string types into complex patterns for better type safety.

Explain what template literal types are and how they help in TypeScript.

Think about how string templates work in JavaScript but for types.

Describe how unions inside template literal types create multiple string combinations.

Consider how 'a' | 'b' and '1' | '2' combine in a template literal.