• 导读
• 正文
  • 编译器
  • tsconfig,json
    • 编译选项列表 1.5之后tsconfig.json
    • 指定编译文件
    • 编译选项列表
    • 编译文件列表相关
    • 申明文件列表配置
    • 继承配置文件
  • 工程引用
    • 工程引用配置
    • built模式
    • solution模式
  • Jsvascript
  • 三斜线指令

导读

配置介绍，知道即可

正文

编译器

1. npm install -g typescript // 安装TS编译器
2. tsc --help （--all）//基本（完整）帮助信息
3. tsc --version // 版本
4. 编译文件
   tsc xxx.ts
   tsc xx.ts xxx.ts
   tsc *.ts
5. tsc --watch 观察者编译
   tsc --watch --preserveWatchOutput 观察者模式保留编译信息
6. 编译选项接受参数 tsc -v -locale zh-CN
7. tsc --strict 严格与非严格类型检查，相当于启动了多个严格编译选项，具体略 p331
8. tsc --alwaysStrict 启用JS严格模式 ES5引入
9. TS官网上的Compilter Options 编译选项列表提供最新

tsconfig,json

编译选项列表 1.5之后tsconfig.json

1. 编译文件列表
2. 编译选项
3. tsconfig.json 配置文件的继承关系
4. 工程之间的引用关系

指定编译文件

• tsc xxx.ts --project tsc.json

编译选项列表

• conpilerOptions 略

编译文件列表相关

• --listFiles 打印编译文件列表
• --files 默认编译文件列表数组1
• include 、exclude 更好匹配编译文件数组 ["bar/*/.ts"]

申明文件列表配置

1. ts默认 node_modules/@types 为申明文件根目录
2. --typeRoots 改变申明文件根目录 typeRoots:["./typings"]
3. --types 选择配置的申明文件 types:["jquery"]

继承配置文件

• 顶层配置 extends："./xxx.ts" 继承 tsconfig.base.json，如果使用非相对路径，将会从 node_modules找
• $ tsc --showConfig 编译展示配置信息

工程引用

  /**
   * 大工程->拆分为子工程
   * 子工程之间互相依赖，分别管理
   * 每个子工程进行独立配置与类型检查
   * 修改一个工程按需对其他引用工程进行类型检查提高效率
   * 逻辑拆分，可重用组件，与外部交互
   * 工程化实现：
   * 1. references [{"path":"./pkg1"},{"path":"./pkg2"}] //设置要引用的工程
   * 2. --composite：true 被其他工程引用（必须启用 --declaration,include/files 必须包含所有源文件）
   * 3. --declarationMap 为 .d.ts 生成SourceMap，在代码编辑器中跳转到实现位置
   */

工程引用配置

1. 如果不工程化的话，tsc只能编译当前目录下有tsconfig的文件夹下的文件，无法全局关联编译
2. 所以需要用到构建模式配合工程引用配置
3. 工程化的项目就要用到工程化的编译

// app/
  // test/
    // index.ts
      export function add(x: number, y: number): number {
        return x + y;
      }
    tsconfig.json
      "compilerOptions": {
        "composite": true,
        "declarationMap": true,
      }
  // src/
    // index.spec.ts
      import { add } from '../src/index'
      if (add(1, 2) === 3) {
        console.log('pass');
      } else {
        console.log('failed');
      }
    // tsconfig.json
      "references": [
        {
          "path": "../src"
        }
      ],

built模式

• app/ => tsc --build test --verbose
• 增量构建，引用有改动就重新构建
• 打印构建信息
• src\tsconfig.tsbuildinfo 保存构建信息

solution模式

//app/tsconfig.json
  {
    "files": [],//设置为空否则重复编译
    "include": [],//设置为空否则重复编译
    "references": [
      {
        "path": "test"
      },
      {
        "path": "src"
      },
    ]
  }
  //=> tsc  --build test --verbose 

Jsvascript

1. 一个工程可能即存在TS又存在JS，TS工程中js也是一部分，就需要配置对js进行编译

• 比如，一个js工程向TS工程迁移，或者TS依赖某个js模块

2. --checkJs

• tsx xxx.js --allowJs --checkJs --outDir dist // 必须指定 outDir 不然会覆盖，而且要启用 allowJs

3. // @ts-nocheck

• 不会对这个js文件类型检查

4. // @ts-check

• 无论是否 --checkJs 都会对此js作类型检查

5. // @ts-ignore

• js中忽略某一行，不做类型检查

1. JSDoc 文档注释
   • TS能推断出大部分的JS类型信息，也能东JSDoc中获取类型信息

    /** JSDoc 添加文档注释工具
     * @typedef {number | string} NumberLikes //定义类型.相当于 type NumberLikes = number|string
     * @type {NumberLikes} // 指定变量类型,可以使用typedef定义的
     * @param {number} x [x=123] - A string param. // 参数类型,指定默认值
     * @returns {number} // 返回值类型
     * @extends {Base} // 指定继承
     */

三斜线指令

• 目前不推荐使用，用模块可以解决问题
  1. /// <reference path=""> 申明源文件依赖关系
  2. --outFile 合并代码利用多个三斜线指令进行文件排序
  3. --noResolve 忽略所有三斜线
  4. /// <reference type=""> 对DefiniteltType[安装在node_module/@type下的]申明文件的依赖
  5. /// <reference lib=""> 对内置申明文件依赖
  6. --target 设置目标运行环境，将目标运行环境（ES5）的申明文件添加到编译列表
  7. --lib 额外添加对内置申明文件的依赖，比如--target设置为ES5 ，但是用到了ES7的函数就需要在lib添加es7
  8. 一般在项目中采用 polyfill 抹平js运行环境api的差异