This page looks best with JavaScript enabled

6 simple tips for working with React and TypeScript

 ·  ☕ 3 min read  ·  ✍️ Iskander Samatov

React TypeScript tips


In this post, we will cover some common tips, suggestions, and techniques useful when building React applications with TypeScript.

Use utility types

You’ll frequently want to construct new types on top of the existing ones when working with TypeScript. There are several advantages to making new types this way:

  • Maintaining consistency with the DRY principle. Reducing the repetition in your code by reusing existing types.
  • Keeping your types in sync when they change. When you alter any underlying type, all of its descendant types will also adopt the change.

One way to create new types is by using the TypeScript utility types. The utility types can help you solve more complex edge cases when writing custom types. I wrote an overview of utility types in my other post, which you may find useful.

Create reusable components using generics

You can use the React.Component type to write reusable generic React components in TypeScript.

React.Component is a generic parameterized type that you can use to create components that accept dynamic input types. Let’s see how we can create a generic list component with this type:

React TypeScript generic list component

In the example above, we created a generic list component that takes in dynamic type T as an input. This means that our component can accept any type of data for its items prop. We then use the map function to iterate over each item in our items array and render it using the itemRenderer function prop.

By creating generic components this way, you can write code that applies to multiple types and reduce code duplication.

Use React.CSSProperties

React.CSSProperties is a type that represents style information in React for CSS-in-JS objects. This type is useful for passing the style prop to your components and making sure that it’s used in a way that’s supported by React.

React TypeScript CSSProperties

Extend HTML elements using React.HTMLProps

Using React.HTMLProps, you can create custom elements that extend the functionality of native HTML elements.

React TypeScript HTMLProps

In the code example above, we created a custom React element called Input that constructs its props type using React.HTMLProps. We then use the about, accept, and other HTML props to define its behavior.

Use types for constants

It’s a common practice to create global constants in projects using this syntax:

const variant example

Syntax like this is often used when creating Redux actions, for example. However, a more elegant solution is to use types instead of string constants:
type variant example

Doing so helps us avoid typos and ensures that no one uses any variant types other than the ones we allow.

Another upside is that we get better support for IntelliSense when using IDEs like VSCode. We can autocomplete the variants and get type-checking on our code:

type variant IDE support

Use shorthand ambient modules to solve external type errors

Ambient declarations are used to describe the API shape for a library not written in TypeScript. These are usually defined in d.ts files.

If you’re looking for TypeScript declarations for a third-party module but can’t seem to find any, you can either create your own types or turn off type checking for this module using shorthand ambient modules :
declare module "hot-new-module";

As a result, TypeScript will apply the any type to all imports from this shorthand module.

Conclusion

I hope you’ve found this list of Typescript tips helpful. If you’re looking for more resources, I recommend checking out this comprehensive guide for using TypeScript with React and Redux. This post was not a detailed tutorial but rather an overview of some common practices that will help when working with React and TypeScript.

If you’d like to get more web development, React and TypeScript tips consider following me on Twitter, where I share things as I learn them.
Happy coding!

Share on

Software Development Tutorials
WRITTEN BY
Iskander Samatov
The best up-to-date tutorials on web and mobile development.