如何添加 TypeScript 到 Create React App

如果您已经使用 Create React App 来创建React应用程序，那么您可能想将TypeScript引入您的代码中。本文将向您展示如何在Create React App中添加TypeScript。

步骤

1. 创建新项目

为了开始，您需要使用Create React App创建React项目。您可以通过在终端（命令行）上输入以下命令来创建新的React应用程序：

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

为了在创建过程中使用TypeScript，我们使用了 --template typescript 标志。

2. 文件重命名

现在，在您的项目文件中，您将看到许多.tsx文件以及一些.js文件。由于我们正在添加TypeScript，让我们将这些.js文件重命名为.tsx。TypeScript需要指定文件类型的扩展名，而React需要指定JSX代码的扩展名。

3. 修改文件

在项目文件中，将一些JavaScript代码转换为TypeScript代码。在TypeScript中，我们需要声明变量类型。对于React组件，我们需要声明组件的props参数和状态。一个基础组件可能看起来像这样：

import React, { useState } from 'react';

type CounterProps = {
  initialCount: number;
};

const Counter = (props: CounterProps) => {
  const [count, setCount] = useState<number>(props.initialCount);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default Counter;

上面的示例显示了一个有状态的组件，其中 Count 值以及一个 Increment 按钮被渲染。通过给组件传入属性 initialCount 来初始化计数器。注意在状态的声明中，我们也声明了计数的类型。

结论

通过这个简单的步骤，您现在可以将TypeScript添加到Create React App中。还有很多其他功能可以使用TypeScript提供，例如类型检查和允许您编写更具可读性的代码。现在是时候通过学习TypeScript的高级功能来提高React应用程式的质量和安全性了。