Template literal types in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of Template Literal Type Concatenation

What is the type of Result after this code runs?

Typescript

type A = "Hello";
type B = "World";
type Result = `${A} ${B}!`;

// What is Result?

A string

B "HelloWorld!"

C "Hello World"

D "Hello World!"

💡 Hint

Template literal types combine string literal types exactly as written.

The template literal type `${A} ${B}!` concatenates the literal types A and B with a space and exclamation mark, resulting in the exact string literal type "Hello World!".

❓ Predict Output

intermediate

Template Literal Type with Union Types

What is the type of Greeting after this code?

Typescript

type Name = "Alice" | "Bob";
type Greeting = `Hello, ${Name}!`;

// What is Greeting?

A "Hello, Alice!" | "Hello, Bob!"

B "Hello, Alice" | "Hello, Bob"

C "Hello, Alice!" & "Hello, Bob!"

D string

💡 Hint

Template literal types distribute over unions.

When a template literal type uses a union type inside, it creates a union of all possible combinations. Here, Greeting is the union of "Hello, Alice!" and "Hello, Bob!".

🔧 Debug

advanced

Why does this Template Literal Type cause an error?

This code causes a TypeScript error. What is the reason?

Typescript

type Prefix = "pre";
type Suffix = number;
type Combined = `${Prefix}${Suffix}`;

// Why is this an error?

A Template literal types cannot concatenate two types.

B Suffix is the number type, template literal types only accept string literal types or numeric literal types.

C Prefix must be a number, not a string.

D Combined must be declared as a string, not a template literal type.

💡 Hint

Check the allowed types inside template literal types.

Template literal types accept string literal types or numeric literal types, but the type Suffix is the number type, not a string literal type or numeric literal type. It must be a string literal type or a numeric literal type.

🧠 Conceptual

advanced

Understanding Template Literal Type Inference

Given this function, what is the inferred return type of makeKey('user', 42)?

Typescript

function makeKey<T extends string | number, U extends string | number>(prefix: T, id: U) {
  return `${prefix}_${id}` as const;
}

const key = makeKey('user', 42);

// What is the type of key?

A `${string}_${number}`

B string

C "user_42"

D `${T}_${U}`

💡 Hint

The function uses as const to fix the return type.

The as const assertion tells TypeScript to infer the exact string literal type of the returned template literal, so key has the type "user_42".

❓ Predict Output

expert

Complex Template Literal Type with Conditional Types

What is the type of Result after this code?

Typescript

type Status = "success" | "error";

type Response<T extends Status> = T extends "success"
  ? `Response: ${T} with data`
  : `Response: ${T} with error`;

// What is Response<"error">?

type Result = Response<"error">;

A "Response: error with error"

B "Response: error with data"

C "Response: success with error"

D "Response: success with data"

💡 Hint

Conditional types choose the template based on the input type.

For T = "error", the conditional type picks the false branch, so Result is the string literal type "Response: error with error".