我在这里缺少验证如何添加类型验证？出现错误“元素‘children’隐含具有‘any’类型”。
import * as React from 'react';
import Button from './Styles';
const Button1 = ({ children, ...props }) => (
<Button {...props}>{children}</Button>
);
Button1.propTypes = {};
export default Button1;
是的，您缺少整个props的类型，这意味着typescript将其视为any并且您的 ts 规则不允许它。
你必须输入你的props：
import React, { FC } from "react";
interface Props {
// any props that come into the component
}
const Button1: FC<Props> = ({ children, ...props }) => (
<Button {...props}>{children}</Button>
);
您还可以将预定义类型添加到您的功能组件中，如下所示：
const Button1: React.FC<{}> = ({ children }) => (
<Button>{children}</Button>
);
通过这种方式，您不必重复自己来定义childrenprops。
更完整的版本可能是这样的：
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
这对我来说是一个主要问题，我浪费了很多时间来找出正确的解决方案。现在您的 children props有错误，但将来，您可能会在许多正在解构参数的函数中遇到此错误。所以我建议，关注这个 GitHub问题。
const yourfunc = ({destructuredProps}: {destructuredProps: type}) => {}
我发现最好扩展组件 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>
)