TypeScript-Babel-Starter 进阶：如何快速集成 React 和 JSX 支持

【免费下载链接】TypeScript-Babel-Starter A sample setup using Babel CLI to build TypeScript code, and using TypeScript for type-checking. 项目地址: https://gitcode.com/gh_mirrors/ty/TypeScript-Babel-Starter

TypeScript-Babel-Starter 是一个使用 Babel CLI 构建 TypeScript 代码并利用 TypeScript 进行类型检查的示例项目。本指南将教你如何为这个项目添加 React 和 JSX 支持，让你能够使用 TypeScript 开发 React 应用，享受类型安全带来的开发便利。

为什么需要集成 React 和 JSX 支持？

在现代前端开发中，React 已成为构建用户界面的主流库之一，而 JSX 则是 React 推荐的语法扩展，它允许开发者在 JavaScript 中编写类似 HTML 的代码。TypeScript-Babel-Starter 本身主要处理 TypeScript 到 JavaScript 的转换，但默认不包含 React 和 JSX 的支持。通过集成这些支持，你可以充分利用 TypeScript 的类型系统来增强 React 应用的健壮性和可维护性。

集成 React 和 JSX 支持的步骤

1. 安装必要的依赖

首先，你需要安装 React、React DOM 以及相关的 Babel 和 TypeScript 类型定义。打开终端，在项目根目录下运行以下命令：

npm install react react-dom
npm install --save-dev @types/react @types/react-dom @babel/preset-react

这些依赖中，react 和 react-dom 是 React 应用的核心库，@types/react 和 @types/react-dom 提供了 React 的 TypeScript 类型定义，@babel/preset-react 则是 Babel 用于处理 JSX 语法的预设。

2. 配置 Babel 以支持 JSX

Babel 是项目中用于代码转换的工具，要让它能够处理 JSX，需要修改 Babel 的配置。虽然项目中没有显式的 .babelrc 文件，但 Babel 可以从 package.json 中的 babel 字段读取配置。不过，从现有的 package.json 内容来看，可能需要创建或修改 Babel 配置文件。

你可以在项目根目录下创建一个 babel.config.json 文件，并添加以下内容：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-typescript",
    ["@babel/preset-react", { "runtime": "automatic" }]
  ],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

这里添加了 @babel/preset-react 预设，并设置 runtime: "automatic"，这是 React 17 及以上版本推荐的配置，可以自动导入 React，无需在每个 JSX 文件中手动引入 React。

3. 配置 TypeScript 以识别 JSX

TypeScript 需要知道如何处理 JSX 文件，这可以通过修改 tsconfig.json 文件来实现。打开 tsconfig.json，找到 compilerOptions 中的 jsx 选项，将其从注释状态修改为 "react-jsx"：

{
  "compilerOptions": {
    // 其他选项...
    "jsx": "react-jsx",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
    // 其他选项...
  }
}

"react-jsx" 选项是 TypeScript 4.1 及以上版本支持的，它对应 React 17+ 的新 JSX 转换，与 Babel 配置中的 runtime: "automatic" 相匹配。

4. 修改构建脚本

为了让 Babel 能够处理 .tsx 文件，需要修改 package.json 中的构建脚本。找到 scripts 中的 build:js 命令，确保其包含 .tsx 扩展名：

{
  "scripts": {
    "build:js": "babel src --out-dir lib --extensions \".ts,.tsx\" --source-maps inline",
    // 其他脚本...
  }
}

这样，当你运行 npm run build:js 时，Babel 会同时处理 .ts 和 .tsx 文件。

5. 创建一个 React 组件示例

现在，你可以创建一个简单的 React 组件来测试配置是否生效。在 src 目录下创建一个 App.tsx 文件，内容如下：

import React from 'react';

interface AppProps {
  name: string;
}

const App: React.FC<AppProps> = ({ name }) => {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>这是一个使用 TypeScript 和 React 的示例组件。</p>
    </div>
  );
};

export default App;

然后，修改 src/index.ts 文件，导入并使用这个组件：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root')!);
root.render(
  <React.StrictMode>
    <App name="TypeScript-Babel-Starter" />
  </React.StrictMode>
);

6. 运行构建并测试

运行以下命令来构建项目：

npm run build:js

构建完成后，你可以在 lib 目录下看到转换后的 JavaScript 文件。如果需要在浏览器中查看效果，你可能还需要创建一个 HTML 文件来引入构建后的代码，但这超出了本项目的基础配置范围。

总结

通过以上步骤，你已经成功为 TypeScript-Babel-Starter 项目集成了 React 和 JSX 支持。现在，你可以使用 TypeScript 开发 React 应用，利用 TypeScript 的类型检查功能减少错误，提高代码质量。这个配置过程涉及安装依赖、配置 Babel 和 TypeScript，以及修改构建脚本，每一步都至关重要，确保了项目能够正确处理 React 和 JSX 代码。

希望本指南能够帮助你顺利扩展 TypeScript-Babel-Starter 的功能，开启你的 TypeScript + React 开发之旅！

【免费下载链接】TypeScript-Babel-Starter A sample setup using Babel CLI to build TypeScript code, and using TypeScript for type-checking. 项目地址: https://gitcode.com/gh_mirrors/ty/TypeScript-Babel-Starter