Literal Types

Welcome to the next lesson! In this lesson, you’ll learn about literal types, a TypeScript feature that allows you to define exact, specific values for variables. This makes your code more predictable and type-safe. Let’s dive in!

Literal types in TypeScript allow a variable to hold a specific value, rather than just a general type like string or number. For example, you can restrict a variable to only hold the value "yes" or "no".

Example:

Task: Declare a variable with a literal type and assign valid and invalid values to it.

let answer: "yes" | "no";
answer = "yes"; 
// Valid
// answer = "maybe"; 
// Error: Type '"maybe"' is not assignable to type '"yes" | "no"'.

String literal types restrict a variable to a specific set of string values. Example:

Task: Create a type for directions and assign values to a variable.

type Direction = "up" | "down" | "left" | "right";

let move: Direction;
move = "up"; // Valid
// move = "forward"; 
// Error: Type '"forward"' is not assignable to type '"up" | "down" | "left" | "right"'.

You can also use literal types with numbers to restrict a variable to specific numeric values. Example:

Task: Define a numeric literal type for dice rolls and test it.

type DiceRoll = 1 | 2 | 3 | 4 | 5 | 6;

let roll: DiceRoll;
roll = 4; // Valid
// roll = 7; 
// Error: Type '7' is not assignable to type '1 | 2 | 3 | 4 | 5 | 6'.

You can use literal types in function parameters to allow only specific values. Example:

Task: Write a function with a parameter that uses literal types.

function setStatus(status: "active" | "inactive"): void {
  console.log(`The status is now ${status}`);
}

setStatus("active"); 
// Output: The status is now active
// setStatus("pending"); 
// Error: Type '"pending"' is not assignable to type '"active" | "inactive"'.

To reuse literal types, you can define them as type aliases. Example:

Task: Create a type alias for traffic light colors and use it in a variable.

type TrafficLight = "red" | "yellow" | "green";

let light: TrafficLight = "red";
console.log(light);
 // Output: red

You can use literal types inside objects to restrict the values of specific properties. Example:

Task: Create an object type with a property that uses literal types.

type Button = {
  label: string;
  size: "small" | "medium" | "large";
};

let submitButton: Button = {
  label: "Submit",
  size: "medium",
};

console.log(submitButton);

Here are some common mistakes when using literal types:

• Forgetting to update all allowed values when modifying a literal type.
• Assigning values not included in the literal type (TypeScript will catch this).
• Using literal types for highly dynamic data, where flexibility is more important.

Tip: Use literal types for controlled, predictable scenarios!

Congratulations! You’ve learned how to use literal types in TypeScript to define precise and restricted values. Literal types are especially useful for creating predictable and type-safe code. In the next lesson, we’ll explore TypeScript’s support for working with functions. Let’s keep coding!