typescript

使用 create-react-app 和 typescript 构建 React 项目

在使用 React 进行项目开发时，我们经常会使用 create-react-app 来快速创建一个基础的 React 项目。而在创建项目时，我们可以通过添加 --template typescript 参数来使用 typescript 作为项目的开发语言。

typescript 是 JavaScript 的超集，它为 JavaScript 添加了静态类型检查和更强大的面向对象编程能力。使用 typescript 可以提高代码的可读性和可维护性，并减少潜在的运行时错误。

首先，我们需要确保已经安装了 Node.JS 和 npm。然后，使用以下命令全局安装 create-react-app：

npm install -g create-react-app

安装完成后，我们可以在命令行中使用 create-react-app 命令来创建一个新的 React 项目：

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

这将创建一个名为 my-app 的新项目，并使用 typescript 作为开发语言的模板。

创建完成后，我们可以进入项目目录并启动开发服务器：

cd my-app
npm start

这将在浏览器中打开一个新的标签，并显示一个默认的 React 应用程序。

在使用 create-react-app 创建 typescript 项目时，它会自动为我们生成一些 typescript 相关的配置文件和目录结构。其中，.ts 文件用于编写 typescript 代码，.tsx 文件用于编写包含 JSX 的 typescript 代码。

然而，有时我们可能不想在项目中创建 .tsx 文件，而是只使用 .ts 文件。这可以通过在 src 目录下创建一个名为 react-app-env.d.ts 的文件来实现。在 react-app-env.d.ts 文件中，我们可以添加以下内容：

tsx
/// <reference types="react-scripts" />

这将告诉 typescript 编译器，我们想要将所有的 .ts 文件视为包含 JSX 的 typescript 代码。

这样，我们就可以在项目中只使用 .ts 文件而不需要创建 .tsx 文件，从而简化项目的文件结构。

案例代码：

tsx
// App.ts
import React from 'react';
const App: React.FC = () => {
  return (
    <div>
      <h1>Hello, React with typescript!</h1>
    </div>
  );
}
export default App;

在上面的案例代码中，我们创建了一个名为 App 的函数组件，并使用

元素显示文本 "Hello, React with typescript!"。

这是一个简单的示例，但它演示了如何在 typescript 中编写 React 组件，并且不需要创建 .tsx 文件。

：

使用 create-react-app 和 typescript 可以帮助我们快速搭建一个基础的 React 项目，并在开发过程中获得更好的类型检查和编程体验。通过在项目中创建 react-app-env.d.ts 文件，我们可以只使用 .ts 文件而不需要创建 .tsx 文件，从而简化项目的文件结构。

希望这篇文章对你有所帮助！