Скачать или смотреть How to Make PropTypes Work with TypeScript in React

Discover how to effectively use `PropTypes` in a React module written in plain JavaScript in a TypeScript project without rewriting the whole module.
---
This video is based on the question https://stackoverflow.com/q/75248442/ asked by the user 'Mormen' ( https://stackoverflow.com/u/15053625/ ) and on the answer https://stackoverflow.com/a/75248856/ provided by the user 'pacifica94' ( https://stackoverflow.com/u/12278378/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Typescript doesn't work with JS module PropTypes

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Make PropTypes Work with TypeScript in React

If you're a developer navigating the waters of React and TypeScript, you might encounter a situation where you have a React component written in plain JavaScript that utilizes PropTypes, but you're eager to integrate it into a TypeScript project. Understanding how to make TypeScript recognize and validate PropTypes can be a challenging hurdle. This guide will guide you through the nuances of this problem and provide effective solutions without the need to rewrite your entire module in TypeScript.

The Problem Overview

You have a React component like this:

[[See Video to Reveal this Text or Code Snippet]]

You’ve published this component to the npm registry and now you are trying to use it in your TypeScript project. You expect TypeScript to catch errors related to props, for example when you try to use a prop that isn’t defined:

[[See Video to Reveal this Text or Code Snippet]]

However, TypeScript doesn’t flag the usage of noExistProp, which can lead to unexpected bugs in your code. You might be wondering if there's a way for TypeScript to utilize PropTypes from your JavaScript module effectively.

The Solution: Using Type Declarations

While you might prefer to keep your existing module in JavaScript, you can leverage TypeScript's declaration file feature to establish type definitions for your imported module. Here’s how to proceed:

1. Create a Declaration File

You can create a .d.ts type declaration file in your TypeScript project that describes the types for your JavaScript module. This way, you won’t need to rewrite the module, but you will provide TypeScript with the necessary information about the component’s props.

Create a file, for instance, alert.d.ts in the same directory as your JavaScript module, or in a @types folder.

Inside the file, declare the types for the component props:

[[See Video to Reveal this Text or Code Snippet]]

2. Utilize InferProps

Another option is to use the InferProps utility provided by the prop-types package. This method assumes your prop types are maintained post-compilation. You can do this as follows:

Import the InferProps and define the props based on your existing PropTypes:

[[See Video to Reveal this Text or Code Snippet]]

3. Type Checking

Once you've created your declaration file or utilized InferProps, TypeScript will now understand what props are expected for the Alert component. As a result, it will flag any incorrect prop usage in your TypeScript files.

Conclusion

Integrating a JavaScript module that uses PropTypes into a TypeScript project without a complete rewrite can be achieved through declaring types or using InferProps. Remember, while working with existing JavaScript libraries, it can be highly advantageous to take the time to create type definitions for better type checking and a smoother development experience.

By following these steps, you’ll ensure that TypeScript catches any misused props, helping you maintain cleaner and more reliable code. Happy coding!