tsconfig.json配置详解


Posted in Javascript onMay 17, 2019

概述

如果一个目录下存在一个tsconfig.json文件,那么它意味着这个目录是TypeScript项目的根目录。 tsconfig.json文件中指定了用来编译这个项目的根文件和编译选项。 一个项目可以通过以下方式之一来编译:

使用tsconfig.json

  • 不带任何输入文件的情况下调用tsc,编译器会从当前目录开始去查找tsconfig.json文件,逐级向上搜索父目录。
  • 不带任何输入文件的情况下调用tsc,且使用命令行参数--project(或-p)指定一个包含tsconfig.json文件的目录。

当命令行上指定了输入文件时,tsconfig.json文件会被忽略。

示例

tsconfig.json示例文件:

使用"files"属性

{
  "compilerOptions": {
    "module": "commonjs",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true
  },
  "files": [
    "core.ts",
    "sys.ts",
    "types.ts",
    "scanner.ts",
    "parser.ts",
    "utilities.ts",
    "binder.ts",
    "checker.ts",
    "emitter.ts",
    "program.ts",
    "commandLineParser.ts",
    "tsc.ts",
    "diagnosticInformationMap.generated.ts"
  ]
}

使用"include"和"exclude"属性

{
  "compilerOptions": {
    "module": "system",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "outFile": "../../built/local/tsc.js",
    "sourceMap": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

细节

"compilerOptions"可以被忽略,这时编译器会使用默认值。在这里查看完整的编译器选项列表。

"files"指定一个包含相对或绝对文件路径的列表。 "include"和"exclude"属性指定一个文件glob匹配模式列表。 支持的glob通配符有:

  • * 匹配0或多个字符(不包括目录分隔符)
  • ? 匹配一个任意字符(不包括目录分隔符)
  • **/ 递归匹配任意子目录

如果一个glob模式里的某部分只包含*或.*,那么仅有支持的文件扩展名类型被包含在内(比如默认.ts,.tsx,和.d.ts, 如果allowJs设置能true还包含.js和.jsx)。

如果"files"和"include"都没有被指定,编译器默认包含当前目录和子目录下所有的TypeScript文件(.ts, .d.ts 和 .tsx),排除在"exclude"里指定的文件。JS文件(.js和.jsx)也被包含进来如果allowJs被设置成true。 如果指定了 "files"或"include",编译器会将它们结合一并包含进来。 使用 "outDir"指定的目录下的文件永远会被编译器排除,除非你明确地使用"files"将其包含进来(这时就算用exclude指定也没用)。

使用"include"引入的文件可以使用"exclude"属性过滤。 然而,通过 "files"属性明确指定的文件却总是会被包含在内,不管"exclude"如何设置。 如果没有特殊指定, "exclude"默认情况下会排除node_modules,bower_components,jspm_packages和<outDir>目录。

任何被"files"或"include"指定的文件所引用的文件也会被包含进来。A.ts引用了B.ts,因此B.ts不能被排除,除非引用它的A.ts在"exclude"`列表中。

需要注意编译器不会去引入那些可能做为输出的文件;比如,假设我们包含了index.ts,那么index.d.ts和index.js会被排除在外。 通常来讲,不推荐只有扩展名的不同来区分同目录下的文件。

tsconfig.json文件可以是个空文件,那么所有默认的文件(如上面所述)都会以默认配置选项编译。

在命令行上指定的编译选项会覆盖在tsconfig.json文件里的相应选项。

@types,typeRoots和types

默认所有可见的"@types"包会在编译过程中被包含进来。 node_modules/@types文件夹下以及它们子文件夹下的所有包都是可见的; 也就是说, ./node_modules/@types/,../node_modules/@types/和../../node_modules/@types/等等。

如果指定了typeRoots,只有typeRoots下面的包才会被包含进来。 比如:

{
  "compilerOptions": {
    "typeRoots" : ["./typings"]
  }
}

这个配置文件会包含所有./typings下面的包,而不包含./node_modules/@types里面的包。

如果指定了types,只有被列出来的包才会被包含进来。 比如:

{
  "compilerOptions": {
    "types" : ["node", "lodash", "express"]
  }
}

这个tsconfig.json文件将仅会包含 ./node_modules/@types/node,./node_modules/@types/lodash和./node_modules/@types/express。/@types/。 node_modules/@types/*里面的其它包不会被引入进来。

指定"types": []来禁用自动引入@types包。

注意,自动引入只在你使用了全局的声明(相反于模块)时是重要的。 如果你使用 import "foo"语句,TypeScript仍然会查找node_modules和node_modules/@types文件夹来获取foo包。

使用extends继承配置

tsconfig.json文件可以利用extends属性从另一个配置文件里继承配置。

extends是tsconfig.json文件里的顶级属性(与compilerOptions,files,include,和exclude一样)。 extends的值是一个字符串,包含指向另一个要继承文件的路径。

在原文件里的配置先被加载,然后被来至继承文件里的配置重写。 如果发现循环引用,则会报错。

来至所继承配置文件的files,include和exclude覆盖源配置文件的属性。

配置文件里的相对路径在解析时相对于它所在的文件。

比如:

configs/base.json:

{
 "compilerOptions": {
  "noImplicitAny": true,
  "strictNullChecks": true
 }
}

tsconfig.json:

{
 "extends": "./configs/base",
 "files": [
  "main.ts",
  "supplemental.ts"
 ]
}

tsconfig.nostrictnull.json:

{
 "extends": "./tsconfig",
 "compilerOptions": {
  "strictNullChecks": false
 }
}

compileOnSave

在最顶层设置compileOnSave标记,可以让IDE在保存文件的时候根据tsconfig.json重新生成文件。

{
  "compileOnSave": true,
  "compilerOptions": {
    "noImplicitAny" : true
  }
}

要想支持这个特性需要Visual Studio 2015, TypeScript1.8.4以上并且安装atom-typescript插件

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用jQuery设计一个简单的web音乐播放器的实例分享
Mar 08 Javascript
AngularJS入门教程之链接与图片模板详解
Aug 19 Javascript
jQuery获取选中单选按钮radio的值
Dec 27 Javascript
JS实现图片放大镜插件详解
Nov 06 Javascript
bing Map 在vue项目中的使用详解
Apr 09 Javascript
基于Vue2x的图片预览插件的示例代码
May 14 Javascript
vue引用js文件的多种方式(推荐)
May 17 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
Jul 18 Javascript
详解滑动穿透(锁body)终极探索
Apr 16 Javascript
Vue项目实现简单的权限控制管理功能
Jul 17 Javascript
多种类型jQuery网页验证码插件代码实例
Jan 09 jQuery
使用JS实现鼠标放上图片进行放大离开实现缩小功能
Jan 27 Javascript
小程序云函数调用API接口的方法
May 17 #Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
May 17 #Javascript
微信小程序云开发之使用云函数
May 17 #Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 #jQuery
微信小程序云开发之使用云数据库
May 17 #Javascript
微信小程序云开发之使用云存储
May 17 #Javascript
vue-cli3 配置开发与测试环境详解
May 17 #Javascript
You might like
使用PHP下载CSS文件中的所有图片【几行代码即可实现】
2016/12/14 PHP
php提供实现反射的方法和实例代码
2019/09/17 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
PHP多进程简单实例小结
2019/11/09 PHP
24款非常有用的 jQuery 插件分享
2011/04/06 Javascript
使用jquery读取html5 localstorage的值的方法
2013/01/04 Javascript
JQuery获取各种宽度、高度(format函数)实例
2013/03/04 Javascript
javascript html5摇一摇功能的实现
2016/04/19 Javascript
javascript实现简单计算器效果【推荐】
2016/04/19 Javascript
一分钟理解js闭包
2016/05/04 Javascript
jQuery使用ajax跨域获取数据的简单实例
2016/05/18 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
2016/06/03 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
2016/08/25 Javascript
JS简单实现数组去重的方法示例
2017/03/27 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
2017/05/26 Javascript
五步轻松实现JavaScript HTML时钟效果
2020/03/25 Javascript
jQuery实现模糊查询的方法分析
2018/05/10 jQuery
基于leaflet.js实现修改地图主题样式的流程分析
2020/05/15 Javascript
[53:03]Optic vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
400多行Python代码实现了一个FTP服务器
2012/05/10 Python
遍历python字典几种方法总结(推荐)
2016/09/11 Python
Python实现ssh批量登录并执行命令
2016/10/25 Python
Python队列的定义与使用方法示例
2017/06/24 Python
python写入并获取剪切板内容的实例
2018/05/31 Python
python中不能连接超时的问题及解决方法
2018/06/10 Python
python实现蒙特卡罗方法教程
2019/01/28 Python
Python的numpy库下的几个小函数的用法(小结)
2019/07/12 Python
解决TensorFlow模型恢复报错的问题
2020/02/06 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
无惧面试,带你搞懂python 装饰器
2020/08/17 Python
大龄毕业生求职别忘职业规划
2014/03/11 职场文书
竞选班干部演讲稿400字
2014/08/20 职场文书
六年级学生评语大全
2014/12/26 职场文书
个人先进事迹总结
2015/02/26 职场文书
土木工程毕业答辩开场白
2015/05/29 职场文书
OpenCV实现反阈值二值化
2021/11/17 Java/Android