javascript - Lage gjenbrukbar knappkomponent med React og Typescript med ikke-tilordnbar typefeil

Jeg prøver å lage en gjenbrukbar komponent i reactjs med typescript. Jeg får for øyeblikket denne feilen:

Type '{ children: string; type: string; }' is not assignable to type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>'.
  Type '{ children: string; type: string; }' is not assignable to type 'ButtonHTMLAttributes<HTMLButtonElement>'.
    Types of property 'type' are incompatible.
      Type 'string' is not assignable to type '"button" | "submit" | "reset" | undefined'.  TS2322

     7 | 
     8 | const Button = ({ text, ...otherProps }: IProps) => (
  >  9 |   <button {...otherProps}>
       |    ^
    10 |     { text }
    11 |   </button>
    12 | );

Jeg er ganske ny på typescript, så jeg er ikke sikker på hvorfor jeg har denne feilen. Jeg tror jeg ikke tildeler de riktige typene i mitt IProps-grensesnitt i Button.tsx. Jeg er ikke sikker på hvilken type jeg skal tildele

Button.tsx

import React from 'react';

interface IProps {
  text: string,
  type: string
}

const Button = ({ text, ...otherProps }: IProps) => (
  <button {...otherProps}>
    { text }
  </button>
);

export default Button;

Hvordan det blir brukt for øyeblikket:

<Button type="submit">Sign up</Button>

Svar #1

Å bruke typen React.ComponentProps<'button'>) for Button-komponenten fungerte for meg.

Svar #2

Typescript har allerede en definisjon av typene som er tillatt i en knapp, så du må erklære en enum som samsvarer med de tilgjengelige typene:

import React from 'react';

enum ButtonTypes {
  "button",
  "submit",
  "reset",
  undefined
} 

interface IProps {
  text: string,
  type: ButtonTypes
}

const Button = ({ text, ...otherProps }: IProps) => (
  <button {...otherProps}>
    { text }
  </button>
);

export default Button;

Du kan lese mer om enums her.

Relaterte artikler