← Go Back

Introduction

React TypeScript Cheatsheets. Cheatsheets for experienced React developers getting started with TypeScript. If you ever wanted to learn Typescript and integrate it into your React project and build custom components taking full advantage of TypeScript and React and just can’t find the time or dreading. An updated handbook/cheat sheet for working with React.js with TypeScript. Fernando Doglio. Create-react-app with TypeScript. TypeScript React Cheat Sheet TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. This is a list of TypeScript types generated from the declaration files for react, react-dom, react-native and other libraries in https://github.com/DefinitelyTyped/DefinitelyTyped/tree/1349b64.

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.

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
3. 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>

   • Definition: Constructs a type by picking all properties from Type and then removing Keys.
   • Documentation: https://www.typescriptlang.org/docs/handbook/utility-types.html#omittype-keys
   • Source: https://github.com/microsoft/TypeScript/blob/master/lib/lib.es5.d.ts#L1504

2. Pick<Type, Keys>

   • Definition: Constructs a type by picking the set of properties Keys from Type.
   • Documentation: https://www.typescriptlang.org/docs/handbook/utility-types.html#picktype-keys
   • Source: https://github.com/microsoft/TypeScript/blob/master/lib/lib.es5.d.ts#L1480

3. Exclude<Type, ExcludedUnion>

   • Definition: Constructs a type by excluding from Type all union members that are assignable to ExcludedUnion.
   • Documentation: https://www.typescriptlang.org/docs/handbook/utility-types.html#excludetype-excludedunion
   • Source: https://github.com/microsoft/TypeScript/blob/master/lib/lib.es5.d.ts#L1494

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 😉

Webmentions

Loading counts..

Ever since I started using TypeScript, I can't stop using it. Sometimes finding the correct type and where you should import it from can be a real headache. Especially when building a ReactJS application. This blog post is a great chance to publicly document my most used React TypeScript types. I focus on functional components and react hooks.
The structure of the article is that each paragraph is a standalone tip.

To create a React TypeScript project, we can use Create React App:

There have been lots of talks about the right way to import React. This is the most updated way to do it:
Docker desktop for mac download without login.

The return type of a functional component is ReactElement

If you want to extend the props of a native HTML element, you can use the generic class HTMLAttributes. Let's say I want to create a new button:

Note that we use destructuring to forward the props to the button element.

The children prop is of type ReactNode.

React's events system uses its own types and not the native HTML events. Make sure to import the event from the react library. import { MouseEvent } from 'react'.

Pass the correct type to the useRef generic. If you want to create a ref to an input element:

React Native Typescript Cheat Sheet

The ref.current type will automatically be HTMLInputElement.

The same goes for useState.

If you provide an initial value in both cases, the type will be inferred implicitly.

When creating custom hooks make sure to explicitly set the returns type. Otherwise, TypeScript may infer incorrectly the types.

React Ts

This is far from being a complete cheat sheet but rather documents the things I use the most. Check out this awesome cheat sheet for more information: https://github.com/typescript-cheatsheets/react.

Typescript Cheat Sheet Reactor

‍