TypeScriptTips

Make bugs impossible.
One TypeScript tip at a time.

I like the tricks :) – Kasia

Parse, don't cast (again)

@RiccardoOdone•Suggest a tip•

APIs could return something that doesn't adhere to your expected response. It's always a good idea to parse values at the boundary of the system before they are sent in.

type User = {
  name: string
  dateOfBirth: string // "yyyy-mm-dd"
}

const format = (user: User) =>
  `${user.name} is ${
    2022 - parseInt(user.dateOfBirth.split("-")[0], 10)
  } years old`

fetch(URL)
  .then((response) => response.json())
  .then((user: User) => { // ⛔️ Casted any to User
    return format(user)
  })
  .then((str: string) => console.log(str))

// ⛔️ When the API changes
// dateOfBirth: string
// to epoch
// dateOfBirth: number
// this will error at run-time.

import { z } from "zod"

const UserSchema = z.object({
  name: z.string(),
  dateOfBirth: z.string()
})

type User = z.infer<typeof UserSchema>

fetch()
  .then((response) => response.json())
  .then((json) => UserSchema.safeParse(json))
  .then((result) => {
    if (result.success) {
      // ✅ user is a User
      return format(user)
    } else {
      // ✅ Must handle parse error
    }
  })
  .then((str: string) => console.log(str))
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