React/TypeScript项目编译报错TS7006如何解决？

这个报错是因为TypeScript要求所有组件的props必须显式声明类型，你的ErrorBoundary组件的props参数没有指定类型，被TS推断为隐式any类型，触发了TS7006规则。以下是两种解决方式，推荐第一种：

方式一：显式声明props类型（推荐） #

在ErrorBoundary.tsx中给组件的props定义类型：

1. 首先导入所需的React类型：

import React, { Component, ReactNode, ErrorInfo } from 'react';

2. 定义ErrorBoundary的props接口（如果有自定义props可以补充）：

// 定义props类型，至少包含children
interface ErrorBoundaryProps {
  children: ReactNode;
  // 若有其他自定义props，比如fallback UI的配置，可在此添加
}

// 同时定义组件的state类型（可选，但更规范）
interface ErrorBoundaryState {
  hasError: boolean;
}

3. 给Component类指定泛型参数，绑定props和state类型：

class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
  constructor(props: ErrorBoundaryProps) {
    super(props);
    this.state = { hasError: false };
  }

  // 后续的componentDidCatch等生命周期方法保持不变
  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    this.setState({ hasError: true });
    console.error("Error caught by boundary:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

export default ErrorBoundary;

方式二：临时关闭隐式any检查（不推荐） #

如果只是临时调试，可以修改项目根目录的tsconfig.json，将noImplicitAny设置为false：

{
  "compilerOptions": {
    // ...其他配置
    "noImplicitAny": false
  }
}

这种方法会关闭TS对隐式any的检查，虽然能快速消除报错，但会失去TypeScript的类型安全优势，不建议长期使用。

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