Question

我在这里缺少有关验证的内容，如何添加类型验证？出现错误“元素“子代”隐式具有“任意”类型”。

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

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

Button1.propTypes = {};

export default Button1;

Answer 1

是的，您整体上缺少道具的类型，这意味着打字稿将其视为any，而您的ts规则不允许。

您必须将道具输入为：

interface IProps {
    children: ReactNode;
    // any other props that come into the component
}

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

Answer 2

这对我来说是一个主要问题，我浪费了很多时间来找出正确的解决方案。现在您的 children 道具有错误，但将来，您可能会在许多正在解构参数的函数中遇到此错误。所以我建议，关注这个 GitHub documentation。

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

Answer 3

您还可以像这样将预定义类型添加到功能组件中：

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

请注意，它适用于反应16.8

Answer 4

可以通过显式定义变量的类型（在这种情况下为children，而不是隐式地推断出该错误来解决此错误

可以使用TypeScript --noImplicitAny compiler option

完全停止错误。

Answer 5

您也可以使用类型

type ButtonProps = {
    children: ReactNode;
    
}

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

Answer 6

我觉得最好将组件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>
)

Answer 7

作为另一种方法，您可以对 props 中的 child 使用内置的泛型类型“React.PropsWithChildren”，相应地使用这些 props。一个很短的代码看起来像这样：

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

type MyComponentProps = React.PropsWithChildren<{}>;

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

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

7 个答案: