在React JS中如何将TypeScript代码转换为JavaScript代码

• 移除所有类型相关代码：包括interface、type类型定义，变量、函数参数、返回值后绑定的类型注解（如: string、: Array<Row>这类标记全部删除）
• 将文件后缀从.ts/.tsx修改为.js/.jsx
• 删除React组件的泛型声明，比如<Props, State>这类泛型标识直接去除即可

import React, { useState } from "react";
import {
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Paper,
  TextField
} from "@mui/material";

// 模拟表格数据
const rows = [
  { id: 1, name: "John Doe", email: "john@example.com", role: "Admin" },
  { id: 2, name: "Jane Smith", email: "jane@example.com", role: "Editor" },
  { id: 3, name: "Bob Brown", email: "bob@example.com", role: "Viewer" },
  { id: 4, name: "Alice Davis", email: "alice@example.com", role: "Admin" }
];

export default function SearchTable() {
  const [searchTerm, setSearchTerm] = useState("");

  // 表格筛选逻辑
  const filteredRows = rows.filter((row) => {
    return Object.values(row).some((value) =>
      value.toString().toLowerCase().includes(searchTerm.toLowerCase())
    );
  });

  return (
    <Paper sx={{ width: "100%", overflow: "hidden", padding: 2 }}>
      <TextField
        label="搜索表格内容"
        variant="outlined"
        fullWidth
        margin="normal"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />
      <TableContainer sx={{ maxHeight: 440 }}>
        <Table stickyHeader aria-label="sticky table">
          <TableHead>
            <TableRow>
              <TableCell>ID</TableCell>
              <TableCell>姓名</TableCell>
              <TableCell>邮箱</TableCell>
              <TableCell>角色</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {filteredRows.map((row) => (
              <TableRow hover role="checkbox" tabIndex={-1} key={row.id}>
                <TableCell>{row.id}</TableCell>
                <TableCell>{row.name}</TableCell>
                <TableCell>{row.email}</TableCell>
                <TableCell>{row.role}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    </Paper>
  );
}

• 若原TS代码使用了类型断言（如as string语法），直接删掉断言部分即可
• 原代码中的enum定义可以直接替换为对应的常量值，或者转成普通JS对象使用
• 项目中的tsconfig.json配置文件可直接删除，替换为普通React JS项目的配置即可

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