Comment corriger l'élément Binding 'children' qui a implicitement un type 'any'.ts(7031) ?

Question

Il me manque quelque chose ici avec la validation : comment ajouter la validation des types ? J'ai une erreur "l'élément 'children' a implicitement un type 'any'".

import * as React from 'react';
import Button from './Styles';

const Button1 = ({ children, ...props }) => (
  <Button {...props}>{children}</Button>
);

Button1.propTypes = {};

export default Button1;

Answer 1

Oui, il vous manque un type pour Props as whole, ce qui signifie que typescript le voit comme any et vos règles de sécurité ne le permettent pas.

Vous devez taper vos accessoires comme :

import React, { FC } from "react";

interface Props {
    // any props that come into the component
}

const Button1: FC<Props> = ({ children, ...props }) => (
    <Button {...props}>{children}</Button>
);

Answer 2

Vous pouvez également ajouter le type prédéfini à vos composants fonctionnels comme ceci :

const Button1: React.FC<{}>  = ({ children }) => (
    <Button>{children}</Button>
);

De cette façon, vous n'avez pas à vous répéter pour définir children accessoires.

La version plus complète pourrait être la suivante :

interface Props {
// any other props that come into the component, you don't have to explicitly define children.
}

const Button: React.FC<Props> = ({ children, ...props }) => {
  return (
      <Button {...props}>{children}</Button>
  );
};

Veuillez noter qu'il fonctionne pour React 16.8

Answer 3

C'était un problème majeur pour moi et j'ai perdu beaucoup de temps à trouver la bonne solution. Pour l'instant, vous avez une erreur avec la prop children mais à l'avenir, vous pourriez avoir cette erreur pour beaucoup de fonctions où vous déstructurez les params. Je vous suggère donc de suivre ce GitHub numéro .

const yourfunc = ({destructuredProps}: {destructuredProps: type}) => {}

Answer 4

Vous pouvez également utiliser des types

type ButtonProps = {
    children: ReactNode;

}

const Button = ({ children }: ButtonProps) => (
    <button>{children}</button>
);

Answer 5

Cette erreur peut être corrigée en définissant explicitement le type de la variable ( children dans ce cas) et ne pas le laisser être déduit implicitement

L'erreur peut être stoppée complètement avec TypeScript --noImplicitAny option de compilation