从零开始学习typescript系列2: typescript配置文件ts.config.js之详细解释

基本了解

tsconfig.json 是 ts 支持的配置文件

大体可以分为两个部分描述，

• 第一部分：编译规则配置(compilerOptions)，
• 第二个部分：哪些文件进行编译(files,include,exclude)

{
    "compilerOptions": {},
    "files": [], 
    "include": [],
    "exclude": [] 
}
1
2
3
4
5
6

# ts配置相关命令
tsc #  默认使用最近配置文件
tsc --all #   所有编译选项 
tsc --all  | grep "keyofStringsOnly" #  某一个编译选项 
tsc --init #  可以生产默认的配置文件
1
2
3
4
5

demo:常见配置

{
  // files: 适用于比较小型的项目，规定几个特定的文件
  // 将compilerOption的编译规则应用于index.ts下
  "files": ["index.ts"], 
  // include: 所有src目录和test目录下的文件都会被编译
  "include":["src/**/*", "test/**/*"] 
  // exclude: 不需要被编译的文件目录
  "exclude": [ "node_modules","dist","**/*.test.ts"], 
  "compilerOptions": { 
    // 用于抑制隐式 any 索引错误的报告。在ts5.5版本是废弃的属性    
    "suppressImplicitAnyIndexErrors": true,
    // 忽略废弃警告
    "ignoreDeprecations": "5.0", 
    // 跳过对所有声明文件（.d.ts 文件）的类型检查
    // 跳过类型检查可能会隐藏潜在的类型不一致问题，建议仅在明确的情况下使用
    "skipLibCheck": true,
    // types: 告诉 ts 编译器要引入哪些第三方库或模块的类型声明
    // 当 TypeScript 编译器遇到使用 React 或 Lodash 的代码时，它会根据指定的类型声明文件进行类型检查和推断，以确保你的代码与这些库的 API 相符合。
    "types": ["react", "lodash"],
    // 没有设置baseUrl: import { example } from "./src/hello/world
    // 设置了baseUrl: import { example } from "hello/world
    "baseUrl": ".",
    // paths必须和baseUrl联合使用
    // 设置paths后:import from '@/components/Button'  import from  相当于  src/components/Button
    "paths": {
        "@/*": ["src/*"]
     },
    // lib: 引入ES功能库，如想在项目中用js中Set，Map，promise等，需引入es2015
    "lib": ["es6", "dom"],  
    //  编译成哪个版本的js，es3,es5,es6...
    "target": "es5",   
    // 哪个模块规范:  cjs,amd,umd,esm
    "module": "commonjs",  
    // 选择模块解析策略 比如 在node_modules中查找路径
    // 'node':  Node.js’ CommonJS implementation  =》 ts 社区最常用的，推荐大多数项目
    // 'node16' or 'nodenext': Node.js’ ECMAScript Module Support from TypeScript 4.7 onwards
    // 'classic': used in TypeScript before the release of 1.6. 
    "moduleResolution": "node", 
    "experimentalDecorators": true,  // 启用实验性的ES装饰器
    // 允许从没有设置默认导出的模块中默认导入
    // false: 必须 import * as React from 'react 
    // true: 可以 import React from 'react'
    "allowSyntheticDefaultImports": true,   
    // sourceMap： 把 ts 文件编译成 js 文件的时候，同时生成对应的 map 文件
    "sourceMap": true,   
    "strict": true,  // 启用所有严格类型检查选项
    // noImplicitAny: 不允许用any，如果初学ts，建议项目部太复杂的情况下，可以借此来进行限制，前置自己培养对ts的理解 (实际情况不是)
    "noImplicitAny": true,  // 在表达式和声明上有隐含的 any类型时报错
    "alwaysStrict": true,  // 以严格模式检查模块，并在每个文件里加入 'use strict'
    "declaration": true,   // 生成相应的.d.ts文件
    // 删除编译后的所有的注释
    "removeComments": true,   
    "noImplicitReturns": true,  // 不是函数的所有返回路径都有返回值时报错
    "importHelpers": true,  // 从 tslib 导入辅助工具函数
    // typeRoots: 指定类型声明文件的根目录路径
    "typeRoots": [
      "./node_modules/@types/", // 这是个目录
      "./types" // 这是个目录
    ],
    "outDir": "./dist",
    "rootDir": "./src",
    "keyofStringsOnly": false, 
  },

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65