The satisfies Operator

Validate shape without losing literal types.

TypeScript4 min readConcept 54 of 54

The Widening Problem

When you annotate a variable with a type (const colors: Theme = ...), TypeScript validates that the object matches the Theme interface.

However, it also 'widens' the types of your properties. If Theme says primary: string, TypeScript forgets that you typed exactly "blue" and only remembers that it is some generic string.

Enter 'satisfies'

Introduced in TypeScript 4.9, the satisfies operator solves this exact problem.

It checks that an object matches an interface, but it *preserves* the exact literal types of the values you assigned.

Syntax

typescript type Theme = { primary: string, secondary: string }; // ❌ Widens to string const badTheme: Theme = { primary: "blue", secondary: "red" }; badTheme.primary; // Type is 'string' // ✅ Preserves exact literal const goodTheme = { primary: "blue", secondary: "red" } satisfies Theme; goodTheme.primary; // Type is strictly '"blue"'

Try it

Toggle between standard Type Annotation and the modern satisfies operator to see how it affects downstream type inference.

Strategy
// 1. The Interface defines a broad shape
type Theme = { primary: string };

// 2. The Implementation
const myTheme: Theme = {
primary: "#0ea5e9"
};

// 3. Downstream usage (Hover to see inferred type!)
function paint(color: "#0ea5e9" | "#f43f5e") { ... }

paint(
Inferred Type
(property) Theme.primary: string
myTheme.primary
Argument of type 'string' is not assignable to type '"#0ea5e9" | "#f43f5e"'.
);
Compiler Memory
Variable Type
Theme
Result of myTheme.primary
Widened to: string
The compiler forgot your exact hex code because you told it to just be a generic "Theme".
Hover over myTheme.primary in the code!

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1What is the key difference between Type Annotation (`: Type`) and the `satisfies` operator?

Remember this

  • const x: Type = {} widens your specific literal values.
  • const x = {} satisfies Type validates the shape but preserves your exact literals.
  • Use satisfies for configuration objects, themes, and route maps.
  • It prevents errors when passing object properties into functions that expect strict union literals.

Done with this concept?

Mark it complete to track your progress. No login needed.