如何使用 React + TypeScript 启动一个项目

如果你和我一样，肯定也听说过不少关于 TypeScript 的事。我的意思是，现在我感觉每天都能看到一篇关于它的文章。我一直没尝试它，原因很简单，我不想在我的工作流程中再增加一层抽象。

和你一样，我也有很多问题想要得到解答，然后再决定是否要学习 TypeScript，以及是否会因此而烦扰我的团队，直到他们也都开始编写 TypeScript 代码。

我希望在本系列文章中解答的问题

1. 什么是静态类型？
2. 使用 TypeScript 的优点和缺点是什么？
3. 启动和运行有多难？
4. TypeScript 如何帮助我成为更优秀的程序员？
5. 它能与 React 良好兼容吗？
6. 我可以去掉属性类型吗？

创建 React 应用

对于新项目

使用create-react-app构建 React 项目时，很容易就能开始使用 TypeScript 。这是我计划用来熟悉 TypeScript 的第一条途径。

你只需要运行：
npx create-react-app app-name --template typescript
或者
yarn create-react-app app-name --template typescript

yarn create react-app app-name --template typescript

进入项目文件夹，并确保已将以下软件包添加为依赖项：

• TypeScript
• @types/node
• @types/react
• @types/react-dom
• @types/jest

您还需要将.jssrc 文件夹中的所有文件重命名为.tsx. 这可以让您的编辑器知道您将使用 TypeScript 语法。

注意：最新版本的 create-react-app 似乎已经为您设置好了这一切，所以您可能无需进行任何更改！

对于现有项目

将 TypeScript 添加到现有的 React 项目中比创建一个新项目还要容易。只需将以下依赖项添加到您的项目中即可：

• TypeScript
• @types/node
• @types/react
• @types/react-dom
• @types/jest

然后将src 文件夹中的所有.js和文件更改为。完成这些步骤后，您可以运行或，react-scripts 将检测到您正在使用 TypeScript 并为您创建一个文件。.jsx.tsxnpm startyarn starttsconfig.json

好了，现在你可以将 TypeScript 与 React 结合使用了！

注意：此方法仅适用于 react-scripts v2.1.0 及更高版本。本教程不涵盖非使用 create-react-app 构建的项目。

配置

如果您想为 TypeScript 创建自己的配置，可以运行命令tsc --init生成一个 tsconfig.json 文件，其中列出了所有可能的配置选项以及选项的注释。（非常实用！）。否则，您可以首次运行yarn start` react-scripts /` 并应用上述更改，react-scripts 将识别这些更改并在根目录中创建一个文件。您的配置应该如下所示：npm starttsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}

配置非常简单。target -
指定代码将编译成哪个 JavaScript 版本。include
-编译指定文件/目录中的代码。allowJs -
允许编译 JavaScript 文件。jsx
-告知编译器我们将使用 jsx。

您可以在这里查看 tsconfig.json 文件的所有设置。默认设置通常足以满足需求，但您可以根据自己的喜好进行调整。此外，还有一个非常方便的Playground，您可以在其中尝试不同的配置设置，并立即查看代码的编译结果。

开始编码

现在你的项目已经使用了 TypeScript，你可以在 src 目录下的任何位置使用它！根据你的配置方式，你的项目应该无需任何 TypeScript 特有的语法就能成功运行。

本系列的第二部分将讨论 TypeScript 语法和最佳实践，我们将以此为基础构建一本魔法书。

延伸阅读

如果你想了解更多关于 TypeScript 的知识，可以看看这些很棒的资源。我在撰写这些文章时，也参考了这些资源进行个人研究。

• TypeScript
• 使用 TypeScript 创建 React 应用
• TypeScript/React 最佳实践

最后说明：这是我的第一篇文章/教程，所以请在评论区留下建设性的反馈意见。我知道我的写作水平和代码讲解方式还有很大的提升空间。非常感谢您的阅读！