在 React/Next.js 应用程序中安装 Typescript 的正确方法

Question

我有一个 Next.js 应用程序，想要部署到 AWS Elastic Beanstalk。该应用程序使用 Typescript。

我想知道 Typescript 是否需要安装在依赖项或

devDependencies

部分中，因为在谷歌搜索了很多之后我发现了相互冲突的信息。这些是我在开发中的软件包：

"devDependencies": {
    "jest": "^29.3.1",
    "sass": "^1.57.1",
    "typescript": "4.9.4",
    "@types/node": "18.11.17",
    "@types/react": "18.0.26",
    "@types/react-dom": "18.0.9",
    "eslint": "8.30.0",
    "eslint-config-next": "^12.0.4"
  }

将这些包裹保留在“

devDependencies

”中是否正确？我还有一些我不确定的其他软件包，例如：

"@fortawesome/fontawesome-svg-core": "^6.2.1",
"@fortawesome/free-solid-svg-icons": "^6.2.1",
"@fortawesome/react-fontawesome": "^0.2.0",
"bootstrap": "^5.2.3",

有人可以给个提示吗？当然，我想部署应用程序的构建版本。

Answer 1

dependencies

是您的应用程序运行所需的软件包。

devDependencies

是在生产中无用但用于开发的软件包。

因此，为了保留您的示例，Typescript、ESlint、Jest 是 devDependency；在您为生产构建应用程序后，它们不会被您的应用程序调用。

反之Bootstrap、FontAwsome等都是依赖项；它们在生产中被您的应用程序消耗。

Answer 2

您可以简单地将

dependencies

等同于

something necessary during running

，并且

devDependencies

等同于

something necessary during developing

。

根据typescript官网：

TypeScript 代码转换为 JavaScript

这意味着：除非您正在使用基于 Typescript 功能（例如 ts-compiler 等）构建的项目，否则您应该始终将 TypeScript 安装为

devDependencies

，就像 Typescript 官方网站推荐的那样。

我用一个功能来判断库是

dependencies

还是

devDependencies

：可能的运行时代码。

例如：您提到的引导程序包括

styles

components

utilities

以及其他几个部分。当我们使用像

validate forms

这样的引导能力时，一定会有一些运行时代码。

但是，最安全的方法是遵循官方网站指导:)

Answer 3

对于开始新项目的人，您可以使用

npx create-next-app

在安装说明中选择 Typescript。

这是有关 Next.js 13.4 安装的视频。