TypeScript is an open-source programming language that builds on JavaScript and provides static type checking. It helps you catch errors at build time before your code goes to production.

TypeScript documentation

External resource

Reshaped is written entirely in TypeScript, so all component typings are available out-of-the-box and are always up to date. Besides throwing errors when invalid properties are passed to a component, TypeScript serves as an additional layer of component documentation right in your editor.

To use our typings in your project, you can import them from the same package. Most code editors also allow you to navigate to the package by using cmd(ctrl) + click to see what every component type looks like.

import { ButtonProps } from "reshaped";

Most of the time, you will need only some of the properties used by the component, so you can pick one or multiple properties from the typings provided by the library:

import { ButtonProps } from "reshaped";

// Pick one property
type MyComponentProps = {
  buttonText: ButtonProps["text"];
  selected?: boolean;
};

// Pick multiple properties
type AnotherComponentProps = Pick<ButtonProps, "text" | "color"> & {
  selected?: boolean;
};

You can use the same approach when saving component properties to variables.

import { TextField, TextFieldProps } from "reshaped";

// Function knows which arguments are supported
const handleChange: TextFieldProps["onChange"] = ({ value }) => {
  // ...
};

return <TextField onChange={handleChange} />;