TypeScript Literal Types

TypeScript Literal Types: Exact String, Number, & Boolean Literals

Literal types allow you to specify exact constant values ("success", 404, true) as types instead of broad primitive types (string, number, boolean).

Literal Types Overview

• String Literals: "GET" | "POST" | "PUT" | "DELETE".
• Numeric Literals: 200 | 201 | 400 | 404 | 500.
• Boolean Literals: true or false.

Practical Code Example

// Union of String Literal Types
type HttpMethod = "GET" | "POST" | "PUT" | "DELETE";

// Union of Numeric Literal Types
type AllowedPorts = 80 | 443 | 8080 | 3000;

interface ApiRequest {
  url: string;
  method: HttpMethod;
  port: AllowedPorts;
}

function sendRequest(req: ApiRequest): void {
  console.log(`Sending ${req.method} request to ${req.url}:${req.port}`);
}

sendRequest({
  url: "https://api.kodersolution.com/v1/data",
  method: "POST",
  port: 443
});

// sendRequest({ url: "...", method: "PATCH", port: 443 }); // Compiler Error: Type '"PATCH"' is not assignable to type 'HttpMethod'

Best Practices & Gotchas

• Combine Literal Types with Unions: Ideal for defining valid status sets, HTTP methods, and action dispatch types.
• Use as const When Passing Literal Objects: Prevents automatic type widening when passing literal object parameters.
• Prefer String Literals Over Enums for Simple Values: Light weight, zero bundle overhead, and clean auto-completion.

Self-Check Challenge

Define a literal union type Theme that accepts "light" | "dark" | "system". Assign a valid theme value to a variable.