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]

Angular 编译器选项路径配置

TS快速上手使用webpack配置TS项目

TS快速上手使用webpack配置TS项目

TS快速上手使用webpack配置TS项目