如何修复绑定元素'children'隐式具有'any' type.ts（7031）？答案

【问题标题】：How to fix Binding element 'children' implicitly has an 'any' type.ts(7031)?如何修复绑定元素'children'隐式具有'any' type.ts（7031）？
【发布时间】：2019-08-17 15:29:08
【问题描述】：

我在这里遗漏了一些关于验证如何添加类型验证的内容？出现错误“元素‘孩子’隐含地具有‘任何’类型”。

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

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

Button1.propTypes = {};

export default Button1;

【问题讨论】：

@BoyWithSilverWings 几乎但不是真的，因为这个问题是关于 propTypes 和类型应该是什么，这个问题是关于打字稿以及导致此错误的原因。
stackoverflow.com/questions/40745992/…中的相关回答

标签： reactjs typescript

【解决方案1】：

是的，您缺少整个 Props 的类型，这意味着 typescript 将其视为 any 而您的 ts 规则不允许这样做。

你必须输入你的道具：

import React, { FC } from "react";

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

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

【讨论】：

为什么这叫 IProps 而不仅仅是 Props？（我是 TS 的新手，我不只是询问）。
@FMD 只是命名而已，我们以前在每个接口名称前都输入I，但随着时间的推移，我们不再这样做了。

【解决方案2】：

您还可以将预定义类型添加到您的功能组件中，如下所示：

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

通过这种方式，您不必重复自己来定义children 道具。

更完整的版本可能是这样的：

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>
  );
};

请注意它适用于 React 16.8

【讨论】：

从props来的函数怎么样，接口声明中可以使用哪种类型？
@JulianTorregrosa，我们可以有多种方式来做到这一点mariusschulz.com/articles/typing-functions-in-typescript

【解决方案3】：

可以通过显式定义变量的类型（在这种情况下为children）来修复此错误，而不是让它被隐式推断

可以使用 TypeScript --noImplicitAny compiler option 完全停止错误

【讨论】：

【解决方案4】：

你也可以使用类型

type ButtonProps = {
    children: ReactNode;
    
}

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

【讨论】：

【解决方案5】：

我发现最好让组件 props 接口从 React.HTMLAttributes 扩展，因为它为您提供标准 HTML 属性而无需任何额外配置：

interface Button1Props extends React.HTMLAttributes<Element> {
  // add any custom props, but don't have to specify `children`
}

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

如果你想强制提供children，你可以通过在props接口中重新定义它来使其成为必需：

interface Button1Props extends React.HTMLAttributes<Element> {
  children: React.ReactNode
  // add any custom props, but don't have to specify `children`
}

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

【讨论】：

【解决方案6】：

作为另一种方法，您可以对道具中的孩子使用内置的泛型类型“React.PropsWithChildren”，并相应地获取这些道具。一个非常短的代码如下所示：

import React from "react";
import Button from "./Styles";

type MyComponentProps = React.PropsWithChildren<{}>;

export default function MyComponent({ children, ...other}: MyComponentProps) {
  return <Button {...other}>{children}</Button>;
}

【讨论】：

这是我正在寻找的简单解决方案！很不错

【解决方案7】：

这对我来说是个大问题，我浪费了很多时间来找出正确的解决方案。现在你的 children 属性有一个错误，但在未来，你可能会在很多你正在解构参数的函数中遇到这个错误。所以我建议，关注这个 GitHub issue。

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

【讨论】：

非常感谢！你救了我的命！！