What is a template literal?

Learn to build template strings at the type level.

What is a template literal type?

A template literal type creates a type-level template string using backtick (`) and ${} syntax. Other types can be embedded inside; for example with ${string} you define a type whose suffix can be any string. This makes string literal types more flexible and lets you write types with a mandatory fixed prefix.

type Greeting = `Hello ${string}`;
const x: Greeting = "Hello world";

Generic with template type

You can make a template literal type generic. The type parameter is placed inside ${T} and combines with the calling type to produce a fixed string type. This is an elegant way to define types with mandatory prefixes or suffixes. It is common to constrain T with string.

type Prefixed<T extends string> = `pre_${T}`;
type X = Prefixed<"test">;  // "pre_test"

Exercise Write the SelamX template type

Define a template literal type named SelamX: `Merhaba ${string}`. The y variable should be of type SelamX with value "Merhaba dünya". Print y with console.log.

Show example solution

type SelamX = `Merhaba ${string}`;
const y: SelamX = "Merhaba dünya";
console.log(y);

Test yourself

With which syntax is a template literal type written?
- Metin<T>
- 'Metin'.concat(T)
- `Metin ${T}`
- "Metin" + T
Show answer

`Metin ${T}` — A template literal type is written with backtick and ${}; not with double quotes or the plus operator.

Type placeholder

type Selam = `Merhaba ${____}`;
const x: Selam = "Merhaba dünya";

Show answer

type Selam = `Merhaba ${string}`;
const x: Selam = "Merhaba dünya";

Template literal concepts

`...

Template string syntax
${T}

Type placeholder
backtick

Template delimiter
string

Any string type

Next lesson: Combination with union

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies