【TypeScript】---配置选项

目录

一、编译

自动编译文件

自动编译整个项目

二、配置选项的介绍

1. include（包含）

2. exclude（排除）

3.extends(延伸)

4. files(文件)

5. compilerOptions (编译器选项)

   target(项目编译)

lib(库)

module (模块)

outDir(输出目录)

outFile(输出文件)

rootDir(根目录)

checkJs

其他配置

 严格检查

 额外检查

一、编译

自动编译文件

编译文件时，使用 -w 指令后，TS编译器会自动监视文件的变化，并在文件发生变化时对文件进行重新编译。

 tsc xxx.ts -w

自动编译整个项目

如果直接使用 tsc 指令，则可以自动将当前项目的所有 ts 文件编译为 js 文件。

可以直接使用 tsc 命令的产品时，但要先在项目根目录下创建一个 ts 的配置文件 tsconfig.json

tsconfig.json 是一个 JSON 文件，后添加配置文件，只需对整个项目的 tsc 命令自动完成的编译

二、配置选项的介绍

示例

{
  "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",
  ]
}

1. include（包含）

•  定义希望被编译的文件所在的目录，其中 *表示任意文件 **表示任意目录

• 默认值：["**/*"]

"include":["src/**/*", "test/**/*"] // 所有src目录和test目录下的文件都会被编译

2. exclude（排除）

• 定义需要修复在外的目录
• 默认值：["node_modules", "bower_components", "jspm_packages"]

  "exclude": ["./src/index/**/*"]  //示例中，src下index目录下的文件都不会被编译

3.extends(延伸)

• 定义被继承的配置文件

"extends": "./configs/base" // 当前配置文件中会自动包含config目录下base.json中的所有配置信息

4. files(文件)

• 指定需要编译的文件时，只需要列出文件列表

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

三、compilerOptions (编译器选项)

• 编译选项是配置文件中非常重要也比较复杂的配置选项
• 在compilerOptions中包含多个子选项，使用完成对编译的配置

   target(项目编译)

• 设置代码编译的目标版本

• 任选值：ES3（默认）、ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext

"compilerOptions": {
    "target": "ES6"//将编写的ts代码被编译为ES6版本的js代码
}

lib(库)

• 代码时所包含的库（指定运行环境）

• 任选值：ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext、DOM、WebWorker、ScriptHost ......

"compilerOptions": {
    "target": "ES6",
    "lib": ["ES6", "DOM"],
    "outDir": "dist",
    "outFile": "dist/aa.js"
}

module (模块)

• 设置编译后代码使用的智能系统

• 任选值："CommonJS", "AMD", "System", "UMD", "ES6", "ES2015", "ES2020", "ESNext", "None", "es2022", "node12", "nodenext"

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

outDir(输出目录)

• 编译后文件的所在目录

• 默认情况下，编译后的 js 文件会和 ts 文件位于相同的目录下，设置出目录后默认可以更改编译后文件的位置，设置后编译后的js文件生成到dist目录

"compilerOptions": {
    "outDir": "dist"
}

outFile(输出文件)

• 将所有的文件编译为一个js文件

• 将所有模块的通用代码组合在一起的作用域为一个 js 文件，模块生成一个、系统或 AMD 的所有文件将在其中

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

rootDir(根目录)

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

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

checkJs

• 是否对js文件进行检查

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

其他配置

 严格检查

 额外检查