React+TypeScript中Binding element 'ReactNode'隐式any类型错误排查

你不需要安装额外的库，当前依赖已经齐全，错误是组件的类型标注写法有误导致的。

错误原因 #

你写的const MyButton = ({ children: ReactNode }) => {是把props里的children属性重命名为ReactNode，而非给children指定类型。TypeScript无法推断这个重命名后变量的类型，因此抛出“隐式any类型”的错误。

正确写法示例 #

以下是几种可行的类型标注方式：

方式1：定义Props接口（推荐，可读性高）

import React, { ReactNode } from "react";

interface MyButtonProps {
  children: ReactNode;
}

const MyButton = ({ children }: MyButtonProps) => {
  return <div>{children}</div>;
};

export default MyButton;

方式2：直接在解构时指定类型

import React, { ReactNode } from "react";

const MyButton = ({ children }: { children: ReactNode }) => {
  return <div>{children}</div>;
};

export default MyButton;

方式3：使用React.FC类型（自动包含children）

import React from "react";

const MyButton: React.FC = ({ children }) => {
  return <div>{children}</div>;
};

export default MyButton;

内容的提问来源于stack exchange，提问作者Bersan