【typescript】Typescript tsconfig.json全解析

本文介绍: tsconfig.json是编译TypeSc rip t的配置文件，对书写TypeSc rip t 代码十分重要，如果有些选项你没配置，则需要严格按照TypeSc ript的规则来书写，书写出不符合规则的代码，会导致编译报错。我们早期可以关闭一些规则设置，从而更愉快的从js转为ts 开发

前言

tsconfig.json是编译TypeScript的配置文件，对书写TypeScript代码十分重要，如果有些选项你没配置，则需要严格按照TypeScript的规则来书写，书写出不符合规则的代码，会导致编译报错。我们早期可以关闭一些规则设置，从而更愉快的从js转为ts 开发

解析

experimentalDecorators

是否启用实验性的ES装饰器。boolean类型，默认值：false。
启用 vuex–class同时需要设置 strictFunctionTypes 选项为false

strictPropertyInitialization

是否类的非undefine d 属性已经在构造函数里初始化。 boolean类型，默认值：false
所有的属性值，都需要赋有初始值。建议把strictPropertyInitialization 设置为false，这样就不需要定义一个变量就必须赋有初始值
如果设置为true，需要同时启用–strictNullChecks或启用–strict

noImp li citAny

ts有多种类型，不是每个变量或参数定义告知类型是。如果开启该值，当有隐含any类型时，会报错。
建议初次上手TypeScript，把该选项设置为false。

// 当开启noImplicitAny时，需要隐含当any需要明确指出
arr.find(item =&gt; item.age=== age) // error
arr.find((item: any) => item.age=== age) // ok

target

指定编译的ECMAScript目标版本。枚举值：“ES3”， “ES5”， “ES6”/ “ES2015”， “ES2016”， “ES2017”，“ESNext”。默认值： “ES3”

module

指定生成哪个模块系统代码。枚举值：“None”， “CommonJS”， “AMD”， “Syste m”， “UMD”， “ES6”， “ES2015”，“ESNext”。默认值根据–target 选项不同而不同，当target 设置为ES6时，默认 mod ule为“ES6”，否则为“com monjs”

lib

编译过程中需要引入的库文件的列表。string[]类型，可选的值有很多，常用的有ES5，ES6，ESNext，DOM，DOM.Iterable、WebWorker、ScriptHost等。该值默认值是根据–tar get 选项不同而不同。当target为ES5时，默认值为[‘DOM ‘, ‘ES5’, ‘ScriptHost’];当target为ES6时，默认值为[‘DOM’, ‘ES6’, ‘DOM.Iterable’, ‘ScriptHost’]

为了在ts 代码中使用ES6中的类，比如Array.form、Set、Reflect等，需要设置lib选项，在编译过程中把这些标准库引入。这样在编译过程中，如果遇到属于这些标准库的class或api时，ts 编译器不会报错。

mod uleResolution

决定如何处理模块。string类型，“node”或者“classic”，默认值：“classic”。

path s 非常有用

模块名或路径映射的列表。Object值
我们经常使用’@/util/h elp’来代替’./src/util/h elp’，省的每次在不同层级文件 import 模块时,都纠结于是’./‘还是’…/’。
该选项告诉编译器遇到匹配的值时，去映射的路径下加载模块。

{
    "baseUrl": ".", // 注意：baseUrl不可少
    "paths": {
      // 映射列表
      "@/*": [
        "src/*"
      ],
      "moduleA": [
        "src/libs/moduleA"
      ]
    }
}

// in ts code
import Setting from '@/components/Setting.vue' // 模块实际位置: src/components/Setting.vue
import TestModule from 'moduleA/index.js' // 模块实际位置: src/libs/moduleA/index.js

strictNullChecks

是否启用严格的 null 检查模式。boolean值，默认值：false

noUnusedLocals

有未使用的变量时，是否抛出错误。boolean值，默认值： false
当发现变量定义但没有使用时，编译不报错。eslint的rule中也有该条，建议正式项目将该选项开启，设置为true，使得代码干净整洁。

noUnusedParameters

是否允许编译javascript 文件。boolean值，默认值：false
如果设置为true，js后缀的文件也会被typescript进行编译。

typeRoots和types

默认所有可见的”@types“包会在编译过程中被包含进来。如果指定了typeRoots，只有typeRoots下面的包才会被包含进来。如果指定了types，只有被列出来的npm包才会被包含进来。

files、include和exclude

编译文件包含哪些文件以及排除哪些文件。

未设置include时，编译器默认包含当前目录和子目录下所有的TypeScript文件（.ts, .d.ts 和 .tsx）。如果allowJs被设置成true，JS文件（.js和.jsx）也被包含进来。exclude排除那些不需要编译的文件或文件夹。

tsconfig.json全解析

{
  "compilerOptions": {
    /* 基本选项 */
    "target": "es5",                       // 指定 ECMAScript 目标版本: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'（"ESNext"表示最新的ES语法，包括还处在stage X阶段）
    "module": "commonjs",                  // 指定使用模块: 'commonjs', 'amd', 'system', 'umd' or 'es2015'
    "lib": [],                             // 指定要包含在编译中的库文件
    "allowJs": true,                       // 允许编译 javascript 文件
    "checkJs": true,                       // 报告 javascript 文件中的错误
    "jsx": "preserve",                     // 指定 jsx 代码的生成: 'preserve', 'react-native', or 'react'
    "declaration": true,                   // 生成相应的 '.d.ts' 文件
    "sourceMap": true,                     // 生成相应的 '.map' 文件
    "outFile": "./",                       // 将输出文件合并为一个文件
    "outDir": "./",                        // 指定输出目录
    "rootDir": "./",                       // 用来控制输出目录结构 --outDir.
    "removeComments": true,                // 删除编译后的所有的注释
    "noEmit": true,                        // 不生成输出文件
    "importHelpers": true,                 // 从 tslib 导入辅助工具函数
    "isolatedModules": true,               // 将每个文件做为单独的模块 （与 'ts.transpileModule' 类似）.

    /* 严格的类型检查选项 */
    "strict": true,                        // 启用所有严格类型检查选项
    "noImplicitAny": true,                 // 在表达式和声明上有隐含的 any类型时报错
    "strictNullChecks": true,              // 启用严格的 null 检查
    "noImplicitThis": true,                // 当 this 表达式值为 any 类型的时候，生成一个错误
    "alwaysStrict": true,                  // 以严格模式检查每个模块，并在每个文件里加入 'use strict'

    /* 额外的检查 */
    "noUnusedLocals": true,                // 有未使用的变量时，抛出错误
    "noUnusedParameters": true,            // 有未使用的参数时，抛出错误
    "noImplicitReturns": true,             // 并不是所有函数里的代码都有返回值时，抛出错误
    "noFallthroughCasesInSwitch": true,    // 报告 switch 语句的 fallthrough 错误。（即，不允许 switch 的 case 语句贯穿）

    /* 模块解析选项 */
    "moduleResolution": "node",            // 选择模块解析策略： 'node' (Node.js) or 'classic' (TypeScript pre-1.6)。默认是classic
    "baseUrl": "./",                       // 用于解析非相对模块名称的基目录
    "paths": {},                           // 模块名到基于 baseUrl 的路径映射的列表
    "rootDirs": [],                        // 根文件夹列表，其组合内容表示项目运行时的结构内容
    "typeRoots": [],                       // 包含类型声明的文件列表
    "types": [],                           // 需要包含的类型声明文件名列表
    "allowSyntheticDefaultImports": true,  // 允许从没有设置默认导出的模块中默认导入。

    /* Source Map Options */
    "sourceRoot": "./",                    // 指定调试器应该找到 TypeScript 文件而不是源文件的位置
    "mapRoot": "./",                       // 指定调试器应该找到映射文件而不是生成文件的位置
    "inlineSourceMap": true,               // 生成单个 soucemaps 文件，而不是将 sourcemaps 生成不同的文件
    "inlineSources": true,                 // 将代码与 sourcemaps 生成到一个文件中，要求同时设置了 --inlineSourceMap 或 --sourceMap 属性

    /* 其他选项 */
    "experimentalDecorators": true,        // 启用装饰器
    "emitDecoratorMetadata": true,         // 为装饰器提供元数据的支持
    "strictFunctionTypes": false           // 禁用函数参数双向协变检查。
  },
  /* 指定编译文件或排除指定编译文件 */
  "include": [
      "src/**/*"
  ],
  "exclude": [
      "node_modules",
      "**/*.spec.ts"
  ],
  "files": [
    "core.ts",
    "sys.ts"
  ],
  // 从另一个配置文件里继承配置
  "extends": "./config/base",
  // 让IDE在保存文件的时候根据tsconfig.json重新生成文件
  "compileOnSave": true // 支持这个特性需要Visual Studio 2015， TypeScript1.8.4以上并且安装atom-typescript插件
}