最全TypeScript 入门基础教程，看完就会

想学习 TypeScript 的小伙伴看过来，本文将带你一步步学习 TypeScript 入门相关的十四个知识点，详细的内容大纲请看下图：

一、TypeScript 是什么

TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。

TypeScript 提供最新的和不断发展的 JavaScript 特性，包括那些来自 2015 年的 ECMAScript 和未来的提案中的特性，比如异步功能和 Decorators，以帮助建立健壮的组件。下图显示了 TypeScript 与 ES5、ES2015 和 ES2016 之间的关系：

1.1 TypeScript 与 JavaScript 的区别

1.2 获取 TypeScript

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

1.安装 TypeScript

$ npm install -g typescript

2.编译 TypeScript 文件

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

当然，对于刚入门 TypeScript 的小伙伴，也可以不用安装 typescript，而是直接使用线上的 TypeScript Playground 来学习新的语法或新特性。

二、TypeScript 基础类型

2.1 Boolean 类型

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

2.2 Number 类型

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

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;

默认情况下，NORTH 的初始值为 0，其余的成员会从 1 开始自动增长。换句话说，Direction.SOUTH 的值为 1，Direction.EAST 的值为 2，Direction.WEST 的值为 3。上面的枚举示例代码经过编译后会生成以下代码：

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

let dir: Direction = Direction.NORTH;

当然我们也可以设置 NORTH 的初始值，比如：

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

2.字符串枚举

在 TypeScript 2.4 版本，允许我们使用字符串枚举。在一个字符串枚举里，每个成员都必须用字符串字面量，或另外一个字符串枚举成员进行初始化。

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 代码如下：

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

通过观察上述生成的 ES5 代码，我们可以发现数字枚举相对字符串枚举多了 “反向映射”：

console.log(Enum.A) //输出：0console.log(Enum[0]) // 输出：A

2.6 Any 类型

在 TypeScript 中，任何类型都可以被归为 any 类型。这让 any 类型成为了类型系统的顶级类型（也被称作全局超级类型）。

let notSure: any = 666;notSure = "Semlinker";notSure = false;

any 类型本质上是类型系统的一个逃逸舱。作为开发者，这给了我们很大的自由：TypeScript 允许我们对 any 类型的值执行任何操作，而无需事先执行任何形式的检查。比如：

let value: any;value.foo.bar; // OKvalue.trim(); // OKvalue(); // OKnew value(); // OKvalue[0][1]; // OK

在许多场景下，这太宽松了。使用 any 类型，可以很容易地编写类型正确但在运行时有问题的代码。如果我们使用 any 类型，就无法使用 TypeScript 提供的大量的保护机制。为了解决 any 带来的问题，TypeScript 3.0 引入了 unknown 类型。

2.7 Unknown 类型

就像所有类型都可以赋值给 any，所有类型也都可以赋值给 unknown。这使得 unknown 成为 TypeScript 类型系统的另一种顶级类型（另一种是 any）。下面我们来看一下 unknown 类型的使用示例：

let value: unknown;

value = true; // OK
value = 42; // OK
value = "Hello World"; // OK
value = []; // OK
value = {}; // OK
value = Math.random; // OK
value = null; // OK
value = undefined; // OK
value = new TypeError(); // OK
value = Symbol("type"); // OK

对 value 变量的所有赋值都被认为是类型正确的。但是，当我们尝试将类型为 unknown 的值赋值给其他类型的变量时会发生什么？

let value: unknown;let value1: unknown = value; // OKlet value2: any = value; // OKlet value3: boolean = value; // Errorlet value4: number = value; // Errorlet value5: string = value; // Errorlet value6: object = value; // Errorlet value7: any[] = value; // Errorlet value8: Function = value; // Error

unknown 类型只能被赋值给 any 类型和 unknown 类型本身。直观地说，这是有道理的：只有能够保存任意类型值的容器才能保存 unknown 类型的值。毕竟我们不知道变量 value 中存储了什么类型的值。

现在让我们看看当我们尝试对类型为 unknown 的值执行操作时会发生什么。以下是我们在之前 any 章节看过的相同操作：

let value: unknown;

let value1: unknown = value; // OK
let value2: any = value; // OK
let value3: boolean = value; // Error
let value4: number = value; // Error
let value5: string = value; // Error
let value6: object = value; // Error
let value7: any[] = value; // Error
let value8: Function = value; // Error

将 value 变量类型设置为 unknown 后，这些操作都不再被认为是类型正确的。通过将 any 类型改变为 unknown 类型，我们已将允许所有更改的默认设置，更改为禁止任何更改。

2.8 Tuple 类型

众所周知，数组一般由同种类型的值组成，但有时我们需要在单个变量中存储