TypeScript简介

TypeScript是一个编译到纯JS的有类型定义的JS超集.

JavaScript的超集

TypeScript特性

类型批注

TypeScript通过类型批注提供在编译时启动类型检查的静态类型。这是可选的，而且可以忽略而使用JavaScript常规的动态类型。

function Add(left: number, right: number): number {
    return left + right;
}

对于基本类型的批注是number、bool和string。而弱或动态类型的结构则是any类型。

类型批注可以被导出到一个单独的“声明文件”，以让使用类型已被编译为JavaScript的TypeScript脚本中的类型信息仍可用。批注可以为一个现有的JavaScript库声明，就像已经为Node.js和jQuery所做的那样。

当类型没有给出时，TypeScript编译器利用类型推断来推断类型。如果由于缺乏声明而不能推断出类型，那么它的类型被视作默认的动态any类型。

声明文件

当一个TypeScript脚本被编译时，有一个产生作为编译后的JavaScript的组件的一个接口而起作用的声明文件（具有扩展名.d.ts）的选项。在这个过程中编译器基本上带走所有的函数和方法体而仅保留所导出类型的批注。当第三方开发者从TypeScript中使用它时，由此产生的声明文件就可以被用于描述一个JavaScript库或模块导出的虚拟的TypeScript类型。DefinitelyTyped 项目已经有超过 1300 个 JavaScript 类库的声明文件, 覆盖了几乎所有的常见类库.

TypeScript发展现状

NPM下载量

npm下载量

谷歌趋势

谷歌趋势

2018开发者调查报告

image.png

使用TypeScript的好处

• 加上了类型系统，对于阅读代码的人和编译器都是友好的。对阅读者来说，类型定义加上IDE的智能提示，增强了代码的易读型；对于编译器来说，类型定义可以让编译器揪出隐藏的bug。
• 类型系统+静态分析检查+智能感知/提示，使大规模的应用代码质量更高，运行时bug更少，更方便维护。
• 有类似VSCode这样配套的IDE支持，方便的查看类型推断和引用关系，可以更方便和安全的进行重构，再也不用全局搜索，一个个修改了。
• 给应用配置、应用状态、前后端接口及各种模块定义类型，整个应用都是一个个的类型定义，使协作更为方便、高效和安全。

1. 静态检查

这类问题是ESLint等工具检测不出来的。

低级错误

const peoples = [{
  name: 'tim',
  age: 20
}, {
  name: 'alex',
  age: 22
}];
const sortedPeoples = peoples.sort((a, b) => a.name.localCompare(b.name));

复制代码执行TS编译命令tsc，检测到错误：

error TS2339: Property 'localCompare' does not exist on type 'string'.

复制代码如果是在支持TS的IDE中（VS Code、WebStorm等），则不需等到编译，在IDE中就可以非常明显在localCompare位置提示出错误信息。
localCompare这种输入手误（或者手滑不小心删除或添加了字符）时有发生，如果没有编译器静态检查，那有可能就是一个字符引发的血案：埋下了一个隐藏的运行时bug。如果在SPA应用中，这个问题需要较长的操作路径才能被发现，一旦用户触发这个地雷，那它就会爆炸：应用直接crash（在没有页面刷新的SPA中问题尤为凸显）。

2. 非空判断

let data = {
  list: null,
  success: true
};
const value = data.list.length;

复制代码执行tsc编译：

error TS2532: Object is possibly 'null'.

复制代码data.list.length这行直接引用了data.list的属性，但data.list的数据格式有不是数组的可能性，这种场景在前端处理后端接口返回时经常出现，接口返回的数据层级可能非常深，如果在某一级缺少了非空判断逻辑，那就意味着埋下了一个不知道什么时候就会引爆的炸弹。

3. 类型推断

const arr = [];
arr.toUpperCase();

class Cat {
  miao() {}
}

class Dog {
  wang() {}
}
const cat = new Cat();
cat.wang();

复制代码执行tsc编译：

error TS2339: Property 'toUpperCase' does not exist on type 'any[]'.
error TS2339: Property 'wang' does not exist on type 'Cat'.

复制代码TS有类型推断，给不同类型的执行对象调用错误的方法都将被检查出来。

4. 面向对象编程增强

访问权限控制

class Person {
  protected name: string;
  public age: number;
  constructor(name: string) { this.name = name; }
}

class Employee extends Person {
  static someAttr = 1;
  private department: string;

  constructor(name: string, department: string) {
    super(name);
    this.department = department;
  }
}
let howard = new Employee("Howard", "Sales");
console.log(howard.name);

复制代码执行tsc编译：

error TS2445: Property 'name' is protected and only accessible within class 'Person' and its subclasses.

复制代码Person中name属性是protected类型，只能在自己类中或者子类中使用。访问权限控制在面向对象编程中很有用，他能帮忙我们做到信息隐藏，JS面向对象编程的一个大问题就是没有提供原生支持信息隐藏的方案（很多时候都是通过约定编码方式来做）。信息隐藏有助于更好的管理系统的复杂度，这在软件工程中显得尤为重要。

5. 接口

interface Machine {
  move(): void
}

interface Human {
  run(): void
}

class Base {
}

class Robot extends Base implements Machine, Human {
  run() {
    console.log('run');
  }
  move() {
    console.log('move');
  }
}

复制代码Robot类可以继承Base类，并实现Machine和Human接口，这种可以组合继承类和实现接口的方式使面向对象编程更为灵活、可扩展性更好。

6. 泛型

class GenericNumber<T> {
    zeroValue: T;
    add: (x: T, y: T) => T;
}

let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };

复制代码定义了一个模板类型T，实例化GenericNumber类时可以传入内置类型或者自定义类型。泛型（模板）在传统面向对象编程语言中是很常见的概念了，在代码逻辑是通用模式化的，参数可以是动态类型的场景下比较有用。

7. 类型系统

interface SystemConfig {
  attr1: number;
  attr2: string;
  func1(): string;
}

interface ModuleType {
  data: {
    attr1?: string,
    attr2?: number
  },
  visible: boolean
}

const config: SystemConfig = {
  attr1: 1,
  attr2: 'str',
  func1: () => ''
};

const mod: ModuleType = {
  data: {
    attr1: '1'
  },
  visible: true
};

复制代码我们定义了一个系统配置类型SystemConfig和一个模块类型ModuleType，我们在使用这些类型时就不能随便修改config和mod的数据了。每个被调用方负责自己的对外类型展现，调用者只需关心被调用方的类型，不需关心内部细节，这就是类型约束的好处，这对于多人协作的团队项目非常有帮助。

8. 模块系统增强

namespace N {
  export namespace NN {
    export function a() {
      console.log('N.a');
    }
  }
}

N.NN.a();

复制代码TS除了支持ES6的模块系统之外，还支持命名空间。这在管理复杂模块的内部时比较有用。

TypeScript开发及迁移

编译上下文(https://www.tslang.cn/docs/handbook/compiler-options.html)

{
  "compilerOptions": {

    /* 基本选项 */
    "target": "es5",                       // 指定 ECMAScript 目标版本: 'ES3' (default), 'ES5', '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' 文件
    "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)
    "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          // 为装饰器提供元数据的支持
  }
}

转换器

1. TypeScript + Babel

2. Babel 7

Babel集成typescript

Vue迁移

Vue的迁移可以参考TypeScript-Vue-Starter

1. 配置编译上下文tsconfig.json

{
    "compilerOptions": {
      // 与 Vue 的浏览器支持保持一致
      "target": "es5",
      // 这可以对 `this` 上的数据属性进行更严格的推断
      "noImplicitThis": true,
      // 如果使用 webpack 2+ 或 rollup，可以利用 tree-shake:
      "module": "commonjs",
      "moduleResolution": "node",
      // 支持webpack别名
      "baseUrl": ".",
      "paths": {
          "@/*": ["src/*"]
      }
    },
    "allowJs": true
  }

2. 为单文件组件配置vue-shims.d.ts文件

declare module "*.vue" {
    import Vue from "vue";
    export default Vue;
}

3. webpack 增加ts-loader(或awesome-typescript-loader)

{
    test: /\.ts$/,
    exclude: /node_modules|vue\/src/,
    loader: 'ts-loader',
    options: {
        appendTsSuffixTo: [/\.vue$/]
    }
}

4. 安装ts相关的npm包

npm i typescript ts-loader

5. 根据报错信息补全@types和类型批注

npm i @types/node @types/vue-router

6. 其他TSlinter