TypeScriptTips

Make bugs impossible.
One TypeScript tip at a time.

I like the tricks :) – Kasia

Satisfy types

@RiccardoOdone•Suggest a tip•

With satisfies, you can ensure a value matches some type while keeping the most specific type inference.

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

const palette: Record<Colors, RGB | string> = {
    red: [255, 0, 0],
    green: "#00ff00",
    blue: [0, 0, 255]
}

palette.green.replace('#', '') // ⛔️ Does not compile
// Property 'replace' does not exist on type 'string | RGB'.
// Property 'replace' does not exist on type 'RGB'.

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

const palette = {
    red: [255, 0, 0],
    green: "#00ff00",
    blue: [0, 0, 255]
} satisfies Record<Colors, RGB | string>

type Palette = typeof palette
//   ^? { red: RGB; green: string; blue: RGB }

palette.green.replace('#', '') // ✅
Type-safe carouselDo not throwFilter using a type assertionUse precise typesType-safe string templatingEnumerating a union typeNumbers with unitsZero nullEnumerating statusesAnd typesAvoiding window as anyUse descriptive valuesCheck authorization with typesExtract union types from record typesKeep in sync with conditional typesType-safe pickPass arguments by namePick instead of duplicatingPrevent mutationsType aliasesModel with different typesPrefer static types over testsPush conditionals downType-level functionsCheck Authorization With Types (again)From Union to TupleLimit typesLaser-focused typesCallable typesPartial considered harmfulSatisfy typesWTH?!Parse, don't castNarrow typesFetch footgunModel with different types (2)Polymorphic typesParse, don't cast (again)Type-safe envObject vs Recordconst Type ParametersDigType checksExpand intellisenseNumbers with units (2)Unchecked indexed accessExtract instead of duplicating

TypeScriptTips

Crafted with 💛 by Riccardo