如何在TypeScript React项目中使用纯JavaScript React组件

1. 调整TypeScript配置 #

首先修改项目根目录下的tsconfig.json，确保允许JS文件被编译和导入：

{
  "compilerOptions": {
    "allowJs": true, // 允许TypeScript编译JavaScript文件
    "checkJs": false, // 关闭对JavaScript文件的类型检查（避免TS干涉JS代码逻辑）
    // 其他原有配置保持不变...
  }
}

修改后重启开发服务器，让配置生效。

2. 创建纯JavaScript/JSX组件 #

直接在项目中新建.js或.jsx后缀的文件，编写标准React组件即可。比如创建UserCard.jsx：

import React from 'react';

export default function UserCard(props) {
  return (
    <div className="user-card">
      <h3>{props.username}</h3>
      <p>邮箱：{props.email}</p>
    </div>
  );
}

3. 在TypeScript组件中导入并使用JS组件 #

在现有的.tsx组件里，像导入TS组件一样直接导入JS组件，TypeScript会自动识别：

import React from 'react';
import UserCard from './UserCard';

function UserList() {
  const users = [
    { username: '张三', email: 'zhangsan@example.com' },
    { username: '李四', email: 'lisi@example.com' }
  ];

  return (
    <div className="user-list">
      {users.map(user => (
        <UserCard key={user.username} {...user} />
      ))}
    </div>
  );
}

export default UserList;

4. （可选）给JS组件添加类型提示（JSDoc） #

如果想避免传参错误，让编辑器提供props提示，可以给JS组件加JSDoc注释：

import React from 'react';

/**
 * 用户卡片组件
 * @param {object} props - 组件属性
 * @param {string} props.username - 用户名
 * @param {string} props.email - 用户邮箱
 */
export default function UserCard(props) {
  return (
    <div className="user-card">
      <h3>{props.username}</h3>
      <p>邮箱：{props.email}</p>
    </div>
  );
}

5. 现有TypeScript组件转JavaScript的步骤 #

待新功能完成后，把原TS组件转为JS只需两步：

• 将文件后缀从.tsx改为.jsx（或.ts改为.js）
• 删除所有TypeScript特有的类型代码：比如interface、type定义，函数参数/返回值的类型标注等

示例：
原TS组件：

interface ButtonProps {
  text: string;
  onClick: () => void;
}

export default function PrimaryButton({ text, onClick }: ButtonProps) {
  return (
    <button className="primary-btn" onClick={onClick}>
      {text}
    </button>
  );
}

转为JS组件后：

import React from 'react';

export default function PrimaryButton({ text, onClick }) {
  return (
    <button className="primary-btn" onClick={onClick}>
      {text}
    </button>
  );
}

内容的提问来源于stack exchange，提问作者dark-kun