TS快速上手配置选项 - 编译选项compilerOptions
Posted YK菌
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了TS快速上手配置选项 - 编译选项compilerOptions相关的知识,希望对你有一定的参考价值。
嗨!~ 大家好,我是YK菌 🐷 ,一个微系前端 ✨,爱思考,爱总结,爱记录,爱分享 🏹,欢迎关注我呀 😘 ~ [微信号:
yk2012yk2012
,微信公众号:ykyk2012
]
文章目录
今天我们主要来学习TS的编译选项
编译TS
自动编译文件
编译文件时,使用 -w 指令后,TS编译器会自动监视文件的变化,并在文件发生变化时对文件进行重新编译。
tsc xxx.ts -w
一个文件一个文件的编译太麻烦了,我们可以对整个项目进行编译
自动编译整个项目
首先在项目根目录下创建一个ts的配置文件 tsconfig.json
,然后就可以使用tsc
指令,编译项目下的所有ts文件为js文件,当然也可以开启监视模式tsc -w
监视所有的文件
下面我们在介绍tsconfig.json文件中的一些配置选项
配置选项
总览
"compilerOptions":
"target": "es5", // 指定 ECMAScript 目标版本: 'ES5'
"module": "commonjs", // 指定使用模块: 'commonjs', 'amd', 'system', 'umd' or 'es2015'
"moduleResolution": "node", // 选择模块解析策略
"experimentalDecorators": true, // 启用实验性的ES装饰器
"allowSyntheticDefaultImports": true, // 允许从没有设置默认导出的模块中默认导入。
"sourceMap": true, // 把 ts 文件编译成 js 文件的时候,同时生成对应的 map 文件
"strict": true, // 启用所有严格类型检查选项
"noImplicitAny": true, // 在表达式和声明上有隐含的 any类型时报错
"alwaysStrict": true, // 以严格模式检查模块,并在每个文件里加入 'use strict'
"declaration": true, // 生成相应的.d.ts文件
"removeComments": true, // 删除编译后的所有的注释
"noImplicitReturns": true, // 不是函数的所有返回路径都有返回值时报错
"importHelpers": true, // 从 tslib 导入辅助工具函数
"lib": ["es6", "dom"], // 指定要包含在编译中的库文件
"typeRoots": ["node_modules/@types"],
"outDir": "./dist",
"rootDir": "./src"
,
"include": [
"./src/**/*.ts"
],
"exclude": [
"node_modules",
"dist",
"**/*.test.ts",
]
① include
重要
-
是一个数组,用来指定需要编译的ts文件,其中
*
表示任意文件**
表示任意目录 -
默认值:
["**/*"]
"include":["src/**/*", "test/**/*"] // 所有src目录和test目录下的文件都会被编译
② exclude
-
定义不需要被编译的文件目录
-
默认值:
["node_modules", "bower_components", "jspm_packages"]
"exclude": ["./src/hello/**/*"] // src下hello目录下的文件都不会被编译
③ extends
- 定义被继承的配置文件
"extends": "./configs/base" // 当前配置文件中会自动包含config目录下base.json中的所有配置信息
④ files
- 指定被编译文件的列表,只有需要编译的文件少时才会用到
"files": [
"core.ts",
"sys.ts",
"types.ts",
"scanner.ts",
"parser.ts",
"utilities.ts",
"binder.ts",
"checker.ts",
"tsc.ts"
]
- 列表中的文件都会被TS编译器所编译
⑤ compilerOptions
重要 编译选项,在compilerOptions中包含多个子选项,用来完成对编译的配置
对于这些选项有哪些可选值,我们可以随便写一个值,编辑器会提示我们有哪些可选值
① target
-
设置ts代码编译的目标版本
-
可选值: “ES3”(默认), “ES5”, “ES6”, “ES2015”, “ES2016”, “ES2017”, “ES2018”, “ES2019”, “ES2020”, “ES2021”, “ESNext”.
"compilerOptions":
"target": "ES6"
- 如上设置,我们所编写的ts代码将会被编译为ES6版本的js代码
② lib
-
指定代码运行时所包含的库(宿主环境)
-
可选值:“ES5”, “ES6”, “ES2015”, “ES2015.Collection”, “ES2015.Iterable”, “ES2015.Promise”, “DOM”, “DOM.Iterable”, “ScriptHost”, “WebWorker”, “WebWorker.ImportScripts”…
"compilerOptions":
"lib": ["ES6", "DOM"]
一般来说,如果是运行在浏览器环境下的,就不需要自己单独设置这个
③ module
-
设置编译后代码使用的模块化系统
-
可选值:“CommonJS”, “AMD”, “System”, “UMD”, “ES6”, “ES2015”, “ES2020”, “ESNext”, “None”, “es2022”, “node12”, “nodenext”
"compilerOptions":
"module": "CommonJS"
④ outDir
-
编译后文件的所在目录
-
默认情况下,编译后的js文件会和ts文件位于相同的目录,设置outDir后可以改变编译后文件的位置
"compilerOptions":
"outDir": "./dist"
- 设置后编译后的js文件将会生成到dist目录。可以将源码与编译后的代码分开存放
⑤ outFile
-
将所有的文件编译为
一个
js文件 -
默认会将所有的编写在全局作用域中的代码合并为一个js文件,如果 module 制定了 None、System 或 AMD 则会将模块一起合并到文件之中
"compilerOptions":
"outFile": "./dist/app.js"
这种合并,我们应该交给打包工具去做,我们后面会说
⑥ rootDir
- 指定代码的根目录,默认情况下编译后文件的目录结构会以最长的公共目录为根目录,通过rootDir可以手动指定根目录
"compilerOptions":
"rootDir": "./src"
⑦ 其他配置
标题 | 功能 |
---|---|
allowJs | 是否对js文件编译,默认值:false |
checkJs | 是否对js文件进行语法检查,默认值:false |
removeComments | 是否删除注释,默认值:false |
noEmit | 不生成编译后的文件,默认值:false |
noEmitOnError | 当有错误的时候不生成编译后的文件,默认值:false |
sourceMap | 是否生成sourceMap,默认值:false |
⑧ 严格检查
标题 | 功能 |
---|---|
strict | 启用所有的严格检查,设置后相当于开启了所有的严格检查,默认值:false |
alwaysStrict | 总是以严格模式对代码进行编译,默认值:false |
noImplicitAny | 禁止隐式的any类型,默认值:false |
noImplicitThis | 禁止类型不明确的this,默认值:false |
strictBindCallApply | 严格检查bind、call和apply的参数列表,默认值:false |
strictFunctionTypes | 严格检查函数的类型,默认值:false |
strictNullChecks | 严格的空值检查,默认值:false |
strictPropertyInitialization | 严格检查属性是否初始化,默认值:false |
⑨ 额外检查
标题 | 功能 |
---|---|
noFallthroughCasesInSwitch | 检查switch语句包含正确的break |
noImplicitReturns | 检查函数没有隐式的返回值 |
noUnusedLocals | 检查未使用的局部变量 |
noUnusedParameters | 检查未使用的参数 |
allowUnreachableCode | 检查不可达代码;true:忽略不可达代码,false:不可达代码将引起错误 |
noEmitOnError | 有错误的情况下不进行编译,默认值:false |
最后,欢迎关注我的专栏,和YK菌做好朋友
以上是关于TS快速上手配置选项 - 编译选项compilerOptions的主要内容,如果未能解决你的问题,请参考以下文章
TS快速上手配置选项 - 编译选项compilerOptions
没有可用于配置选项的 Java 编译器 compilerClassName: [null] and compiler: [null]