本文通过对VUE源码中的 tsconfig.json 文件中的每个属性做具体解释，使读者对罕用的配置信息做进一步的理解，心愿对看到此篇文章的读者有所帮忙。
{ "compilerOptions": { /* * 用于拓宽引入非绝对模块时的查找门路的。其默认值就是"./" * 目标是解决我的项目代码层级较深相互之间援用起来会比拟麻烦的问题，各种 …/,…/…/,…/…/…/ 等等 * "paths": { * "@vue": ["packages/vue/src"] * } */ "baseUrl": ".", /* 指定输入目录 */ "outDir": "dist", /* * 是否生成指标文件的sourceMap文件 * 此文件容许调试器和其余工具在理论应用收回的JavaScript文件时显示原始的TypeScript源代码。 * 此文件为 .js.map (or .jsx.map) 格局，位于相应的.js 输入文件雷同目录 */ "sourceMap": false, /* * 定义了编译后的指标 javascript 版本, 可抉择包含es6、es5、esnext * 如果须要思考兼容性问题就能够设置为es5或更低的版本，一般来说，咱们须要让他编译为 es5，这样就能够被支流浏览器解读了。 * 当然，你说我的 react 代码不是给浏览器看的，比如说，你应用的是 react-native 做作手机 app，那么这里的选项能够抉择 es6。 * 如果代码是在高版本的古代浏览器或高版本的node端，就能够设置为esnext */ "target": "esnext", /* * 通知编译器对收回的.js文件中的模块应用什么语法。可抉择 none、commonjs、amd、system、umd、es2015或esnext * 通知编译器以哪种语法编写代码，意味着必须从哪个代码将其编译为commonjs。 * 如果用于服务器端我的项目 如果应用的是Angular前端应用程序，则应用Node.js，而后可能应用CJS 可能不是ESM * 较新的JS版本有时蕴含用于模块导入/导出的更多功能。 将export设置为"module"能够反对这些性能，而这些性能通常尚未增加到官网标准中。例如dynamic import的"ESNext"表达式。 * 无论如何，编译器的目标是将代码编译成浏览器可了解的语法（commonjs） * module影响收回代码的模块语法，而target影响其余代码 */ "module": "esnext", /* * 模块解析策略，ts默认用node的解析策略，即绝对的形式导入, 可选值：node、classic * 如果未指定，则 --module commonjs 默认为 node，否则默认为 classic（包含 --module 设置为 amd、system、umd、es2015、esnext 等） * Node 模块解析是 TypeScript 社区中最罕用的，举荐用于大多数我的项目。 * 如果您在 TypeScript 中遇到导入和导出的解析问题，请尝试设置 moduleResolution: “node” 以查看它是否解决了问题。 */ "moduleResolution": "node", /* * 容许在 TS 我的项目中导入JavaScript文件，而不是仅导入.ts和.tsx文件。即容许ts和tsx文件与现有JavaScript文件共存 * 例如js文件 @filename: card.js: export const defaultCardDeck = "Heart"; * ts文件 @filename: index.ts 中引入下面的js变量：import { defaultCardDeck } from "./card"; * 如果 allowJs 设置为 false, 将会抛出谬误。 */ "allowJs": false, /* * 开启所有严格的类型查看 * true => 同时开启 alwaysStrict, noImplicitAny, noImplicitThis 和 strictNullChecks * alwaysStrict：严格模式，为每个文件增加 "use strict" * noImplicitAny：不容许隐式 any，如果true，函数的形参必须带类型，如果叫不出class名的js对象，那就得any。比方(d:any)=>{}；如果false, 则容许隐式any,函数的样子更像js (d)=>{} * noImplicitThis：不容许 this 为隐式 any * strictNullChecks：undefined 和 null 两个空类型的设计，应用上不不便，所以 通过strictNullChecks严格校验类型，让代码更平安 */ "strict": true, /* 查看只申明、未应用的局部变量(只提醒不报错) */ "noUnusedLocals": true, /** * 是否启用实验性的装璜器个性,装璜器的语法是ES7的实验性语法, 不关上可能会呈现如下谬误： * Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning. */ "experimentalDecorators": true, /** * 避免 ts文件中引入json文件，会报如下红色波浪线。 * TypeScript 2.9的resolveJsonModule性能，只有我应用ts-node执行应用程序，该性能就能够失常工作 */ "resolveJsonModule": true, /* 作用是反对应用import d from 'cjs'的形式引入commonjs包 */ "esModuleInterop": true, /* 用于指定是否将编译后的文件正文删掉，设为true的话即删除正文，默认为false */ "removeComments": false, /** * 指定jsx代码用于的开发环境: 'preserve', 'react-native', or 'react' * preserve:生成代码中会保留JSX以供后续的转换操作应用(比方：Babel).另外,输入文件会带有.jsx扩展名。 * react:会生成React.createElement,在应用前不须要再进行转换操作了,输入文件的扩大名为.js。 * react-native:相当于preserve,它也保留了所有的JSX,然而输入文件的扩展名是.js */ "jsx": "preserve", /* * 编译过程中须要引入的库文件的列表，通知 typescript 编译器能够应用哪些性能。 * 比如说，咱们这里有一个 dom 的库文件，这个文件会通知编译器 dom api 的接口，所以当咱们在 ts 代码中应用 dom 的时候，比如说执行 “document.getElementById ("root")” 这句话的时候，编译器就会晓得该如何进行查看。 * 如果咱们不设置这个选项，那么编译器也有本人默认的库文件列表，一般来说是 ["dom", "es6","DOM.Iterable"] 等等 */ "lib": ["esnext", "dom"], /* 用于指定须要蕴含的模块，只有在这里列出的模块的申明文件才会被加载 */ "types": ["jest", "puppeteer", "node"], /** * 用来指定编译文件的根目录，编译器会在根目录查找入口文件， * 如果编译器发现以rootDir的值作为根目录查找入口文件,并不会把所有文件加载进去的话会报错，然而不会进行编译 */ "rootDir": ".", /* 用于设置模块名称到基于baseUrl的门路映射 */ "paths": { "@vue/*": ["packages/*/src"], "vue": ["packages/vue/src"] } }, /** * include 用于指定要编译的门路列表，然而和files的区别在于，这里的门路能够是文件夹， * 也能够是文件，能够应用绝对和绝对路径，而且能够应用通配符， * 比方"./src"即示意要编译src文件夹下的所有文件以及子文件夹的文件 */ "include": [ "packages/global.d.ts", "packages/*/src", "packages/runtime-dom/types/jsx.d.ts", "packages/*/__tests__", "test-dts" ]}