通俗易懂的TypeScript总结

01 TypeScript是什么

1.1 TypeScript 与 JavaScript 的区别

TypeScript	JavaScript
JavaScript 的超集用于解决大型项目的代码复杂性	一种脚本语言，用于创建动态网页。
社区的支持仍在增长，而且还不是很大	大量的社区支持以及大量文档和解决问题的支持
可以在编译期间发现并纠正错误	作为一种解释型语言，只能在运行时发现错误
支持 ES3，ES4，ES5 和 ES6 等	不支持编译其他 ES3，ES4，ES5 或 ES6 功能
强类型，支持静态和动态类型	弱类型，没有静态类型选项
支持模块、泛型和接口	不支持模块，泛型或接口
最终被编译成 JavaScript 代码，使浏览器可以理解	可以直接在浏览器中使用

1.2 获取 TypeScript

命令行的 TypeScript 编译器可以使用 Node.js 包来安装。

1.安装 TypeScript

$ npm install -g typescript

2.编译 TypeScript 文件

$ tsc helloworld.ts
helloworld.ts => helloworld.js

02 TypeScript基础类型

2.1 Boolean 类型

let isDone: boolean = false;
// ES5：var isDone = false;

2.2 Number 类型

let count: number = 10;
// ES5：var count = 10;

2.3 String 类型

let name: string = "Semliker";
// ES5：var name = 'Semlinker';

2.4 Array 类型

let list: number[] = [1, 2, 3];
// ES5：var list = [1,2,3];

let list: Array<number> = [1, 2, 3]; // Array<number>泛型语法
// ES5：var list = [1,2,3];

2.5 Enum 类型

使用枚举我们可以定义一些带名字的常量。 使用枚举可以清晰地表达意图或创建一组有区别的用例。 TypeScript 支持数字的和基于字符串的枚举。

1.数字枚举

enum Direction {
   
  NORTH,
  SOUTH,
  EAST,
  WEST,
}

let dir: Direction = Direction.NORTH;

上面的枚举示例代码经过编译后会生成以下代码：

"use strict";
var Direction;
(function (Direction) {
   
  Direction[(Direction["NORTH"] = 0)] = "NORTH";
  Direction[(Direction["SOUTH"] = 1)] = "SOUTH";
  Direction[(Direction["EAST"] = 2)] = "EAST";
  Direction[(Direction["WEST"] = 3)] = "WEST";
})(Direction || (Direction = {
   }));
var dir = Direction.NORTH;

2.字符串枚举

在一个字符串枚举里，每个成员都必须用字符串字面量，或另外一个字符串枚举成员进行初始化。

enum Direction {
   
  NORTH = "NORTH",
  SOUTH = "SOUTH",
  EAST = "EAST",
  WEST = "WEST",
}

以上代码对于的 ES5 代码如下：

"use strict";
var Direction;
(function (Direction) {
   
    Direction["NORTH"] = "NORTH";
    Direction["SOUTH"] = "SOUTH";
    Direction["EAST"] = "EAST";
    Direction["WEST"] = "WEST";
})(Direction || (Direction = {
   }));

3.异构枚举

异构枚举的成员值是数字和字符串的混合：

enum Enum {
   
  A,
  B,
  C = "C",
  D = "D",
  E = 8,
  F,
}

以上代码对于的 ES5 代码如下：

"use strict";
var Enum;
(function (Enum) {
   
    Enum[Enum["A"] =