Day04:【TypeScript 学起来】tsconfig.json 有哪些可以设定

Q: 祈求程序不会有bug该拜什麽神？
A: 拜雍正，专治八阿哥

// XDD 今天来讲tsconfig.json，觉得新手这篇可以先 pass，大概知道有 tsconfig.json 可以设定就好，可以先用预设的，有需要设定再去了解及修改。（搞得我好像不是新手一样，重点是设定真的太多了哈哈

tsconfig.json 是什麽

TypeScript 编译设定的文件。

如何产生 tsconfig.json

在上一篇有使用过，这边再提一下，在目录执行：

tsc --init

这时候就产生了 tsconfig.json。

tsconfig.json 的预设

一开始我们拿到的 tsconfig 档，里面的预设就有这些：

{
    "compilerOptions": {
        "target": "es5",  //指定编译生成的JS版本
        "module": "commonjs", //指定生成哪种模组
        "strict": true,  //启用所有严格类型检查选项
        "esModuleInterop": true,  //兼容模组导入的方式
        "skipLibCheck": true,     // 不会检查引入的函式库档案       
        "forceConsistentCasingInFileNames": true //确保档案的大小写一致
    }
}

tsconfig.json 还有哪些设定

除了预设 compilerOptions 的设定外，还有：

compileOnSave : 在最上层设定 compileOnSave 属性，可已让IDE编辑器在储存档案的时候根据tsconfig.json重新产生编译档案。
compilerOptions: 所有的编译设定都会写在 compilerOptions 里，我们一开始取得的预设设定就在 compilerOptions 。
include: 指定编译需要编译的文件或目录。
exclude: 指定编译器需要排除的文件或文件夹。如默认排除 node_modules 文件夹。
- include 及 exclude 最常见的万用字元包括：
- *-表示匹配0至多个字元(不包含分隔符号)
- ?-匹配一个相符字元（不包含分隔符号）
- **/-表示匹配所有子资料夹
extends: 引入其他配置档案，继承配置。default 包含当前目录和子目录下所有 TypeScript 文件。
files: files的值为包含相对或绝对文件路径的list，表示需要编译的文件。default 包含当前目录和子目录下所有 TypeScript 文件。若指定 files，则只会编译指定的档案。
references: 指定要引用的专案。有时候为了方便将前端项目和後端node项目放在同一个目录下开发，两个项目依赖同一个配置文件和通用文件。
typeAcquisition: 设置自动引入函式库相关定义文件。包含 3 个子属性：
- enable : 布林类型，是否开启自动引入库类型定义文件(.d.ts)，默认为 false；
- include : 数组类型，允许自动引入的函式库名，如：["jquery", "lodash"]；
- exculde : 数组类型，排除的函式库名。

overall

{
  "compileOnSave": false,    //编辑器在储存档案的时候根据tsconfig.json重新产生编译档案
  "compilerOptions": {

    /* 基本选项 */
    "target": "es5",    // 指定编译生成的JS版本: 'ES3' (default), 'ES5', 'ES6'/'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'
    "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' 文件
    "declarationMap": true,   //生成宣告档案的 sourceMap
    "sourceMap": true,   // 生成相应的 '.map' 文件
    "outFile": "./",     // 将输出文件合并为一个文件
    "outDir": "./",      // 指定输出目录
    "rootDir": "./",     // 档案应该要被放置的位置
    "composite": true,       // 是否编译构建引用项目
    "tsBuildInfoFile": "./", // 指定文件存储增量编译信息，默认为 tsconfig.tsbuildinfo
    "removeComments": true,  // 删除编译後的所有的注释
    "noEmit": true,          // 不产生输出档案
    "importHelpers": true,   // 从 tslib 导入辅助工具函数
    "isolatedModules": true,  // 将每个文件做为单独的module（与 'ts.transpileModule' 类似）.

    /* 严格的类型检查选项 */
    "strict": true,           // 启用所有严格类型检查选项                    
    "noImplicitAny": true,    // 在表达式和声明上有隐含的 any类型时报错                   
    "strictNullChecks": true,  // 启用严格的 null 检查                  
    "strictFunctionTypes": true,    //启用检查function型别        
    "strictBindCallApply": true,   //启用对 bind, call, apply 更严格的型别检查           
    "strictPropertyInitialization": true,     //启用class实例属性的赋值检查
    "noImplicitThis": true,    //当 this 表达式值为 any 类型的时候，生成一个错误                
    "alwaysStrict": true,     // 以严格模式检查每个module，并在每个文件里加入 'use strict'                  

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

    /* 模组选项 */
    "moduleResolution": "node",  // 选择模组解析策略： 'node' (Node.js) or 'classic' (TypeScript pre-1.6)
    "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,          // 为装饰器提供元数据的支持
        
    /* 进阶选项 */
    "skipLibCheck": true,                     //不会检查引入的函式库档案
    "forceConsistentCasingInFileNames": true // 确保档案的大小写一致
  },
  "files":[
        "hello.ts"                           //若指定 files，则只会编译指定的 hello.ts 档案。
  ],
  "exclude": [                               //指定编译器需要排除的文件或文件夹
    "node_modules"
  ],
  "extends": "./tsconfig.base.json",         //把基础配置抽离成tsconfig.base.json档案，然後引入
  
  "references": [                             // 指定依赖的程序路径
     {"path": "./common"}
  ],
  "typeAcquisition": {                       //自动引入函式库相关定义文件(.d.ts)。
      "enable": false,
      "exclude": ["jquery"],
      "include": ["jest"]
  }
}

其实在compilerOptions可能还有几个漏掉的设定，但我也还没很理解用途。但後面有用到的设定也会笔记。