web-dev-qa-db-fra.com

Type d'événement de réaction dans le texte

Je ne peux pas créer mon application React/TypeScript lorsque j'utilise le type MouseEvent dans mon gestionnaire d'événements:

private ButtonClickHandler(event: MouseEvent): void
{
    ...
}

Je reçois:

error TS2322: Type '{ onClick: (event: MouseEvent) => void; children: string; }' is not assignable to type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>'.
  Type '{ onClick: (event: MouseEvent) => void; children: string; }' is not assignable to type 'ButtonHTMLAttributes<HTMLButtonElement>'.
    Types of property 'onClick' are incompatible.
      Type '(event: MouseEvent) => void' is not assignable to type 'EventHandler<MouseEvent<HTMLButtonElement>>'.
        Types of parameters 'event' and 'event' are incompatible.
          Type 'MouseEvent<HTMLButtonElement>' is not assignable to type 'MouseEvent'.
            Property 'fromElement' is missing in type 'MouseEvent<HTMLButtonElement>'.`

J'ai aussi essayé MouseEvent<HTMLButtonElement> mais ensuite j'ai eu error TS2315: Type 'MouseEvent' is not generic..

Pourquoi?

Extrait de mon package.json:

 "devDependencies": {
    "@types/react": "^16.0.7",
    "@types/react-dom": "^15.5.5",
    "ts-loader": "^2.3.7",
    "TypeScript": "^2.5.3",
    "webpack": "^3.6.0"
  },
  "dependencies": {
    "react": "^16.0.0",
    "react-dom": "^16.0.0"
  }

Edit # 1:

Liaison dans render():

<button onClick={ this.ButtonClickHandler }>Toggle</button>

en constructor:

this.ButtonClickHandler = this.ButtonClickHandler.bind(this);
reactjstypescript
7
tBlabs

Je pense que ce qui se passe ici est qu’il existe deux types distincts disponibles: MouseEvent de jsx/lib/js/js/web.jsx (qui n’a pas de paramètres de type) et React.MouseEvent<T> de @ types/react/index.d.ts a un paramètre de type, T, le type de l’élément dont il provient). TypeScript utilise typage structurel , donc, même s'il s'agit de types distincts, ils sont {peuvent compatibles. Mais pour être compatible avec le gestionnaire onClick, vous devez utiliser la version de React, avec un type approprié pour T (HTMLElement fonctionnera ou vous pouvez être plus précis si vous savez à quel élément vous attachez ce gestionnaire).

Donc, event: MouseEvent échoue car onClick requiert la version spécialisée du type d'événement. event: MouseEvent<HTMLElement> échoue car il fait référence au mauvais type MouseEvent, celui sans paramètre de type. React.MouseEvent<HTMLElement> fonctionne parce que vous obtenez le bon type, lui donnez le paramètre dont il a besoin et le type obtenu est compatible avec le gestionnaire onClick.

13
wiml

Vous n'y croirez pas: il suffisait de déplacer l'assignation du constructeur pour rendre la fonction:

render()
{
return (
<button onClick={ this.Button_Click.bind(this) }>Toggle</button>
)}

Alors, MouseEvent devient disponible:

private Button_Click(event: MouseEvent): void

Pourquoi cela se passe?

2
tBlabs