您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

TypeScript tsconfig.json 配置

本节将详细介绍 tscon.json 中各配置项的含义,这将对我们搭建 TypeScript 工程项目很有帮助。

如果目录下存在 tscon.json ,那么它意味着这个目录是 TypeScript 项目的根目录,tscon.json 中指定了用来编译这个项目的根和编译选项。

项目可以通过以下方式之一来编译:

当命令行上指定了输入时,tscon.json 会被忽略。

tscon.json 主要有以下配置项:

{
  "compilerOptions": {},
  "files": [],
  "include": [],
  "exclude": [],
  "extends": "",
  "compileOnSave": false,
  "typeAcquisition": {}
}

compilerOptions:对象类型,用来设置编译选项,若不设置则认使用上节介绍的认配置。

下面是一份梳理的常用 compilerOptions 配置:

{
  "compilerOptions": {
    "target": "esnext", /* 指定编译之后的版本目标: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
    "module": "esnext", /* 指定要使用的模块标准: 'none', 'commonjs', 'amd', 'sy@R__2354@', 'umd', 'es2015', or 'ESNext'. */
    "noImplicitAny": false, /* 是否认禁用 any */
    "removeComments": true, /* 是否移除注释 */
    "declaration": true, /* 是否创建类型声明 */
    "strict": true, /* 启动所有类型检查 */
    "jsx": "preserve", /* 指定jsx用于的开发环境 */
    "importHelpers": true, /* 引入tslib里的辅助工具*/
    "moduleResolution": "node", /* 选择模块解析策略,有'node'和'classic'两种类型 */
    "experimentalDecorators": true, /* 启用实验性的装饰器特性 */
    "esModuleInterop": true,  /* 通过为导入创建命名空间,实现CommonJS和ES模块之互操作性 */
    "allowSyntheticDefaultImports": true, /* 允许从没有认导出的模块中认导入 */
    "sourceMap": true, /* 是否map */
    "baseUrl": ".", /* 工作根目录 */
    "types": [ /* 指定引入的类型声明,认是引入所有声明,一旦指定该选项,则会禁用引入,改为只引入指定的类型声明,如果指定空数组[]则不引用任何 */
      "webpack-env",
      "jest"
    ],
    "paths": { /* 指定模块的路径,和 baseUrl有关联,和 webpack 中 resolve.alias 配置一样 */
      "@/*": [
        "src/*"
      ]
    },
    "lib": [ /* 译过程中需要引入的库的列表 */
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  }
}

files 是数组列表,写入待编译的相对或, glob 匹配模式。

include 是数组列表,写入待编译的路径, glob 匹配模式。

exclude 也是数组列表,写入排除某些路径,这些排除于待编译列表, glob 匹配模式。

glob 符有:

如果 "files""include" 都没有被指定,编译器认包含当前目录和子目录下所有的 TypeScript (.ts, .d.ts.tsx),排除在"exclude" 里指定的。

如果开启了 allowJs 选项,那 .js.jsx 也属于编译器包含范围。

{
  "files": [
  "core.ts",
  "index.ts",
  "types.ts"
  ],
  "exclude": [
    "node_modules", 
    "lib", 
    "**/*.test.ts"
  ],
  "include": [
    "src/**/*"
  ],
}

如果没有特殊指定,"exclude" 认情况下会排除 node_modules,bower_components,jspm_packages<outDir> 目录。

任何被 "files""include" 指定的所引用的也会被包含进来。

优先级:命令行配置 > files > exclude > include

extends:字符串类型,指向另要继承的路径。例如:

{
  "extends": "con/base.json"
}

这个配置项的意思就是我们可以借助 "extends" 引入路径为 "con/base.json" 的中的配置选项。

cons/base.json:

{
  "compilerOptions": {
    "noImplicitAny": true,
    "strictNullChecks": true
  }
}

需要注意:

compileOnSave 是布尔类型的,当值为 true 时,设置 compileOnSave 到 IDE,以便 tscon.ts 在保存时能够重新。

typeAcquisition:对象类型,用以设置引入库类型定义(.d.ts),该下面有3个子:

认情况下,node_modules/@types 夹下以及它们子夹下的所有包都会在编译过程中被包含进来。

但是如果指定了 typeRoots,则只有 typeRoots 路径下的包才会被包含进来:

{
  "compilerOptions": {
    "typeRoots" : ["./typings"]
  }
}

这个会包含所有 ./typings 下面的包,而不包含 ./node_modules/@types 里面的包。

如果指定了 types,只有被列出来的包才会被包含进来。比如:

{
  "compilerOptions": {
    "types": ["node", "lodash", "express"]
  }
}

如果 types 设置为空数组,则引入 @types 包:

{
  "compilerOptions": {
    "types": []
  }
}

注意,引入只在你使用了全局的声明(相反于模块)时是重要的。如果你使用 import "foo" 语句,TypeScript 仍然会查找 node_modulesnode_modules/@types 夹来 foo 包。

本节介绍了 tscon.json 中的各配置项及其使用场景,尤其要熟悉一些常用的编译选项,一份良好的配置项也是团队规范的标准之一。


联系我
置顶