TypeScript cheatsheetEdit

The satisfies operator

From the v4.9 release notes (with emphasis added):

The new satisfies operator lets us validate that the type of an expression matches some type, without changing the resulting type of that expression.

Example: Catching bad property names

type Colors = "red" | "green" | "blue";
type RGB = [red: number, green: number, blue: number];

// Here we catch the typo ("bleu") in the property name:
const palette = {
    red: [255, 0, 0],
    green: "#00ff00",
    bleu: [0, 0, 255]
} satisfies Record<Colors, string | RGB>;

// While preserving the `string` type on `palette.green`:
const greenNormalized = palette.green.toUpperCase();

Or a variant of the same — catching an invalid property name while using unknown to let TS infer the types of the keys:

type Colors = "red" | "green" | "blue";

// Here we catch that "platypus" is not a valid property name:
const favoriteColors = {
    "red": "yes",
    "green": false,
    "blue": "kinda",
    "platypus": false
} satisfies Record<Colors, unknown>;

// While preserving type info about specific keys:
const g: boolean = favoriteColors.green;

Example: Checking key types (irrespective of property names)

type RGB = [red: number, green: number, blue: number];

// Here we catch that `blue`'s value isn't a valid `RGB` type:
const palette = {
    red: [255, 0, 0],
    green: "#00ff00",
    blue: [0, 0]
    //    ~~~~~~ error!
} satisfies Record<string, string | RGB>;

// Note that type info for other values is preserved:
const redComponent = palette.red.at(0); // `palette.red` is of type `RGB`.
const greenNormalized = palette.green.toUpperCase(); // palette.green` is of type `string`.