DEV Community

loading...
Cover image for Prerequisite to understanding TypeScript Omit in React TypeScript Cheatsheet

Prerequisite to understanding TypeScript Omit in React TypeScript Cheatsheet

Sung M. Kim
Exploring the world of TypeScript, React & Node
Originally published at sung.codes on ・2 min read

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)

Forem Open with the Forem app