DEV Community

Cover image for Prerequisite to understanding TypeScript Omit in React TypeScript Cheatsheet
Sung M. Kim
Sung M. Kim

Posted on • Originally published at sung.codes on

Prerequisite to understanding TypeScript Omit in React TypeScript Cheatsheet

Introduction

A note to self lest I forget the resources I learned from.

As I was going thru Swyx's React TypeScript Cheatsheet, Props: Omit prop from a type, I had trouble understand the definition of Omit.

// this comes inbuilt with TS 3.5
type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>

Could not wrap my heads around it so Googled and found Marius Schulz's blog posts.

Blog read order

I read these backwards initially but the posts in following order seems to make sense.

  1. keyof and Lookup Types in TypeScript - Learn about keyof used for Omit and Exclude
  2. Conditional Types in TypeScript - To understand Exclude
   type Exclude<T, U> = T extends U ? never : T
  1. The Omit Helper Type in TypeScript - To finally learn how Omit is implemented

References

Advaned utlity type document and sources for

  1. Omit<Type, Keys>
   /**
    * Construct a type with the properties of T except for those in type K.
    */
   type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>
  1. Pick<Type, Keys>
   /**
    * From T, pick a set of properties whose keys are in the union K
    */
   type Pick<T, K extends keyof T> = {
     [P in K]: T[P]
   }
  1. Exclude<Type, ExcludedUnion>
   /**
    * Exclude from T those types that are assignable to U
    */
   type Exclude<T, U> = T extends U ? never : T

Misc. Link

Need to watch Marius Schulz's Egghead course, Advanced Static Types in TypeScript.


Image by Edward Lich from Pixabay

cuz, Donut's hole reminds me of Omit 😉

Discussion (0)