TypeScript is an open-source programming language which builds on JavaScript and provides an additional of static type checking. It means that it can help you catch errors in build time before your code goes to production.

TypeScript documentation

External resource

Reshaped is written completely 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, it can be also used as another layer of component documentation right in your editor.

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

import { ButtonProps } from "reshaped";

Most of them 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 you save component properties to variables.

import { TextField, TextFieldProps } from "reshaped";

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

return <TextField onChange={handleChange} />;