TypeScript is a great language that allows type-checking your code in order to make it more robust and understandable.

All React + TypeScript Cheatsheets The Basic Cheatsheet (/README.md) is focused on helping React devs just start using TS in React apps Focus on opinionated best practices, copy+pastable examples. Explains some basic TS types usage and setup along the way. The one-page guide to TypeScript: usage, examples, links, snippets, and more. This is Devhints.io cheatsheets — a collection of cheatsheets I've written. 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.

React Native Typescript Cheat Sheet

In this guide, I will lead you in setting up TypeScript types on React hooks (useState, useContext, useCallback, and so on).

Sorry for the interrupt!

If you're interested in learning TypeScript or React in a comprehensive way, I highly recommend these bestseller courses:
> Understanding TypeScript - 2020 Edition
> React - The Complete Guide (incl Hooks, React Router, Redux)

Let's dive in

Set types on useState

The useState hook allows you to manage state in your React app. It's the equivalent of this.state in a Class component.

To set types on useState hook, you need to pass into <> the type of the state. You can also use union type like this <number | null> if you don't have an initial state.

Set types on useRef

The useRef hook returns a mutable ref object that allows accessing DOM elements.

As you can see, the way useRef receives types is the same as the useState hook. You just have to pass it into the <> - and, if you have multiple type annotations, just use union type as I do here.

Set types on useContext

useContext is a hook that allows accessing and consuming a given Context in a React app.

Here, we start by creating the IArticle interface that is the type of our context.Next, we use it on the createContext() method to create a new context, and then initialize it with [] - you can also use null as an initial state if you want too.

Typescript Cheat Sheet Pdf

With that in place, we can now handle the state of the context and set the type on useContext in order to expect an array of type IArticle as value.

Set types on useReducer

The useReducer hook helps to manage more complex states. It's an alternative to useState - but keep in mind that they are different.

Here, we start by declaring the action types that allow handling the counter. Next, we set respectively two types for the reducer function and the counter state.

The reducer expects a state of type ICounter and an action of type IReducer. With that, the counter can now be handle consequently.

The useReducer hook receives the reducer function and an initial state as arguments and returns two elements: the state of the counter and the dispatch action.

To set the type for the values returned by ueReducer - just pass into the <> the type of your data.

With that in place, the counter can now be incremented or decremented through useReducer.

Set types on useMemo

The useMemo hook allows you to memorize the output of a given function. It returns a memoized value.

To set types on useMemo - just pass into the <> the type of data you want to memorize.Here, the hook expects a string as a returned value.

Set types on useCallback

The useCallback hook allows you to memorize a function to prevent unnecessary re-renders. It returns a memoized callback.

Here, we declare the CallbackType type that is using as type on the callback we want to memorize.It expects to receive parameters of type string and should return a value of type void.

Next, we set that type on useCallback - and if you pass a wrong type to the callback or the array of dependencies - TypeScript will yell at you.

Thanks for reading

Typescript Cheat Sheet Reactive

I get this question from time to time:

How to start using React with Typescript (TS)?

Let's be honest, Typescript can be intimidating if you've never been exposed to a typed language before.

In this article, I will explain how you can start programming UI's with React and Typescript.

Who should consider this

• intermediate JS developers
• React developers that want to learn writing React code in TS

What's the minimal start

I encourage people to start learning React without TS first. After you build a few sample apps using just React and JS, you can start looking at:

1) A TS Crash CourseThis will teach you the bare bones of TS, that you need to get a hang of before combining it with React.

2) A a React TS tutorialThis will teach you the basics of what you need to know for successfully using TS with React.

3) Read the React-TS Cheat sheetThis can be found here, and it's gold. ⭐A very handy resource of how to use TS in React Function components, classes, hooks, etc. There are even migration guides, telling you how you could approach the migration from a JS-React app to a TS-React app.

How to really learn 🧠

Don't just watch the tutorials, but actually have them set up on your computer and follow them, while you watch the videos. After you watched the videos, try to tweak those small applications and extend them a little bit.

Don't rush the process and be consistent. You cannot learn everything about using React with TS in a few days. Be consistent and build some things with those technologies. 🏗️

Live long and enjoy TS

Reactjs Typescript Cheat Sheet

Hope this helps, now you should be able to use TS in any React codebase, enjoy!

React With Typescript

Leave a 🧡 & 🦄 if you like this article, also check out my Twitter where I post more cool content.

React Typescript Cheatsheet

👇 Comment below 👇What other cool learning materials exist for React & Typescript out there?