DEV Community

Acid Coder
Acid Coder

Posted on • Edited on

4 1 1

Typescript WTF Moment 12: Beware of Object Literal Unions

type ABC = { A: number, B: number } | { C: number }

const abc: ABC = { A: 1, B: 2, C: 3 } // no error!
Enter fullscreen mode Exit fullscreen mode

Image description

playground

Typescript excess property check allow any property from unions of object literal

Solutions:

Assign type never to excess properties and make them optional

type ABC = { A: number, B: number, C?: never } | { A?: never, B?: never, C: number }

const abc: ABC = { A: 1, B: 2, C: 3 } // error!

const ab: ABC = { A: 1, B: 2 } // ok!

const c: ABC = { C: 3 } // ok!

const bc: ABC = { B: 2, C: 3 } // error!
Enter fullscreen mode Exit fullscreen mode

Image description

playground

With common properties that have different types, Typescript is able to discriminate unions

However it is a lot of work if we have a large unions of object literal

We need to create an utility type that automate this process

type GetAllKeys<T> = T extends T ? keyof T : never

type CreateOptionalExcessProperty<T, Y> = T extends T ? T & Partial<Record<Exclude<GetAllKeys<Y>, keyof T>, never>> : never

type StrictUnion<T> = CreateOptionalExcessProperty<T, T>

type ABC = StrictUnion<{ A: number, B: number } | { C: number }>;

const abc: ABC = { A: 1, B: 2, C: 3 } // error!

const ab: ABC = { A: 1, B: 2 } // ok!

const c: ABC = { C: 3 } // ok!

const bc: ABC = { B: 2, C: 3 } // error!
Enter fullscreen mode Exit fullscreen mode

Image description

playground

The purpose of T extends T is to distribute unions

credit

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay