How To Strongly Type process.env
Learn how to strongly type process.env in TypeScript by either augmenting global type or validating it at runtime with t3-env.
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.
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.
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.
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 strongly type process.env in TypeScript by either augmenting global type or validating it at runtime with t3-env.
Discover when it's appropriate to use TypeScript's any
type despite its risks. Learn about legitimate cases where any
is necessary.
Learn why TypeScript's types don't exist at runtime. Discover how TypeScript compiles down to JavaScript and how it differs from other strongly-typed languages.
Improve React TypeScript performance by replacing type & with interface extends. Boost IDE and tsc speed significantly.
In this book teaser, we discuss deriving vs decoupling your types: when building relationships between your types or segregating them makes sense.
Learn how TypeScript's new utility type, NoInfer, can improve inference behavior by controlling where types are inferred in generic functions.