隠れ家 - 照见五蕴皆空

TSC

由于 ts 代码不能直接运行，通常需要将其转换为 js 代码再运行。而将 ts 代码转换为 js 代码的工具就是 tsc

tsc 全称是 TypeScript Compiler, 即TypeScript编译器

全局安装

npm install -g typescript

安装完成后，全局会有 tsc 命令，可通过该命令编译ts文件

tsc main.ts

在编译ts文件时的编译配置则是通过项目下的 tsconfig.json 文件进行配置的。

可以通过下面的命令生成该文件

tsc --init

更多命令请查看 tsc -h

tsconfig.json 详解

files

files 字段用于指明需要 tsc 编译的一个或多个 ts 文件

{
  "files": ["index.ts", "main.ts"]
}

include

include 字段用于指明需要被 tsc 编译的文件或文件夹列表

{
  "include": ["src"]
}

exclude

exclude 字段用于排除不需要 tsc 编译的文件或文件夹列表

{
  "exclude": ["test"]
}

仅排除 include 包含的文件，对 files 无影响

compileOnSave

compileOnSave 是否需要在保存时候自动触发 tsc 编译

{
  "compileOnSave": false
}

extends

extends 字段用于指明继承已有的 tsconfig 配置规则文件，例如官方推荐的包@tsconfig/recommended

该包的配置文件如下

{
  "compilerOptions": {
    "target": "ES2015",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "Recommended"
}

通过 extends 使用时, 可以覆盖配置

{
  "extends": "@tsconfig/recommended/tsconfig.json",
  "compilerOptions": {
    "target": "ES2016"
  }
}

实际项目中的配置可以参考 https://github.com/tsconfig/bases/

compilerOptions

compilerOptions 用来配置编译选项，其值为一个对象，由以下字段组成

target

arget 字段指明经过 TSC 编译后的 ECMAScript 代码语法版本

lib

lib 字段是用于为了在我们的代码中显示的指明需要支持的 ECMAScript 语法或环境对应的类型声明文件。

例如代码使用到浏览器中的对象 window、document等，这些全局对象对于 tsc 默认是不能识别的，因此需要手动添加

{
  "compilerOptions": {
    "target": "ES5",
    "lib": ["ES5", "ES6", "DOM"]
  }
}

module

module 字段指明 tsc 编译后的代码应该符合何种模块化方案，可设置的值有：none, commonjs, amd, system, umd, es2015, es2020, 或 ESNext，默认值为 none

esModuleInterop

esModuleInterop 字段指明是否支持合成导入。

假设存在 commonjs 模块，当使用 esm 代码引入该模块时，由于 commonjs 模块没有默认导出内容，因此需要自动化合成该模块的导出。具体内容可以查看这篇文章 esModuleInterop 到底做了什么？

moduleResolution

moduleResolution 声明如何处理模块，可设置的值有：classic、node，会根据 module 字段决定默认值

baseUrl & paths

baseUrl：设置基本目录以解析非绝对模块名称（定义一个根目录，以此进行绝对文件路径解析）

paths：用于设置模块名或路径映射列表，这样就可以简写项目中自定义模块的文件路径。

{
  "compilerOptions": {
    // 注意：baseUrl 必选，与 paths 成对出现，以 tsconfig.json 文件所在目录开始
    "baseUrl": ".",
    "paths": {
      // 映射列表
      "@/*": [
        "src/*"
      ],
      "moduleA": [
        "src/libs/moduleA"
      ]
    }
  }
}
 
import Toast from '@/components/Toast.ts' // 模块实际位置: src/components/Toast.ts
import TestModule from 'moduleA/index.js' // 模块实际位置: src/libs/moduleA/index.js

rootDir & outDir

rootDir：指定 TypeScript 识别读取的根目录，用于所有非声明输入文件的最长公共路径

outDir：输出目录，即 tsc 编译后的文件输出的文件夹路径

jsx

如果是有 jsx 语法需要支持的项目，可以设置值 preserve、react 等

{
  "compilerOptions": {
    "jsx": "preserve" // 一般 preserve 即可
  }
}

importHelpers

importHelpers 决定是否启用从 tslib 库引入语法降级辅助函数，以避免重复冗余的辅助函数声明

experimentalDecorators

experimentalDecorators 声明是否启实验性用装饰器模式。

noEmit

noEmit 设置是否输出 js 文件，一般是设置为 false，将打包等工作交给 Webpack 等工具

TypeScript 配置文件详解

TSC