TypeScriptTips

Make bugs impossible.
One TypeScript tip at a time.

I like the tricks :) – Kasia

Type-safe string templating

@RiccardoOdone•Suggest a tip•

Let the compiler ensure that every placeholder in the template string is specified in the values to replace.

const replace =
  (template: string, values: Record<string, string>): string =>
    template.replace(/{{(\w+)}}/g, (_, capture) => values[capture])

replace("hello, {{name}}", {}) // ⛔️ "hello, undefined"

type Values<Template> = Template extends
  `${infer _Ignore}{{${infer Capture}}}${infer Rest}` ?
    Record<Capture, string> | Values<Rest> :
    never

const replace =
  <Template extends string>
    (template: Template, values: Values<Template>): string =>
      template.replace(/{{(\w+)}}/g, (_, capture) => values[capture])

replace("hello, {{name}}", {name: "mary"}) // ✅ "hello, mary"
replace("hello, {{name}}", {}) // ✅ Does not compile
replace("hello, {{name}}", { namme: "mary"} // ✅ Does not compile
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