react.js怎么集成ts呢

在 React 项目中集成 TypeScript（TS）通常有以下几种方式，取决于你是新项目还是已有项目。

一、新建 React + TS 项目（推荐）

使用 Create React App

npx create-react-app my-app --template typescript

生成的项目结构里会有：

• tsconfig.json
• .tsx 文件（React + TS）

使用 Vite（更现代、更快）

npm create vite@latest my-app -- --template react-ts

二、已有 React 项目集成 TS

1. 安装依赖

npm install --save-dev typescript @types/react @types/react-dom

2. 添加 tsconfig.json

在项目根目录创建：

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "jsx": "react-jsx",
    "module": "ESNext",
    "moduleResolution": "node",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "include": ["src"]
}

3. 修改文件后缀

• .js → .ts
• .jsx → .tsx

4. 配置 Webpack / Vite（如需要）

• Vite：天然支持 TS，无需额外配置
• Webpack：需加 ts-loader 或 babel-loader

三、React + TS 常见写法示例

函数组件 + Props 类型

type Props = {
  name: string;
  age?: number;
};

const User: React.FC<Props> = ({ name, age }) => {
  return <div>{name} {age}</div>;
};

useState 类型推断

const [count, setCount] = useState<number>(0);

事件类型

const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
  e.preventDefault();
};

四、常见问题

✅ 一定要用 React.FC 吗？
不是，普通函数 + 类型更灵活：

function User({ name }: Props) {
  return <div>{name}</div>;
}

✅ strict 模式太严格？
可在 tsconfig.json 中关闭部分规则。

如果你愿意，可以告诉我：

• 用的是 CRA / Vite / Webpack
• 是 新项目还是老项目

我可以给你更具体的配置方案。