Add TypeScript To An Existing React Project
Learn how to add TypeScript to your existing React project in a few simple steps.
When you're working with React and TypeScript, you'll often find yourself with many questions:
div
or span
accepts?Curiously, you'll find both answers in a single place: ComponentProps
.
There are various ways to use the ComponentProps
type. The following are three of the most common use cases:
When building a React application, there is a need to use native HTML elements such as buttons, inputs, and forms. With the ComponentProps
type, developers can extract the props of these elements, making it easier to type-check them and ensure their correctness.
typescript
import { ComponentProps } from "react";type ButtonProps = ComponentProps<"button">;
In the code above, the ButtonProps
type extracts the type of props used by the button
element. These props can then be used in the React component that renders the button.
You can pass in any DOM element, from span
to a
- you'll even get autocomplete inside ComponentProps
itself in case you make a mistake.
This is particularly useful when you want to create a component that accepts all the props of a div
, but also adds some of its own:
tsx
import { ComponentProps } from "react";type MyDivProps = ComponentProps<"div"> & {myProp: string;};const MyDiv = ({ myProp, ...props }: MyDivProps) => {console.log(myProp!);return <div {...props} />;};
This isn't the only use of React.ComponentProps
, though. You can also use it to extract props from existing components.
typescript
const SubmitButton = (props: { onClick: () => void }) => {return <button onClick={props.onClick}>Submit</button>;};type SubmitButtonProps = ComponentProps<typeof SubmitButton>;
In the above code, the SubmitButtonProps
type extracts the props of the SubmitButton
component. These props can then be used to type-check the component's usage throughout the application.
This is especially useful for extracting the props from components you don't control, perhaps from third-party libraries.
tsx
import { ComponentProps } from "react";import { Button } from "some-external-library";type MyButtonProps = ComponentProps<typeof Button>;
For instance, some-external-library
(above) might not export a ButtonProps
type, but you can still get it using ComponentProps
.
Refs in React let you access and interact with the properties of an element. Often, it's used with form elements like inputs and buttons to extract their values or set their properties. The ComponentPropsWithRef
does exactly what it says - provide the component props with its associated ref.
typescript
type InputProps = ComponentPropsWithRef<"input">;
In the example above, the InputProps
type extracts the props of the input
element, including the associated ref.
Want more TypeScript knowledge? Check out our Beginners TypeScript tutorial - and watch this space for something interesting on React and TypeScript dropping very soon.
Share this article with your friends
Learn how to add TypeScript to your existing React project in a few simple steps.
Learn the essential TypeScript configuration options and create a concise tsconfig.json file for your projects with this helpful cheatsheet.
Big projects like Svelte and Drizzle are not abandoning TypeScript, despite some recent claims.
Learn different ways to pass a component as a prop in React: passing JSX, using React.ComponentType, and using React.ElementType.
Learn about TypeScript performance and how it affects code type-checking speed, autocomplete, and build times in your editor.
When typing React props in a TypeScript app, using interfaces is recommended, especially when dealing with complex intersections of props.