Getting Redux DevTools to Work with TypeScript

Redux DevTools is a chrome extension that enables developers to see Redux state change in the browser’s console. This post is a quick reference to set up your TypeScript react file so that you can debug your code with Redux DevTools.

For normal JavaScript, it will be easy. You can just pass composeEnhancer() into the store with the property __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ as below. This code goes into the index.jsx or wherever you wrap entire app with Provider in the ReactDom.render() method.

On the other hand, TypeScript does not know the type of the property. Therefore, you will get the error; Property ‘__REDUX_DEVTOOLS_EXTENSION_COMPOSE__’ does not exist on type ‘Window’.

Hence, you need to add the property to the global window as below.

The devtools should be working now!

Front-End
TypeScript: type aliases to check type equality

This post is to analyse how the type equality check by using type aliases proposed by Matt Pocock in his twitter post. These type aliases allow us to elegantly express type equality checks in unit tests. All we need to do is to pass the output and expected types in …

Front-End
Fixing it.only type error in Jest

If you are getting a type error with it.only in Jest, it could be due to incorrect TypeScript typings or incompatible versions of Jest and TypeScript. To resolve this issue, you can try the following steps: Make sure you have the latest versions of Jest and its TypeScript typings installed …

Front-End
yup conditional validation example

Here’s an example of a Yup validation logic where the first input field is optional but, if filled, it must contain only alphabetic characters, and the second input field is required: import * as Yup from “yup”; const validationSchema = Yup.object().shape({ firstField: Yup.string().matches(/^[A-Za-z]*$/, { message: “First field must contain only …