Angular 应用 tsconfig.json 文件里的 typeRoots 属性讲解

在 Angular 应用中，tsconfig.json 文件是 TypeScript 编译器的配置文件，用于配置 TypeScript 编译器的编译选项。其中，“typeRoots”: [“node_modules/@types”] 是一个编译选项，用于告诉 TypeScript 编译器在哪里查找类型声明文件。

具体来说，“typeRoots” 是一个字符串数组，它指定了一组路径，这些路径是 TypeScript 编译器用来查找类型声明文件的根目录。在这个示例中，“node_modules/@types” 表示查找 node_modules 目录下的 @types 子目录，这个子目录下包含了许多第三方库的类型声明文件，例如 @types/node 包含了 Node.js 的类型声明文件，@types/jasmine 包含了 Jasmine 测试框架的类型声明文件等等。

通过配置 “typeRoots”: [“node_modules/@types”]，TypeScript 编译器会自动在指定的目录下查找所需的类型声明文件，从而使得我们在 TypeScript 代码中可以正确地引用第三方库的类型，例如在 Angular 应用中引用 RxJS、Jasmine 等第三方库的类型声明文件。

在 Angular 应用中，tsconfig.json 文件的 “target” 属性指定了 TypeScript 编译器所要编译的 ECMAScript 目标版本。

“target”: “es2020” 表示编译器会将 TypeScript 代码编译为 ECMAScript 2020（即 ECMAScript 11）代码。这意味着编译器将会把 TypeScript 中的新特性和语法转换成 ECMAScript 2020 中的对应特性和语法。

设置 “target”: “es2020” 可以让你在 Angular 应用中使用 ECMAScript 2020 中新增的特性，比如可选链（optional chaining）和空值合并（nullish coalescing）。同时，这也意味着你的代码只能在支持 ECMAScript 2020 的浏览器或环境中运行，如果在不支持 ECMAScript 2020 的环境中运行，就会出现语法错误或运行错误。

需要注意的是，如果你的应用需要在旧版浏览器中运行，你可能需要将 “target” 属性设置为 “es5” 或 “es2015”。这样可以确保你的代码可以在大多数浏览器中运行，但你可能会失去一些 ECMAScript 2020 中的新特性。