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

Posted 2023-02-22

【中文标题】如何修复绑定元素\'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 和类型应该是什么，这个问题是关于打字稿以及导致此错误的原因。

***.com/questions/40745992/…中的相关回答

【参考方案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) => 

【讨论】：

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