如何解决TS2740错误？并实现React组件在App.tsx中的引入

错误原因分析 #

TS2740错误源于两个核心问题：

• 接口与类命名冲突：你同时定义了名为Message的接口和同名类，导致TypeScript解析类型时产生混淆。
• 构造函数props类型不匹配：组件声明的props类型为自定义接口，但构造函数使用any类型，破坏了类型一致性规则。

修正后的Message组件代码 #

import React from 'react';

// 重命名props接口，避免与类名冲突
interface MessageProps {
  // 后续需要添加组件属性时，可在此定义
}

interface MyState {
  message?: string;
  userName?: string;
}

class Message extends React.Component<MessageProps, MyState> {
  // 构造函数props类型与组件声明的props类型保持一致
  constructor(props: Readonly<MessageProps>) {
    super(props);
    this.state = {
      message: 'welcome',
      userName: 'tashi'
    };
  }

  render() {
    return (
      <div>
        <h1>{this.state.message} {this.state.userName}</h1>
      </div>
    );
  }
}

export default Message;

组件添加到App.tsx的正确方式 #

你当前在App.tsx中引入并使用Message组件的写法是正确的：

import React from 'react';
import Message from "./components/Message";

function App() {
  return (
    <div className="App">
      <Message />
    </div>
  );
}

export default App;

只需确保./components/Message路径与你的实际文件目录结构匹配即可。

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