tsconfig.json 文件你了解多少?一偏文章帮你搞定

本文通过对VUE源码中的 tsconfig.json 文件中的每个属性做详细解释,使读者对常用的配置信息做进一步的了解,希望对看到此篇文章的读者有所帮助。

1、compilerOptions 属性

"baseUrl": "."

(1)用于拓宽引入非相对模块时的查找路径的。其默认值就是"./"

(2)目的是解决项目代码层级较深相互之间引用起来会比较麻烦的问题,各种 …/,…/…/,…/…/…/ 等等

(3)paths 属性基于 baseUrl 进行设置

    "paths": {

        "@vue/*": ["packages/*/src"],

        "vue": ["packages/vue/src"]

}

"outDir": "dist"

指定输出目录

"sourceMap": false,

(1)是否生成目标文件的sourceMap文件

(2)此文件允许调试器和其他工具在实际使用发出的JavaScript文件时显示原始的TypeScript源代码。

(3)此文件为 .js.map (or .jsx.map) 格式,位于相应的.js 输出文件相同目录

"target": "esnext",

(1)定义了编译后的目标 javascript 版本, 可选择包括es6、es5、esnext

(2)如果需要考虑兼容性问题就可以设置为es5或更低的版本,一般来说,我们需要让他编译为 es5,这样就可以被主流浏览器解读了。

(3)当然,你说我的 react 代码不是给浏览器看的,比如说,你使用的是 react-native 做作手机 app,那么这里的选项可以选择 es6。

(4)如果代码是在高版本的现代浏览器或高版本的node端,就可以设置为esnext

"module": "esnext",

(1)告诉编译器对发出的.js文件中的模块使用什么语法。可选择 none、commonjs、amd、system、umd、es2015或esnext

(2)告诉编译器以哪种语法编写代码,意味着必须从哪个代码将其编译为commonjs。

(3)如果用于服务器端项目 如果使用的是Angular前端应用程序,则使用Node.js,然后可能使用CJS 可能不是ESM

(4)较新的JS版本有时包含用于模块导入/导出的更多功能。将export设置为"module"可以支持这些功能,而这些功能通常尚未添加到官方规范中。例如dynamic import的"ESNext"表达式。

(5)无论如何,编译器的目的是将代码编译成浏览器可理解的语法(commonjs)

(6)module影响发出代码的模块语法,而target影响其余代码

"moduleResolution": "node",

(1)模块解析策略,ts默认用node的解析策略,即相对的方式导入, 可选值:node、classic

(2)如果未指定,则 --module commonjs 默认为 node,否则默认为 classic(包括 --module 设置为 amd、system、umd、es2015、esnext 等)

(3)Node 模块解析是 TypeScript 社区中最常用的,推荐用于大多数项目。

(4)如果您在 TypeScript 中遇到导入和导出的解析问题,请尝试设置 moduleResolution: “node” 以查看它是否解决了问题。

"allowJs": false,

(1)允许在 TS 项目中导入JavaScript文件,而不是仅导入.ts和.tsx文件。即允许ts和tsx文件与现有JavaScript文件共存

(2)例如js文件 @filename: card.js: export const defaultCardDeck = "Heart";

(3)ts文件 @filename: index.ts 中引入上面的js变量:import { defaultCardDeck } from "./card";

(4)如果 allowJs 设置为 false, 将会抛出错误。

"strict": true,

(1)开启所有严格的类型检查

(2)true => 同时开启 alwaysStrict, noImplicitAny, noImplicitThis 和 strictNullChecks

(3)alwaysStrict:严格模式,为每个文件添加 "use strict"

(4)noImplicitAny:不允许隐式 any,如果true,函数的形参必须带类型,如果叫不出class名的js对象,那就得any。比如(d:any)=>{};如果false, 则允许隐式any,函数的样子更像js (d)=>{}

(5)noImplicitThis:不允许 this 为隐式 any

(6)strictNullChecks:undefined 和 null 两个空类型的设计,使用上不方便,所以 通过strictNullChecks严格校验类型,让代码更安全。

"noUnusedLocals": true,

检查只声明、未使用的局部变量(只提示不报错)

"experimentalDecorators": true,

(1)是否启用实验性的装饰器特性,装饰器的语法是ES7的实验性语法, 不打开可能会出现如下错误:

(2)异常信息:Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.

"resolveJsonModule": true,

(1)防止 ts文件中引入json文件,会报如下红色波浪线。

(2)TypeScript 2.9的resolveJsonModule功能,只要我使用ts-node执行应用程序,该功能就可以正常工作

"esModuleInterop": true,

作用是支持使用import d from 'cjs'的方式引入commonjs包

"removeComments": false,

用于指定是否将编译后的文件注释删掉,设为true的话即删除注释,默认为false

"jsx": "preserve",

(1)指定jsx代码用于的开发环境: 'preserve', 'react-native', or 'react'

(2)preserve:生成代码中会保留JSX以供后续的转换操作使用(比如:Babel).另外,输出文件会带有.jsx扩展名。

(3)react:会生成React.createElement,在使用前不需要再进行转换操作了,输出文件的扩展名为.js。

(4)react-native:相当于preserve,它也保留了所有的JSX,但是输出文件的扩展名是.js

"lib": ["esnext", "dom"],

(1)编译过程中需要引入的库文件的列表,告诉 typescript 编译器可以使用哪些功能。

(2)比如说,我们这里有一个 dom 的库文件,这个文件会告诉编译器 dom api 的接口,所以当我们在 ts 代码中使用 dom 的时候,比如说执行 “document.getElementById ("root")” 这句话的时候,编译器就会知道该如何进行检查。

(3)如果我们不设置这个选项,那么编译器也有自己默认的库文件列表,一般来说是 ["dom", "es6","DOM.Iterable"] 等等

"types": ["jest", "puppeteer", "node"],  

用于指定需要包含的模块,只有在这里列出的模块的声明文件才会被加载

"rootDir": ".",

(1)用来指定编译文件的根目录,编译器会在根目录查找入口文件,

(2)如果编译器发现以rootDir的值作为根目录查找入口文件,并不会把所有文件加载进去的话会报错,但是不会停止编译

"paths": {

      "@vue/*": ["packages/*/src"],

      "vue": ["packages/vue/src"]

    }

用于设置模块名称到基于baseUrl的路径映射

2、include属性

(1)include 用于指定要编译的路径列表,但是和files的区别在于,这里的路径可以是文件夹,也可以是文件,可以使用相对和绝对路径,而且可以使用通配符。

(2)比如"./src"即表示要编译src文件夹下的所有文件以及子文件夹的文件

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,558评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,002评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,036评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,024评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,144评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,255评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,295评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,068评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,478评论 1 305
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,789评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,965评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,649评论 4 336
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,267评论 3 318
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,982评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,223评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,800评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,847评论 2 351

推荐阅读更多精彩内容