Angular CLI 里打印出来的 TypeScript 版本号是从哪里来的

在探讨 Angular CLI 中 ng version 命令如何解析 TypeScript 版本号的过程中，我们需要深入了解 Angular CLI 的工作原理以及它如何与项目依赖进行互动。Angular CLI 是一个强大的前端构建工具，它提供了一系列命令来帮助开发者初始化、开发、构建和维护 Angular 应用。ng version 命令用于显示 Angular CLI 和项目依赖的版本信息，其中就包括 TypeScript 的版本。

Angular CLI 在执行 ng version 命令时，会检查项目中的 node_modules 文件夹，以及相关的 package.json 文件。具体到 TypeScript 版本的解析，这一过程主要涉及以下几个步骤：

解析过程概览

• 读取 package.json 文件：Angular CLI 首先会在项目根目录下查找 package.json 文件。这个文件包含了项目的元数据和依赖信息，其中就定义了 TypeScript 的版本号，通常位于 devDependencies 或 dependencies 节点下。
• 查找 node_modules 目录：在获取到 TypeScript 的版本号后，CLI 会进一步验证这个版本号与实际安装在 node_modules/typescript 目录下的 TypeScript 版本是否一致。这是因为项目可能会通过 npm install 或 yarn add 命令更新依赖，而 package.json 文件中记录的版本号可能与实际安装的版本存在差异。
• 读取 TypeScript package.json 文件：为了获取精确的 TypeScript 版本信息，CLI 会读取 node_modules/typescript/package.json 文件中的 version 字段。这一步骤确保了显示给用户的 TypeScript 版本是准确无误的，反映了当前项目实际使用的版本。

示例分析

假设一个 Angular 项目的根目录下有一个 package.json 文件，其中包含了如下的依赖定义：

{
  "dependencies": {
    "@angular/core": "^12.0.0"
  },
  "devDependencies": {
    "typescript": "^4.2.3"
  }
}

在这个例子中，typescript 被定义在 devDependencies 中，版本号为 ^4.2.3。这意味着项目可以使用 TypeScript 4.2.3 及其以上版本，但不会自动升级到下一个主版本（5.x）。

当执行 ng version 命令时，Angular CLI 会根据上述解析过程，首先查找并分析这个 package.json 文件，然后进一步确认 node_modules/typescript/package.json 中记录的 version 字段。如果 node_modules 目录中实际安装的 TypeScript 版本是 4.3.5，那么 ng version 命令打印出来的 TypeScript 版本将会是 4.3.5，即使 package.json 文件中定义的是 ^4.2.3。

总结

通过以上分析，我们了解到 Angular CLI 的 ng version 命令解析 TypeScript 版本的过程是相当精确和可靠的。它不仅考虑了项目配置文件中的定义，还会检查实际安装的依赖版本，以确保开发者能够获得准确的版本信息。这一机制对于维护项目的依赖关系、确保项目的稳定性以及避免版本冲突等方面都至关重要。通过理解这一过程，开发者可以更有效地管理和维护他们的 Angular 应用及其依赖。

做个实验：

Spartacus 6.0 版本下：

TypeScript 4.9.5：

而我随便换一个文件夹，就打印不出来 TypeScript 版本：