CODEWITHSUNDEEP
reactjstypescript
Aaron Beall
Aaron Beall

Reputation: 52133

TypeScript workaround for rest props in React

Updated for TypeScript 2.1

TypeScript 2.1 now supports object spread/rest, so no workarounds are needed anymore!

Original Question

TypeScript supports JSX spread attributes which is commonly used in React to pass HTML attributes from a component to a rendered HTML element:

interface LinkProps extends React.HTMLAttributes {
  textToDisplay: string;
}

class Link extends React.Component<LinkProps, {}> {
  public render():JSX.Element {
    return (
      <a {...this.props}>{this.props.textToDisplay}</a>
    );
  }
}

<Link textToDisplay="Search" href="http://google.com" />

However, React introduced a warning if you pass any unknown props to an HTML element. The above example would produce a React runtime warning that textToDisplay is an unknown prop of <a>. The suggested solution for a case like this example is to use object rest properties to extract out your custom props and use the rest for the JSX spread attributes:

const {textToDisplay, ...htmlProps} = this.props;
return (
  <a {...htmlProps}>{textToDisplay}</a>
);

But TypeScript does not yet support this syntax. I know that hopefully some day we will be able to do this in TypeScript. (Update: TS 2.1 now supports object spread/rest! Why are you still reading this??) In the meantime what are some workarounds? I'm looking for a solution that doesn't compromise type-safety and finding it surprisingly difficult. For example I could do this:

const customProps = ["textDoDisplay", "otherCustomProp", "etc"];
const htmlProps:HTMLAttributes = Object.assign({}, this.props);
customProps.forEach(prop => delete htmlProps[prop]);

But this requires the use of string property names that are not validated against the actual props and thus prone to typos and bad IDE support. Is there a better way we can do this?

Upvotes: 119

Views: 143107

Answers (10)

Latif
Latif

Reputation: 69

If you are looking for code intelligence

use the following approach.

  1. pass the ...rest props.
  2. choose which element in the component to have intelligence (TextInput) in our case.
  3. Extend the component props by the element type.

AppTextInput.tsx

interface AppTextInputProps extends TextInputProps {
icon?: any;
}
const AppTextInput = ({ icon, ...rest }: AppTextInputProps) => {
  return (
    <View style={styles.container}>
     <TextInput style={styles.input} placeholder="Name" {...rest} />
      {icon && <Ionicons name={icon} size={16} />}
    </View>
    );
 };

Upvotes: 0

Willy
Willy

Reputation: 3814

It's actually easier than all of the answers above. You just need to follow the example below:

type Props = {
  id: number,
  name: string;
  // All other props
  [x:string]: any;
}

const MyComponent:React.FC<Props> = props => {
  // Any property passed to the component will be accessible here
}

Upvotes: 205

abernier
abernier

Reputation: 28198

React.ComponentPropsWithoutRef/React.ComponentPropsWithRef

As explained in https://react-typescript-cheatsheet.netlify.app/docs/advanced/patterns_by_usecase/

interface Props extends React.ComponentPropsWithoutRef<"button"> {
  // ...
}
    
const FancyButton = (props: Props) => {
  const { /**/ , ...rest} = props
      
  // ...
      
  return <button {...rest}>{/**/}</button>
}

if using forwardRef, use React.ComponentPropsWithRef instead

DEMO

Upvotes: 3

aderchox
aderchox

Reputation: 4074

For those who might not quickly understand what [x:string]: any; in the accepted answer does: Although it's a lot like arrays' syntax, it's indeed specifying an object its keys which are of type string and its values which are of type any. It's called "Index Signature" in TypeScript's terminology.

However, also notice that sometimes, as an alternative and less loose-on-types solution, a library you're using might have types exported as well, so you could use those.

For instance, when extending Ant's Buttons, one could do this:

import { ReactNode } from "react";
import { Button as AntButton } from "antd";
import { NativeButtonProps } from "antd/lib/button/button";

interface IButtonProps {
  children?: ReactNode;
}

const Button = ({
  children,
  ...rest
}: IButtonProps & NativeButtonProps): JSX.Element => {
  return <AntButton {...rest}>{children}</AntButton>;
};

export default Button;

NOTE1: The ampersand (&) operator in IButtonProps & NativeButtonProps simply does "merging" of types in TypeScript. Now you don't lose intellisense for Ant Button props on your own Button, because you don't use any anymore. Ant Button's types and your IButtonProps are combined and so exist both.

NOTE2: Also you might wonder where I found this type. This type was exported here: https://github.com/ant-design/ant-design/blob/master/components/button/button.tsx#L124 And also its include path could be realized using intellisense, just start typing NativeButton... and it must be suggested to you.

Upvotes: 15

Waleed Tariq
Waleed Tariq

Reputation: 885

TypeScript now ignores ...rest if you pass it as argument to your component. In my opinion ...rest argument does not need type safety as these are the default argument that are passed down to child components by parent component. For example redux passes information about store to child component and so the ...rest argument is always there and does not needs type safety or propTypes.

//here's the right solution

interface schema{
  loading: boolean
}
//pass ...rest as argument
export function MyComponent({loading, ...rest}:schema){
  if (loading) return <h2>Loading ...</h2>
  return (
    <div {...rest}>
      <h2>Hello World </h2>
    </div>
}

strong text

Upvotes: -1

Metalik
Metalik

Reputation: 943

use ...rest

type ButtonProps = {
    disabled: boolean;
};

function Button(props: ButtonProps): JSX.Element {
    const {disabled = false, ...rest} = props;
...
return (
    <button disabled={disabled} {...rest}>
....

Upvotes: 16

Okku
Okku

Reputation: 7819

A getter like this could work:

class Link extends React.Component<{
  textToDisplay: string;
} & React.HTMLAttributes<HTMLDivElement>> {

  static propTypes = {
    textToDisplay: PropTypes.string;
  }

  private get HtmlProps(): React.HTMLAttributes<HTMLAnchorElement> {
    return Object.fromEntries(
      Object.entries(this.props)
      .filter(([key]) => !Object.keys(Link.propTypes).includes(key))
    );
  }

  public render():JSX.Element {
    return (
      <a {...this.HtmlProps}>
        {this.props.textToDisplay}
      </a>
    );
  }
}

<Link textToDisplay="Search" href="http://google.com" />

Upvotes: 6

Damian Green
Damian Green

Reputation: 7495

React.HtmlAttributes in the example above is now generic so I needed to extend from React.AnchorHTMLAttributes<HTMLAnchorElement>.

Example: 

import React from 'react';

type  AClickEvent = React.MouseEvent<HTMLAnchorElement>;

interface LinkPropTypes extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
    to: string;
    onClick?: (x: AClickEvent) => void;
}

class Link extends React.Component<LinkPropTypes> {
  public static defaultProps: LinkPropTypes = {
    to: '',
    onClick: null,
  };

private handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
   ...
    event.preventDefault();
    history.push(this.props.to);
 };

  public render() {
    const { to, children, ...props } = this.props;
    return (
      <a href={to} {...props} onClick={this.handleClick}>
        {children}
      </a>
    );
    }
}

export default Link;

Upvotes: 13

Aaron Beall
Aaron Beall

Reputation: 52133

I've accepted Nitzen Tomer's answer because it was the basic idea I was going for.

As a more generalized solution this is what I ended up going with:

export function rest(object: any, remove: {[key: string]: any}) {
  let rest = Object.assign({}, object);
  Object.keys(remove).forEach(key => delete rest[key]);
  return rest;
}

So I can use it like this:

const {a, b, c} = props;
const htmlProps = rest(props, {a, b, c});

And once TypeScript supports object rest/spread I can just look for all usages of rest() and simplify it to const {a, b, c, ...htmlProps} = props.

Upvotes: 2

Nitzan Tomer
Nitzan Tomer

Reputation: 164129

You probably can't avoid creating a new object with a subset of the properties of this.props, but you can do that with type safety.

For example:

interface LinkProps {
    textToDisplay: string;
}

const LinkPropsKeys: LinkProps = { textToDisplay: "" };

class Link extends React.Component<LinkProps & React.HTMLAttributes, {}> {
    public render(): JSX.Element {
        return (
            <a { ...this.getHtmlProps() }>{ this.props.textToDisplay }</a>
        );
    }

    private getHtmlProps(): React.HTMLAttributes {
        let htmlProps = {} as React.HTMLAttributes;

        for (let key in this.props) {
            if (!(LinkPropsKeys as any)[key]) {
                htmlProps[key] = this.props[key];
            }
        }

        return htmlProps;
    }
}

Using LinkPropsKeys object, which needs to match the LinkProps, will help you keep the keys between the interface and the runtime lookup synchronized.

Upvotes: 27

Related Questions