ReactTypeScriptclean code

TypeScript Patterns I Wish I Knew Sooner

Jed Llenado20 Feb 20251 min read

After shipping TypeScript for 4 years, these are the patterns that changed how I write React components.

Discriminated Unions for State

Instead of multiple booleans (isLoading, isError, isSuccess), use a discriminated union: type State = {status: 'loading'} | {status: 'error', message: string} | {status: 'success', data: Data}. TypeScript narrows perfectly.

Const Assertions for Config

as const turns your arrays and objects into readonly literal types, which lets you derive union types from them automatically.

Enjoyed this? Get new posts by email

One short email when I publish something new. No spam, and you can reply to unsubscribe.

About the author

Jed Llenado

Jed is a Filipino software engineer with more than 12 years of experience, based in Saudi Arabia. He builds fast, secure websites and apps, backed by AI automation, digital marketing and UX design.

Request a quote
All Postsjedllenado.com