在 Create-React-App 中使用 TypeScript(汉化)

前言

随着前端开发的不断发展，越来越多的开发者开始使用 TypeScript 来编写 React 应用。TypeScript 是一种静态类型语言，它可以帮助你避免很多常见的 JavaScript 错误。此外，TypeScript 还提供了更好的代码重构和智能提示功能，可以大大提高你的开发效率。

使用 Create-React-App 创建 React 应用

如果你还没有一个 React 应用，你可以使用 Create-React-App 来创建一个新的应用。Create-React-App 是一个官方的工具，它可以帮助你快速创建一个新的 React 应用，并包含了所有必要的依赖项。

要使用 Create-React-App，你首先需要在你的电脑上安装 Node.js 和 npm。然后，你就可以使用以下命令来创建一个新的 React 应用：

npx create-react-app my-app

安装 TypeScript 和 @types/react 包

接下来，你需要安装 TypeScript 和 @types/react 包。TypeScript 是一个静态类型语言，它可以帮助你避免很多常见的 JavaScript 错误。@types/react 是一个类型定义文件，它可以帮助 TypeScript 理解 React 的类型。

要安装 TypeScript 和 @types/react 包，你可以在你的项目目录下运行以下命令：

npm install typescript @types/react

修改代码以使用 TypeScript

现在，你就可以修改你的代码以使用 TypeScript 了。首先，你需要在你的项目目录下创建一个 tsconfig.json 文件。这个文件将告诉 TypeScript 如何编译你的代码。你可以使用以下内容来创建一个 tsconfig.json 文件：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react",
    "outDir": "build",
    "sourceMap": true,
    "strict": true
  },
  "include": [
    "src"
  ]
}

接下来，你需要修改你的代码以使用 TypeScript。你可以使用以下内容来修改你的 App.js 文件：

import React from 'react';

function App() {
  return (
    <div className="App">
      <h1>Hello, world!</h1>
    </div>
  );
}

export default App;

现在，你就可以使用 TypeScript 来编写 React 应用了。你可以使用以下命令来编译你的代码：

tsc

编译完成后，你就可以在 build 目录下找到编译后的代码。你可以使用以下命令来运行你的应用：

npm start

总结

本指南介绍了如何在 Create-React-App 中使用 TypeScript。你可以在你的 React 应用中使用 TypeScript 来提高代码质量和开发效率。