[Advanced] The **Intersection Types** section of README.md is not work with latest React and TypeScript

[buuug7]

The Intersection Types section of README.md is not work with latest React and TypeScript.

The document show below:

// Adding two types together can be handy, for example when your component is supposed to mirror the props of a native component like a button:

export interface Props {
  label: string;
}
export const PrimaryButton = (
  props: Props & React.HTMLProps<HTMLButtonElement> // adding my Props together with the @types/react button provided props
) => <Button {...props} />;

my Button component:

function Button(props: React.HTMLProps<HTMLButtonElement>) {
  return <button {...props}>{props.children}</button>;
}

the error is :

    Types of property 'type' are incompatible.
      Type 'string | undefined' is not assignable to type '"button" | "submit" | "reset" | undefined'.
        Type 'string' is not assignable to type '"button" | "submit" | "reset" | undefined'.  TS2322

     7 |
     8 | function Button(props: React.HTMLProps<HTMLButtonElement>) {
  >  9 |   return <button {...props}>{props.children}</button>;
       |           ^
    10 | }
    11 |
    12 | export default Button;

when i change the props type to below, it work well

type MyButtonPropsType = React.DetailedHTMLProps<
  React.ButtonHTMLAttributes<HTMLButtonElement>,
  HTMLButtonElement
>;

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions!

[swyx.io]

hey @buuug7, this should work:

import React from 'react'

function Button(props: React.ButtonHTMLAttributes<HTMLButtonElement>) {
  return <button {...props}>{props.children}</button>;
}

export interface Props {
  label: string;
}
export const PrimaryButton = (
  props: Props & React.ButtonHTMLAttributes<HTMLButtonElement> // adding my Props together with the @types/react button provided props
) => <Button {...props} />;

hope that helps and thanks for raising the issue!

[buuug7]

@sw-yx Thanks a lot.