This content originally appeared on Bits and Pieces - Medium and was authored by Imran Farooq
TypeScript is getting popular day by day. Hence, it is the best time to begin using it if you haven’t already. Chances are, our project has been developed for quite a long time. If that’s the case, the great approach might be to use TypeScript to the codebase gradually. We could encounter a case where we would like to use React components code in JavaScript within our TypeScript code.
In this article, we take a deep dive into how to make TypeScript declaration files that let us do that. We also learn how we can make interfaces from React prop types.
Declaration files
We can determine a type declaration file by the .d.ts filename extension. These files’ job is to clench the declarations of our variables and methods without their implementations.
To understand the type declaration files better, let’s make a simple function in JavaScript.
sum.js
From the code given above, you can see I have exported the function. Regrettably, it does not contain any types. To tackle that, let’s make a declaration file. The easiest way to do that would be to create a .d.ts in the same directory.
sum.d.ts
In the code given above, we define the method along with its arguments and the return type. The execution is still in the JavaScript file, so we don’t want to repeat it in the .d.ts file.
Thanks to doing the above, when we import the sum method in our TypeScript code, it is fully type-safe.
index.ts result: Argument of type ‘”1″‘ is not assignable to parameter of type ‘number’ .
We can do the same thing with variables instead of functions. However, keep in mind that TypeScript is capable of analyzing JavaScript files to some extent.
constants.js
index.ts
Index.ts result: Argument of type ‘”100px”‘ is not assignable to parameter of type ‘number’ .
However we didn’t make a declaration file for the constants.js file, TypeScript properly assigned the HEADER_HEIGHT and FOOTER_HEIGHT constants with the literal types.
Declaring modules
TypeScript is for sure popular. That is why, all mostly used libraries should have TypeScript declarations. Even if that’s the case, you might want to use a library that does not have the declarations for some reason. e.g, it might be a private library developed by your organization.
A simple use case is importing image files. Webpack mostly takes care of it under the hood, e.g, with the file-loader. Still, TypeScript does not acknowledge image files as modules.
App.tsx
App.tsx result: Cannot find module ‘./logo.png’ .
We can easily tackle it by creating a file with a module declaration.
png.d.ts
In the code given above, we define that all files with the .png extension export a URL. We can also specify a third-party library in such a way, for example.
Making declaration files for React components
If we are using TypeScript to an organization, chances are there are rarely React components already in place. To give an example, let’s create a straightforward input component in JavaScript.
Input.tsx
If we attempt to import the Input component in TypeScript as it is, we do obtain some type safety, but not much.
ComponentProps is a utility shipped with React that can extract the types of the props of a component.
In the code given above, we can see that TS can recognize our Input component to some extent. Though some props such as the label are not needed, this is not given in the above types. The type prop is described somewhat correctly because we’ve given a default value. Even though we can improve it more.
Input.d.ts
If you are using class components, utilize the ComponentClass type imported from React in place of FunctionComponent.
In the code given above we are independent to import additional types in our declaration file above. Creating these declarations results in type-safe React components, though if they weren’t created with TypeScript.
Creating interfaces from prop types
In code given above, we define a JavaScript React component and make a TypeScript interface from start. Doing this has the great chance of producing good results, but it takes some time. Chances are, the React component we are trying to utilize already has prop types defined.
To make a TypeScript interface from prop types, we have to use the InferProps utility.
By using code given above may get us some type-safety. Let’s inspect what props the above defining produces:
You can see that we can utilize prop types to create valid TypeScript interfaces. Regrettably, they miss some of the important details, for example the arguments of the onChange function.
Summary
In this article, we got an idea about how to use JavaScript React components within TypeScript code. In order to do that, we learnt the basic rules of writing declaration files. We also leant how to make declarations for React components both from the start and utilizing prop types. Finally, we compared two approaches, and it looks like it could be a better idea to code TypeScript interfaces from the start in most cases.
Go composable: Build apps faster like Lego
Bit is an open-source tool for building apps in a modular and collaborative way. Go composable to ship faster, more consistently, and easily scale.
Build apps, pages, user-experiences and UIs as standalone components. Use them to compose new apps and experiences faster. Bring any framework and tool into your workflow. Share, reuse, and collaborate to build together.
Help your team with:
Learn more
- How We Build Micro Frontends
- How we Build a Component Design System
- The Bit Blog
- 5 Ways to Build a React Monorepo
- How to Create a Composable React App with Bit
How to Use JavaScript React Components within TypeScript Code was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Imran Farooq
Imran Farooq | Sciencx (2022-09-09T10:37:06+00:00) How to Use JavaScript React Components within TypeScript Code. Retrieved from https://www.scien.cx/2022/09/09/how-to-use-javascript-react-components-within-typescript-code/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.