Why template literal types are powerful in Typescript - Challenge Your Understanding

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of Template Literal Type Combination

What is the type of Result after this code runs?

Typescript

type Colors = "red" | "blue";
type Shades = "light" | "dark";
type Result = `${Shades}-${Colors}`;

// What is Result?

A "light-red-dark-blue"

B "light" | "dark" | "red" | "blue"

C "light-red" | "light-blue" | "dark-red" | "dark-blue"

D "light-red" & "light-blue" & "dark-red" & "dark-blue"

💡 Hint

Think about how template literal types combine each option from both unions.

Template literal types create all combinations of the union members by concatenating them with the given pattern.

🧠 Conceptual

intermediate

Why Use Template Literal Types for String Manipulation?

Which of the following best explains why template literal types are powerful in TypeScript?

A They automatically convert strings to numbers for easier calculations.

B They allow creating new string literal types by combining existing ones, enabling precise type checks on dynamic strings.

C They let you write multi-line strings without escape characters.

D They replace all string types with a generic string type to simplify code.

💡 Hint

Think about how template literal types help with type safety for strings.

Template literal types let you build new string types from unions, so TypeScript can check if strings match expected patterns.

❓ Predict Output

advanced

Output of Nested Template Literal Types

What is the type of Combined after this code?

Typescript

type Prefix = "get" | "set";
type Entity = "User" | "Product";
type Combined = `${Prefix}${Entity}Info`;

// What is Combined?

A "getUserInfoProduct" | "setUserInfoProduct"

B "get" | "set" | "User" | "Product" | "Info"

C "getUser" | "setProduct" | "Info"

D "getUserInfo" | "getProductInfo" | "setUserInfo" | "setProductInfo"

💡 Hint

Consider how each prefix combines with each entity and the fixed suffix.

The template literal type creates all combinations of Prefix and Entity, then adds 'Info' at the end.

🔧 Debug

advanced

Identify the Error in Template Literal Type Usage

What error will this TypeScript code produce?

Typescript

type A = "foo" | "bar";
type B = `${A}`;

// Missing closing backtick

A SyntaxError: Unterminated template literal type

B TypeError: Cannot assign union to template literal

C No error, compiles fine

D ReferenceError: A is not defined

💡 Hint

Check the syntax carefully for missing characters.

The template literal type is missing the closing backtick, causing a syntax error.

🚀 Application

expert

Using Template Literal Types to Enforce API Endpoint Patterns

Given these types, which option correctly defines ApiEndpoint to represent endpoints like '/user/123' or '/product/456' where the number is dynamic but must be a string literal type?

Typescript

type Resource = "user" | "product";
type Id = `${number}`;

// Define ApiEndpoint here

A type ApiEndpoint = `/${Resource}/${Id}`;

B type ApiEndpoint = `/${Resource}/${number}`;

C type ApiEndpoint = `/${Resource}/number`;

D type ApiEndpoint = `/${Resource}/123` | `/${Resource}/456`;

💡 Hint

Use template literal types with string literal unions and template types for numbers.

Option A correctly uses a template literal type combining Resource and Id (which is a string literal of a number) to represent dynamic numeric IDs as strings.