typescript 编译配置
编译器
typescript编译器是JavaScript程序,能够对typescript和JavaScript代码进行静态类型检查,并将typescript代码编译为可以执行的JavaScript代码。
位于lib目录下。typescript编译器对外提供的命令tsc
,用于编译typescript程序
tsconfig.json
- 编译文件列表
- 编译选项
- tsconfig.json 配置文件的继承关系
- 工程间的引用
在编写tsconfig.json 文件之后,运行方式: tsc index.ts
或者 tsc index.ts -p tsconfig.json
第一种: 如果没有使用指定json文件,则会在运行目录下去找,如果没有,回去父级目录下去找,如果搜索不到tsconfig.json
,则会停止编译
第二种:指定编译文件。这种情况下,编译文件的名字可以不限制。
编译选项配置
tsc --init
生成tsconfig.json文件tsc --listFile
编译选项
启用这个编译选项,在编译工程的时候,浏览器会答应出参与本次编译的文件列表,可以在命令行上使用,也可以在tsconfig.json
配置文件中去使用// 命令行 tsc --listFile
// tsconfig.json { "compilerOptions": { "listFiles": true, // "strict": true, "target": "ES5" } }
如果工程总有一个
tsconfig.json
文件,在默认情况下配置文件所在目录以及子目录下所有的.ts
.d.ts
.tsx
都会被添加到编译文件列表files属性
在配置文件中使用顶层的files
属性能够定义编译文件列表{ "compilerOptions": { "listFiles":true }, "files": ["src/b.ts", "src/c.ts"] }
只有files属性中的文件才会参与本次编译
使用files属性编译文件列表必须逐一的列出每一个文件,该属性不支持进行模糊的文件匹配。include属性
include属性包含了files属性的功能,能够支持注意的列出每一个代编仪的文件。也支持通过模糊匹配来进行匹配待编译的文件exclude属性
exclude需要和include属性一起使用,作用是include属性匹配到的文件列表中取出指定的文件,支持通配符{ "compilerOptions": { "listFiles": true }, "include": ["**/*"], "exclude": ["**/*.spec.ts"] }
声明文件列表
--typeRoots
编译选项
用来设置声明文件的根目录,当配置了--typeRoots
编译选项的时候,只有该选项指定的目录下的声明文件会被添加到编译文件列表。{ "compilerOptions": { "listFiles": ture, "typeRoots": ['./typings'] } }
--types编译选项
"–types"编译选项也是能够用来指定使用的声明文件。“–typeRoots”编译选项配置的是含有声明文件的目录。“–types”编译选项则配置的是具体的声明文件。
{
"compilerOptions": {
"listFiles": true,
"types": ["jquery"]
}
}
继承配置文件
一个’tsconfig.json’配置文件可以继承另一个’taconfig.json’ 配置文件中的配置,当一个项目中包含了获得typescript工程的时候,可以将工程共同的配置提取到tsconfig.base.json配置文件中, 其他的配置i文件继承tsconfig.json配置文件中的配置。避免了重复配置同一属性
在tsconfig.json 配置文件中,使用顶层的extends属性来设置要继承的tsconfig.json 配置文件,在extends属性中指定的路径可以是相对路径,也可以是绝对路径。但是路径解析规则有所不同
--showConfig
编译选项
使用该编辑现象之后,编辑器将显示出配置工程时使用的所有的配置信息,使用了这个配置选项, 编译器不会真正编译一个工程,只是显示工程的配置。
只能在命令行上使用,不能再配置文件中使用该编译选项- 使用相对路径
若extends属性中指定的路径是以’./‘或者’…/'作为起始的,编译器在解析相对路径的时候,会按照配置文件中的目录先上查找// tsconfig.base.json { "compilerOptions": { "target": "ES6" } }
// tsconfig.app.json { "extends": "./tsconfig.base.json", "compilerOptions": { "strict": true }, "files": ["./src/index.ts"] }
// tsconfig.spec.json { "extends": "./tsconfig.base.json", "compilerOptions": { "strict":false }, "files": ["./src/index.spec.ts"] }
- 使用非相对路径
在extends属性指定的路径不是’./‘或者’…/'作为起始的,编译器将在node_modules目录下指定的配置文件
若在该目录中指定了配置文件,则使用配置文件,否则一直在父级目录下的node_modules子目录中查找,知道跑找到系统根目录为止。
工程引用
工程引用是ts3引用的新功能。允许一个ts工程引用多个其他的ts工程。借助于工程引用,可以将一个较大的工程拆分为ts工程,设置他们之间的依赖关系,每个ts工程都可以进行独立的配置和类型价差。能够显著的提高类型检查的效率。
使用工程引用
一个目录中有包含一个tsconfig配置文件,在该目录下被视为typescript工程的根目录。
使用"references"属性配置当前所有工程所引用的其他工程
被引用的工程必须启用"composite"编译选项
- references
tsconfig.json配置文件有一个顶层的属性references。值为数组对象,用于设置引用的工程
其中的path的值既可以是指向含有tsconfig.json配置文件的目录。也可以直接执行某个配置文件。配置文件的名字不可以是tsconfig.json。此时的项目引入了两个工程{ "references": [ {"path":"../pkg1"}, {"path":"../pkg2/tsconfig.release.json"} ] }
- –composite
–composite编译选项的值是一个布尔值。通过启用该选项。typescript编译器能够快速的定位依赖工程的输出文件位置。如果一个工程被其他共层所引用。工程的"–composite"编译选项为true
启用该编译选项。会影响以下的配置
+ 没有设置–rootDir编译选项。会被设置为包含tsconfig.json 配置文件的目录
+ 如果设置了include 或 files属性。所有的源文件必须被包含在内。否则产生编译错误。
+ --declaration 变成true - –declarationMap
"–declarationMap"是推荐启用的编辑选项。如果启用了该选项。生成ds声明文件的同时会产生对应的source map文件。、
工程引用示例
- 配置reference
A工程依赖B工程// A工程配置 { "references": [ { "path": "../B" } ] }
- 配置compositie
A被B依赖,必须在A的配置文件中应该将"–composite"编译选项设置为true// A工程的tsconfig.json { { "compilerOptions": { "composite": true, "declarationMap": true } } }
–build
typescript提供了一种新的构建模式来配合工程引用的使用,–build,在该模式下,编译器能够进行增量构建,
tsc --build
- 构建typescript工程的操作
- 查找当前工程所引用的工程
- 查找当前工程和引用的工程是否有更新
- 如果工程有更新,则根据依赖顺序重新构建,如果没有更行,则不进行重新构建
- –verbose: 打印构建的详细日志信息,可以与一下的编译选项一起使用
- –dry: 打印将要执行的操作,不进行真正的构建
- –clean: 删除工程中编译输出的文件,可以与–dry 一起使用
- –force: 强制重新编译工程,不管工程是否有更新
- –watch: 观察模式,执行编译命令后不退出,等待工程有更新之后自动的编译工程
solution模式
当一个项目由多个工程组成的时候,可以创建一个solution工程来管理这些工程。solution工程本身不包含任何实际代码,引用了项目中所有的工程将他们关联在一起。
在总的项目目录中生成一个tsconfig.json配置文件,让这个总的目录称为一个solution工程
total
a
b
tsconfig.json
{
"files":[],
"include":[],
"references":[
{"path":"src"},
{"path":"test"}
]
}
在a,b项目中的配置文件,必须将files和include属性设置为空数组
在目录中使用–build模式来编译该工程。