typescript tsconfig.config.json配置文件中各项说明

tsconfig.json文件中指定了用来编译这个项目的根文件和编译选项

自动编译项目

tsc

tsc可以直接自动监听所有的ts来编译为js文件

使用tsc的前提: 在项目根目录创建tsconfig.config.json文件

创建两种方式:

1. 直接在根目录新建tsconfig.config.json (配置文件需要自己配置)

2. 执行tsc --init  (会自动创建相关配置)

tsc --init

tsconfig.config.json 配置项说明

1. include

定义希望被编译的ts文件所在目录

默认值: ["**/*"] 

"include":["src/**/*"]

src目录下所有的ts文件都会被编译

2. exclude

不希望被编译的目录

默认值: ["node_modules", "bower_components", "jspm_packages"]

"exclude": ["./src/test/**/*"]

src中test目录下所有的ts文件不会被编译

3. extends

继承属性 希望继承的ts文件路径

"extends": "./src/base"

当前的配置文件会继承src目录下base的配置文件信息

4. files

指定要编译的ts文件

"files": [
    "core.ts",
    "sys.ts",
    "types.ts",
    "scanner.ts",
    "parser.ts",
    "utilities.ts",
    "binder.ts",
    "checker.ts",
    "tsc.ts"
  ]

只会编译列出的ts文件

5. compilerOptions

复杂的配置项

  5.1 target

  设置编译后的js版本

默认值: ES3

可选: ES3（默认）、ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext

"compilerOptions": {
    "target": "ES6"
}

编译后为ES6语法 

ts: let x:number = 10 >>> js: let x = 10

  5.2 lib

所包含的库

可选值: ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext、DOM、WebWorker、ScriptHost ......

"compilerOptions": {
    "target": "ES6",
    "lib": ["2015", "DOM"]
}

如果不含有DOM 使用document.xxx方法会在ts中报错

  5.3 module

模块化系统

可选值: CommonJS、UMD、AMD、System、ES2020、ESNext

"compilerOptions": {
    "module": "CommonJS"
}

  5.4 outDir

编译后输出的js位置

默认情况会在ts同目录生成

"compilerOptions": {
    "outDir": "js"
}

输出后的所有js文件存放在js目录下

  5.5 outFile

将所有的ts编译成一个js文件

默认会将所有的编写在全局作用域中的代码合并为一个js文件，如果module制定了None、System或AMD则会将模块一起合并到文件之中 (参考)

"compilerOptions": {
    "outFile": "dist/all.js"
}

将所有的ts文件编译并合并到dist目录下all.js中

  5.6 rootDir (没理解 参考)

指定代码的根目录，默认情况下编译后文件的目录结构会以最长的公共目录为根目录，通过rootDir可以手动指定根目录

"compilerOptions": {
    "rootDir": "./src"
}

  5.7 allowJs 

对js文件进行编译 js>>js (有点多此一举)

默认值: false

"compilerOptions": {
    "allowJs": true,
}

  5.8 checkJs

对js文件进行检查

默认值: false

开启后 let x = 10; x = 'hello' 报错(变成ts效果 一般搭配allowJs一起用)

"compilerOptions": {
    "allowJs": true
    "checkJs": true,
}

  5.9 removeComments

是否删除编译后的js注释

默认值: false

"compilerOptions": {
   "removeComments": true
}

 开启后ts写的注释 js文件中没有

  5.10 noEmit

不对ts文件进行编译 (感觉一点用没有)

默认值: false

"compilerOptions": {
   "noEmit": true
}

  5.11 严格检查

    · alwaysStrict

      用来设置编译后的文件是否使用严格模式

      默认值: false

    · noImplicitAny

      不允许隐式any类型 开启后 let x; 会报错

    · noImplicitThis

      不允许不明确类型的this

    · strictNullChecks

      严格的检查空值

    · strictBindCallApply

      严格检查bind、call和apply的参数列表

    · strictFunctionTypes

      严格检查函数的类型

    · strictPropertyInitialization

      严格检查属性是否初始化

  5.12 额外检查      

    · noFallthroughCasesInSwitch

     检查switch语句包含正确的break

    · noImplicitReturns

      检查函数没有隐式的返回值

    · noUnusedLocals

      检查未使用的局部变量

    · noUnusedParameters

      检查未使用的参数

      

记录下来方便自己理解，当笔记用，

参考:

b站视频: 尚硅谷2021版TypeScript教程（李立超老师TS新课）(BV1Xy4y1v7S2)

github:  typescript-learn 作者: JasonkayZK