TypeScript-速通笔记

TypeScript 速通

---

什么是 TypeScript?

TypeScript 是 JS 的超集，主要提供了类型系统和ES6的支持。

快速开始

引入例子： hello-typescript.ts

function sayHello(person: string) {
  return `hello${person}`;
}

// let user = 'Tom';
let user = [1, 2, 3];   // 改变 user 为数组
console.log(sayHello(user));

export {}

然后执行

tsc hello-typescript.ts

这时候会生成一个编译好的文件 hello-typescript.js：

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
function sayHello(person) {
    return "hello".concat(person);
}
// let user = 'Tom';
var user = [1, 2, 3]; // 改变 user 为数组
console.log(sayHello(user));

当 user 为数组时会报错！！！

error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'

但还是生成js文件↑↑↑

TypeScript 只会进行静态检查，如果发现有错误，编译的时候就会报错。

TypeScript 中，使用 : 指定变量的类型，: 的前后有没有空格都可以。

上述例子中，我们用 : 指定 person 参数类型为 string。但是编译为 js 之后，并没有什么检查的代码被插入进来。

TypeScript 编译的时候即使报错了，还是会生成编译结果，我们仍然可以使用这个编译之后的文件。

如果要在报错的时候终止 js 文件的生成，可以在 tsconfig.json 中配置 noEmitOnError 即可。关于 tsconfig.json

原始数据类型

JavaScript 的类型分为两种：原始数据类型（Primitive data types）和对象类型（Object types）。

原始数据类型包括：布尔值、数值、字符串、null、undefined 以及 ES6 中的新类型 Symbol。

布尔值

---

布尔值是最基础的数据类型，在 TypeScript 中，使用 boolean 定义布尔值类型：

let isBool: boolean = false;

使用 new Boolean() 返回的是一个 Boolean 对象，而不是布尔值：

let BooleanObj: boolean = new Boolean(1);
// 报错
// error TS2322: Type 'Boolean' is not assignable to type 'boolean'.
// 'boolean' is a primitive, but 'Boolean' is a wrapper object. Prefer using 'boolean' when possible.

但是直接调用 Boolean 可以返回一个 boolean 对象：

let booleanParam: boolean = Boolean(1);

在 TypeScript 中，boolean 是 JavaScript 中的基本类型，而 Boolean 是 JavaScript 中的构造函数。其他基本类型（除了 null 和 undefined）一样

数值

---

使用 number定义数值类型：

let num: number = 6;
let hexLiteral: number = 0xf00d;
// ES6 中的二进制表示法
let binaryLiteral: number = 0b1010;
// ES6 中的八进制表示法
let octalLiteral: number = 0o744;
let notANumber: number = NaN;
let infinityNumber: number = Infinity;

编译结果：

var num = 6;
var hexLiteral = 0xf00d;
// ES6 中的二进制表示法
var binaryLiteral = 10;
// ES6 中的八进制表示法
var octalLiteral = 484;
var notANumber = NaN;
var infinityNumber = Infinity;

字符串

---

使用 string 定义字符串类型：

let myName: string = 'Tom';
let myAge: number = 25;
// 模板字符串
let sentence: string = `Hello, my name is ${myName}.
I'll be ${myAge + 1} years old next month.`;

编译结果：

// 字符串
var myName = 'Tom';
var myAge = 25;
// 模板字符串
var sentence = "Hello, my name is ".concat(myName, ".\nI'll be ").concat(myAge + 1, " years old next month.");

空值

---

JavaScript 中没有空值 (void) 的概念，在 TypeScript 中，可以使用 void 来表示没有任何返回值的函数：

function fn(): void {
    console.log('void function')
}

声明一个 void 类型的变量没有什么用，因为你只能将它赋值为 undefined 和 null：

let unusable: void = undefined;

null 和 undefined

---

在 TypeScript 中，可以使用 null 和 undefined 来定义这两个原始数据类型：

let u: undefined = undefined;
let n: null = null;

与 void 的区别是，undefined 和 null 是所有类型的子类型。也就是说 undefined 类型的变量，可以赋值给 number 类型的变量：

let num: number = undefined;	// 不报错

而 void 类型的变量不能赋值给 number 类型的变量：

let v: void;
let str: string = v;
// 报错
 error TS2322: Type 'void' is not assignable to type 'string'.

任意值(any)

任意值（Any）用来表示允许赋值为任意类型。

认识任意值类型

---

如果是一个普通类型，在赋值过程中改变类型是不被允许的：

let myFavoriteNumber: string = 'seven';
myFavoriteNumber = 7;
// error TS2322: Type 'number' is not assignable to type 'string'

但如果是 any 类型，则允许被赋值为任意类型。

let myFavoriteNumber: any = 'seven';
myFavoriteNumber = 7;

任意值的属性和方法

---

在任意值上访问任何属性都是允许的：

let anyThing: any = 'hello';
console.log(anyThing.myName);
console.log(anyThing.myName.firstName);

也允许调用任何方法：

let anyThing: any = 'Tom';
anyThing.setName('Jerry');
anyThing.setName('Jerry').sayHello();
anyThing.myName.setFirstName('Cat');

可以认为，声明一个变量为任意值之后，对它的任何操作，返回的内容的类型都是任意值。

未声明类型的变量

---

变量如果在声明的时候，未指定其类型，那么它会被识别为任意值类型：

let something;
something = 'seven';
something = 7;something.setName('Tom');

等价于

let something: any;
something = 'seven';
something = 7;something.setName('Tom');

类型推断

TypeScript 会在没有明确的指定类型的时候推测出一个类型，这就是类型推论。

let myFavoriteNumber = 'seven';	// 赋了初值才会有类型推论
myFavoriteNumber = 7;
// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.

如果定义的时候没有赋值，不管之后有没有赋值，都会被推断成 any 类型而完全不被类型检查：

let myFavoriteNumber;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

只有被赋值的变量才会有类型推论，未赋值当做 any 处理

联合类型

联合类型（Union Types）表示取值可以为多种类型中的一种。联合类型使用 | 分隔每个类型。

// 允许
let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

// 错误
let myFavoriteNumber: string | number;
myFavoriteNumber = true;
// error TS2322: Type 'number' is not assignable to type 'string'

访问联合类型的属性和方法

---

当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候，我们只能访问此联合类型的所有类型里共有的属性或方法：

function getLength(something: string | number): number {
    return something.length;
}

// rror TS2339: Property 'length' does not exist on type 'string | number'.
//Property 'length' does not exist on type 'number'

必须访问 string 和 number 共有属性:

function getString(something: string | number): string {
    return something.toString();
}

联合类型的变量在被赋值的时候，会根据类型推论的规则推断出一个类型：

let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
console.log(myFavoriteNumber.length); // 5
myFavoriteNumber = 7;
console.log(myFavoriteNumber.length); // 编译时报错

// error TS2322: Type 'number' is not assignable to type 'string'.

对象的类型–接口

在 TypeScript 中，我们使用接口（Interfaces）来定义对象的类型。

什么是接口

在面向对象语言中，接口（Interfaces）是一个很重要的概念，它是对行为的抽象，而具体如何行动需要由类（classes）去实现（implement）。

interface Person {
    name: string;		// 确认属性
    age?: number;		// 可选属性
    [prop: string]: any;	// 任意属性
}

let tom: Person = {
    name: 'Tom',
    age: 18,
    gender: 'male'
}

上面的例子中，我们定义了一个接口 Person，接着定义了一个变量 tom，它的类型是 Person。这样，我们就约束了 tom 的形状必须和接口 Person 一致。

其中注意！！！定义的变量比接口少了一些属性是不允许的！多一些属性也是不允许的！

赋值的时候，变量的形状必须和接口的形状保持一致。

任意属性

---

参考上面的例子，使用 [prop: string] 定义了任意属性取得 string 的值。

同时需要注意的是，一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集：

interface Person {
    name: string;
    age?: number;
    [propName: string]: string;
}
let tom: Person = {
    name: 'Tom',
    age: 25,
    gender: 'male'
};

// 报错
// error TS2411: Property 'age' of type 'number' is not assignable to 'string' index type 'string'.
// error TS2322: Type '{ name: string; age: number; }' is not assignable to type 'Person'.
//  Property 'age' is incompatible with index signature.
//    Type 'number' is not assignable to type 'string'.

一个接口中只能定义一个任意属性。下面这样是允许的：

interface Person {
    name: string;
    age?: number;
    [propName: string]: string | number;	// 可选属性和确认属性是任意属性的子集，任意属性只存在一个
}
let tom: Person = {
    name: 'Tom',
    age: 25,
    gender: 'male'
};

只读属性

---

有时候我们希望对象中的一些字段只能在创建的时候被赋值，那么可以用 readonly 定义只读属性：

interface Goods {
  readonly goodId: number,
  price: number,
  name: string,
}

let shots: Goods = {
  goodId: 1001,
  price: 299,
  name: '鞋子'
}

shots.goodId = 1000;	// 报错 error TS2540: Cannot assign to 'goodId' because it is a read-only property.

上例中，使用 readonly 定义的属性 goodId 初始化后，又被赋值了，所以报错了。

注意，只读的约束存在于第一次给对象赋值的时候，而不是第一次给只读属性赋值的时候，所以在第一次给对象赋值时必须对只读属性赋值：

interface Goods {
  readonly goodId: number,
  price: number,
  name: string,
}

let tshirt: Goods = {
  price: 99,
  name: 'T恤'
}

tshirt.goodId = 2002;	// 报错
// 报错 error TS2741: Property 'goodId' is missing in type '{ price: number; name: string; }' but required in type 'Goods'

数组

在 TypeScript 中，数组类型有多种定义方式，比较灵活。

[类型 + 方括号] 表示法

---

let arr: number[] = [1, 2, 4, 8];

不允许出现其他类型：

let arr: number[] = [1, '2', 4, 10];
// 报错 error TS2322: Type '(string | number)[]' is not assignable to type 'number'

数组泛型

---

也可以使用数组泛型（Array Generic） Array<elemType> 来表示数组：

let arr: Array<number> = [1, 2, 3, 4];

接口表示数组

---

interface NumberArray {
    [index: number]: number;
}
let arrNum: NumberArray = [1, 2, 3, 4];

NumberArray 表示：只要索引的类型是数字时，那么值的类型必须是数字。

虽然接口也可以用来描述数组，但是我们一般不会这么做，因为这种方式比前两种方式复杂多了。

不过有一种情况例外，那就是它常用来表示类数组。

类数组

---

类数组（Array-like Object）不是数组类型，比如 arguments：

function sum() {
    let arr: number[] = arguments;
}
// 报错 error TS2740: Type 'IArguments' is missing the following properties from type 'number[]': pop, push, concat, join, and 15 more.

arguments 实际上是一个类数组，不能用普通的数组的方式来描述，而应该用接口：

function sum() {
    let args: {
        [index: number]: number,
        length: number,
        callee: Function
    } = arguments;
}

事实上常用的类数组都有自己的接口定义，即内置对象

any数组

---

个比较常见的做法是，用 any 表示数组中允许出现任意类型：

let arr: any[] = [1, 'Tom', { age: 18 }]

函数

函数声明

---

function sum(x: number, y: number): number {
    return x + y;
}

sum(1);	// 报错
sum(1, 2, 3);		// 报错

输入多余的（或者少于要求的）参数，是不被允许的：

函数表达式

---

如果要我们现在写一个对函数表达式（Function Expression）的定义，可能会写成这样：

let sum = function(x: number, y: number): number {
    return x + y;
}

可以编译通过，但是只对右边进行了类型规定，不严谨。表达式左边变量类型是通过类型推断出来的。那么手动规定类型：

let sum: (x: number, y: number) => number = function(x: number, y: number): number {
  return x + y;
}

console.log(sum(1, 2));

在 TypeScript 的类型定义中，=> 用来表示函数的定义，左边是输入类型，需要用括号括起来，右边是输出类型。

接口定义函数

---

interface Fun {
    (source: string, url: string): boolean
}

let fun: Fun;
fun = function(source: string, url: string) {
    return source.search(url) !== -1;
}

采用函数表达式或接口定义函数的方式时，对等号左侧进行类型限制，可以保证以后对函数名赋值时保证参数个数、参数类型、返回值类型不变。

函数参数

---

在进行函数传参是可以使用可选参数 ? ，但是可选参数必须在必须参数后面.

同时允许参数默认值，TypeScript 会将添加了默认值的参数识别为可选参数

function fun(first: string, two?: string, three: string = 'three'): string {
    if (two) {
        return first + two + three;
    } else {
        return first + three;
    }
}

此时就不受「可选参数必须接在必需参数后面」的限制了

重载

---

在同一作用域内，允许多个重名函数，但是其参数列表不同（参数类型不同，参数个数不同，参数顺序不同），返回值无关，叫做重载。

即一个函数接受不同类型或数量的参数时，做出不同处理。

比如，我们需要实现一个函数 reverse，输入数字 123 的时候，输出反转的数字 321，输入字符串 'hello' 的时候，输出反转的字符串 'olleh'：

function reverse(x: number | string): number | string {
    if (typeof x === 'number') {
        return Number(x.toString().split('').reverse().join(''));
    } else if (typeof x === 'string') {
        return x.split('').reverse().join('');
    }
}

上述例子语义不明！！！不能够精确的表达，输入为数字的时候，输出也应该为数字，输入为字符串的时候，输出也应该为字符串。

重载定义函数：

function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): number | string | undefined {
    if (typeof x === 'number') {
        return Number(x.toString().split('').reverse().join(''));
    } else if (typeof x === 'string') {
        return x.split('').reverse().join('');
    }
    return;
}

类型断言

类型断言（Type Assertion）可以用来手动指定一个值的类型。

值 as 类型

将一个联合类型断言为其中一个类型

interface Cat {
    name: string;
    run(): void;
}
interface Fish {
    name: string;
    swim(): void;
}
function isFish(animal: Cat | Fish) {
    if (typeof (animal as Fish).swim === 'function') {
        return true;
    }
    return false;
}

将 animal 断言成 Fish

需要注意的是，类型断言只能够「欺骗」TypeScript 编译器，无法避免运行时的错误，反而滥用类型断言可能会导致运行时错误：

interface Cat {
    name: string;
    run(): void;
}
interface Fish {
    name: string;
    swim(): void;
}
function swim(animal: Cat | Fish) {
    (animal as Fish).swim();
}
const tom: Cat = {
    name: 'Tom',
    run() { console.log('run') }
};
swim(tom);
// Uncaught TypeError: animal.swim is not a function`

父类可以被断言为子类

当类之间有继承关系时，类型断言也是很常见的：

// 父类断言为具体的子类
class ApiError extends Error {
  code: number = 0;
}
class HttpError extends Error {
  statusCode: number = 200;
}

function isApiError(err: Error): boolean {
  if (typeof (err as ApiError) === 'number') {
    return true;
  }
  return false;
}

上面的例子中，我们声明了函数 isApiError，它用来判断传入的参数是不是 ApiError 类型，为了实现这样一个函数，它的参数的类型肯定得是比较抽象的父类 Error，这样的话这个函数就能接受 Error 或它的子类作为参数了。

但是由于父类 Error 中没有 code 属性，故直接获取 error.code 会报错，需要使用类型断言获取 (error as ApiError).code。

任何一个类型都可以被断言为 any

window.foo = 1;
// error TS2339: Property 'foo' does not exist on type 'Window & typeof globalThis'.

window 上不存在 foo 属性。此时我们可以将 window 断言为 any

(window as any).foo = 1;

在 any 类型的变量上，访问任何属性都是允许的。需要注意的是，将一个变量断言为 any 可以说是解决 TypeScript 中类型问题的最后一个手段。

它极有可能掩盖了真正的类型错误，所以如果不是非常确定，就不要使用 as any。

any 可以被断言为任何一个类型

通过断言改进数据类型，使用断言。常常用于第三方库。

// getCacheData 只返回 any, 改进它
function getCacheData(key: string): any {
    return (window as any).cache[key];
}

interface Cat {
    name: string;
    run(): void;
}
const tom = getCacheData('Tom') as Cat;		// 将函数断言为 Cat
tom.run();

声明文件

当使用第三方库时，我们需要引用它的声明文件，才能获得对应的代码补全、接口提示等功能。

语法索引

• declare var 声明全局变量
• declare function 声明全局方法
• declare class 声明全局类
• declare enum 声明全局枚举类型
• declare namespace 声明全局对象
• interface 和 type 声明全局类型
• export 导出变量
• export namespace 导出对象
• export default ES6 导出
• export = commonJS 导出
• export as namespace UMD 声明全局变量
• declare global 扩展全局变量
• declare module 扩展模块

声明语句

---

当我们想使用第三方库的时候，比如jQuery, 一般直接在标签中引用，通过 $ 或 jQuery来访问。

$("#app");
jQuery("#app");
// ERROR: Cannot find name 'jQuery'.

在 ts 中，编译器并不知道 $ 和 jQuery 是什么东西，这时候我们需要使用 declare var 来定义它的类型：

declare var $: (selector: string) => any;

$("#app");

声明文件

---

在 ts 中，声明文件必需以 .d.ts 为后缀。

ts 会解析项目中所有的 *.ts 文件，当然也包含以 .d.ts 结尾的文件。所以当我们将 jQuery.d.ts 放到项目中时，其他所有 *.ts 文件就都可以获得 jQuery 的类型定义了。

// jQuery.d.ts
declare var $: (selector: string) => any;

// main.ts
$("#app");

假如仍然无法解析，那么可以检查下 tsconfig.json 中的 files、include 和 exclude 配置，确保其包含了 jQuery.d.ts 文件

有的第三方库有定义好的声明文件，可以直接使用 @types 来引入：

npm install @types/jQuery --save-dev

手写声明文件

---

当一个第三方库没有提供声明文件时，那么就需要自己书写声明文件了。在不同的场景下，声明文件的内容和使用方式会有区别，这里主要介绍全局变量和 npm 包

全局变量

通过 <script> 标签引入第三方库，注入全局变量

使用全局变量的声明文件时，如果是以 npm install @types/xxx --save-dev 安装的，则不需要任何配置。如果是将声明文件直接存放于当前项目中，则建议和其他源码一起放到 src 目录下：

/path/to/project
├── src
|  ├── index.ts
|  └── jQuery.d.ts
└── tsconfig.json

声明全局变量方式：

• declare var 声明全局变量
• declare function 声明全局方法
• declare class 声明全局类
• declare enum 声明全局枚举类型
• declare namespace 声明全局对象
• interface 和 type 声明全局类型

// jQuery.d.ts
declare var jQuery: (selector: string) => any;	// 也可以使用 let const 关键字

一般来说，全局变量都是禁止修改的常量，所以大部分情况都应该使用 const 而不是 var 或 let

// declare function
declare function jQuery(selector: string): any;

// declare class
declare class Animal {
    name: string;
    say(): string;
}

// declare enum
declare enum Directions {
    Up,
    Left,
    Down,
    Right
}

npm 包

通过 import foo from 'foo' 导入，根据 ES6 模块规范

在我们尝试给一个 npm 包创建声明文件之前，需要先看看它的声明文件是否已经存在。一般来说，npm 包的声明文件可能存在于两个地方：

1. 与该 npm 包绑定在一起。判断依据是 package.json 中有 types 字段，或者有一个 index.d.ts 声明文件。这种模式不需要额外安装其他包，是最为推荐的，所以以后我们自己创建 npm 包的时候，最好也将声明文件与 npm 包绑定在一起。
2. 发布到 @types 里。我们只需要尝试安装一下对应的 @types 包就知道是否存在该声明文件，安装命令是 npm install @types/foo --save-dev。这种模式一般是由于 npm 包的维护者没有提供声明文件，所以只能由其他人将声明文件发布到 @types 里了。

假如以上两种方式都没有找到对应的声明文件，那么我们就需要自己为它写声明文件了。由于是通过 import 语句导入的模块，所以声明文件存放的位置也有所约束，一般有两种方案：

1. 创建一个 node_modules/@types/foo/index.d.ts 文件，存放 foo 模块的声明文件。这种方式不需要额外的配置，但是 node_modules 目录不稳定，代码也没有被保存到仓库中，无法回溯版本，有不小心被删除的风险，故不太建议用这种方案，一般只用作临时测试。
2. 创建一个 types 目录，专门用来管理自己写的声明文件，将 foo 的声明文件放到 types/foo/index.d.ts 中。这种方式需要配置下 tsconfig.json 中的 paths 和 baseUrl 字段。

目录：

/path/to/project
├── src
|  └── index.ts
├── types
|  └── foo
|     └── index.d.ts
└── tsconfig.json

tsconfig.json 内容：

{
    "compilerOptions": {
        "module": "commonjs",
        "baseUrl": "./",
        "paths": {
            "*": ["types/*"]
        }
    }
}

如此配置之后，通过 import 导入 foo 的时候，也会去 types 目录下寻找对应的模块的声明文件了。

注意 module 配置可以有很多种选项，不同的选项会影响模块的导入导出模式。这里我们使用了 commonjs 这个最常用的选项，后面的教程也都默认使用的这个选项

npm 包的声明文件主要有以下几种语法：

• export 导出变量
• export namespace 导出（含有子属性的）对象
• export default ES6 默认导出
• export = commonjs 导出模块

// types/foo/index.d.ts
export const name: string;
export function getName(): string;
export class Animal {
    constructor(name: string);
    sayHi(): string;
}
export enum Directions {
    Up,
    Down,
    Left,
    Right
}
export interface Options {
    data: any;
}

导入模块：

// src/index.ts
import { name, getName, Animal, Directions, Options } from 'foo';
console.log(name);
let myName = getName();
let cat = new Animal('Tom');
let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];
let options: Options = {
    data: {
        name: 'foo'
    }
};

或者可以使用 declare 和 export

npm 包的声明文件与全局变量的声明文件有很大区别。在 npm 包的声明文件中，使用 declare 不再会声明一个全局变量，而只会在当前文件中声明一个局部变量。只有在声明文件中使用 export 导出，然后在使用方 import 导入后，才会应用到这些类型声明。

// types/foo/index.d.ts
declare const name: string;
declare function getName(): string;
declare class Animal {
    constructor(name: string);
    sayHi(): string;
}
declare enum Directions {
    Up,
    Down,
    Left,
    Right
}
interface Options {
    data: any;
}
export { name, getName, Animal, Directions, Options };

export default

在类型声明文件中， export default 用来导出默认值类型，比如 function、class和interface，其它变量需要先定义，再默认导出：

// foo/index.d.ts
export default function foo(): string;

declare enum Directions {
    Up,
    Left,
    Down,
    Right
}

export default Directions;

// index.ts
import foo from 'foo';

import Directions from 'foo'

export =

对于这种使用 commonjs 规范的库，假如要为它写类型声明文件的话，就需要使用到 export = 这种语法了[：

// types/foo/index.d.ts
export = foo;
declare function foo(): string;
declare namespace foo {
    const bar: number;
}

发布声明文件

这里省略，有兴趣可以自行搜索…

内置对象

JavaScript 中有很多内置对象，它们可以直接在 TypeScript 中当做定义好了的类型。

使用 ECMAScript 中的内置对象

Boolean、Error、Date、RegExp 等：

let b: Boolean = new Boolean(1);
let err: Error = new Error('Error');
let d: Date = new Date();
let r: RegExp = /[a-z]/;

使用 DOM 和 BOM 的内置对象

Document、HTMLElement、Event、NodeList 等。

let body: HTMLElement = document.body;
let allDiv: NodeList = document.querySelectorAll('div');
document.addEventListener('click', function(e: MouseEvent) {
  // Do something
});

类型别名与字符串字面量类型

类型别名

类型别名用来给一个类型起个新名字

type Name = string;
type NameResolve = () => string;
type NameOrResolve = Name | NameResolve;

function getName(n: NameOrResolve): Name {
    if (typeof n === 'string') {
        return n;
    } else {
        return n();
    }
}

类型别名常用于联合类型。

字符串字面量类型

字符串字面量类型用来约束取值只能是某几个字符串中的一个

type EventNames = 'click' | 'scroll' | 'mousemove';
function handleEvent(ele: Element, event: EventNames) {
    // do something
}
handleEvent(document.getElementById('hello'), 'scroll');  // 没问题
handleEvent(document.getElementById('world'), 'dblclick'); // 报错，event 不能为 'dblclick'
// index.ts(7,47): error TS2345: Argument of type '"dblclick"' is not assignable to parameter of type 'EventNames'.

类型别名与字符串字面量类型都是使用 type 进行定义

元组

数组合并了相同类型的对象，而元组（Tuple）合并了不同类型的对象

定义一对 string 和 number 的元组：

let tom: [string, number] = ["Tom", 20];

还可以通过索引进行赋值、访问。但是在初始化时必须提供所有指定内容：

/// 赋值
tom[0] = 'Tom';
tom[1] = 18;
// 访问
console.log(tom[0]);
// 初始化
let Jim: [string, number];
Jim = ['Jim'];	// 报错 error TS2322: Type '[string]' is not assignable to type '[string, number]'

元组越界

当添加越界的元素时，它的类型会被限制为元组中每个类型的联合类型：

let Jim: [string, number];
Jim = ['Jim', 20];
Jim.push(true);		// error TS2345: Argument of type 'boolean' is not assignable to parameter of type 'string | number'
console.log(Jim);

枚举

**枚举（Enum）**类型用于取值被限定在一定范围内的场景，比如一周只能有七天，方向有上下左右等。

定义

---

枚举使用 enum 来定义：

enum Directions { Up, Left, Down, Right }	// 定义

console.log(Directions["Up"] === 0);	// true
console.log(Directions["Left"] === 1);	// true
console.log(Directions["Down"] === 2);	// true
console.log(Directions["Right"] === 3);	// true

编译为 js 为：

var Directions;
(function (Directions) {
  Directions[(Directions["Up"] = 0)] = "Up";
  Directions[(Directions["Left"] = 1)] = "Left";
  Directions[(Directions["Down"] = 2)] = "Down";
  Directions[(Directions["Right"] = 3)] = "Right";
})(Directions || (Directions = {}));
console.log(Directions["Up"] === 0); // true
console.log(Directions["Left"] === 1); // true
console.log(Directions["Down"] === 2); // true
console.log(Directions["Right"] === 3); // true

那么我们打印这个枚举对象：

// console.log(Directions)
{
  '0': 'Up',
  '1': 'Left',
  '2': 'Down',
  '3': 'Right',
  Up: 0,
  Left: 1,
  Down: 2,
  Right: 3
}

枚举成员会被赋值为从 0 开始递增的数字，同时也会对枚举值到枚举名进行反向映射

手动赋值

---

我们可以给枚举项手动赋值，未手动赋值的枚举项会接着上一个枚举项递增

enum Color { Red = <any>'ccc000', Green = 100, Blue, Yellow };		// 当值非数字时使用类型断言解除类型检查
console.log(Color['Red']);    // ccc000
console.log(Color['Green']);  // 100
console.log(Color['Blue']);   // 101
console.log(Color['Yellow']);   // 102

常数枚举与外部枚举

---

常数枚举使用 const enum 定义枚举类型：

const enum Directions { Up, Left, Down, Right }

let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];
// 编译得到 index.js
var directions = [0 /* Directions.Up */, 2 /* Directions.Down */, 1 /* Directions.Left */, 3 /* Directions.Right */];

常数枚举与普通枚举的区别是，它会在编译阶段被删除，并且不能包含计算成员(即计算所得项)

外部枚举（Ambient Enums）是使用 declare enum 定义的枚举类型：

declare enum Directions { Up, Left, Down, Right }

let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];
// 编译得到
var directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];

declare 定义的类型只会用于编译时的检查，编译结果中会被删除。外部枚举与声明语句一样，常出现在声明文件中。

类

类 class, 由 ES6 中引入。

• 类（Class）：定义了一件事物的抽象特点，包含它的属性和方法
• 对象（Object）：类的实例，通过 new 生成
• 面向对象（OOP）的三大特性：封装、继承、多态
• 封装（Encapsulation）：将对数据的操作细节隐藏起来，只暴露对外的接口。外界调用端不需要（也不可能）知道细节，就能通过对外提供的接口来访问该对象，同时也保证了外界无法任意更改对象内部的数据
• 继承（Inheritance）：子类继承父类，子类除了拥有父类的所有特性外，还有一些更具体的特性
• 多态（Polymorphism）：由继承而产生了相关的不同的类，对同一个方法可以有不同的响应。比如 Cat 和 Dog 都继承自 Animal，但是分别实现了自己的 eat 方法。此时针对某一个实例，我们无需了解它是 Cat 还是 Dog，就可以直接调用 eat 方法，程序会自动判断出来应该如何执行 eat
• 存取器（getter & setter）：用以改变属性的读取和赋值行为
• 修饰符（Modifiers）：修饰符是一些关键字，用于限定成员或类型的性质。比如 public 表示公有属性或方法
• 抽象类（Abstract Class）：抽象类是供其他类继承的基类，抽象类不允许被实例化。抽象类中的抽象方法必须在子类中被实现
• 接口（Interfaces）：不同类之间公有的属性或方法，可以抽象成一个接口。接口可以被类实现（implements）。一个类只能继承自另一个类，但是可以实现多个接口

ES6 中类

---

属性和方法

使用 class 定义类，使用 constructor 定义构造函数。

通过 new 生成新实例的时候，会自动调用构造函数。

class Animal {
    constructor(name) {
        this.name = name;		// 定义在 Animal 实例上
    }
    say() {			// 定义在 Animal.prototype 上
        return this.name;
    }
    
    static back() {		// 定义在 class Animal 上
        return 'back';
    }
}

let jim = new Animal("jim");
Animal.back();		// 调用静态方法

类继承

使用 extends 关键字实现继承，子类中使用 super 关键字来调用父类的构造函数和方法

class Cat extends Animal {
  constructor(name) {
    super(name); // 调用父类的 constructor(name)
    console.log(this.name);
  }
  sayHi() {
    return 'Meow, ' + super.sayHi(); // 调用父类的 sayHi()
  }
}
let c = new Cat('Tom'); // Tom

存取器

使用 getter 和 setter 可以改变属性的赋值和读取行为：

class Animal {
  constructor(name) {
    this.name = name;
  }
  get name() {
    return 'Jack';
  }
  set name(value) {
    console.log('setter: ' + value);
  }
}
let a = new Animal('Kitty'); // setter: Kitty
a.name = 'Tom'; // setter: Tom
console.log(a.name); // Jack

静态方法

使用 static 修饰符修饰的方法称为静态方法，它们不需要实例化，而是直接通过类来调用：

class Animal {
  static isAnimal(a) {
    return a instanceof Animal;
  }
}
let a = new Animal('Jack');
Animal.isAnimal(a); // true
a.isAnimal(a); // TypeError: a.isAnimal is not a function

TypeScript 中的类

---

TypeScript 可以使用三种访问修饰符（Access Modifiers），分别是 public、private 和 protected。

• public 修饰的属性或方法是公有的，可以在任何地方被访问到，默认所有的属性和方法都是 public 的
• private 修饰的属性或方法是私有的，不能在声明它的类的外部访问
• protected 修饰的属性或方法是受保护的，它和 private 类似，区别是它在子类中也是允许被访问的

class Animal {
    public name;
    public constructor(name) {
        this.name = name;
    }
}

let a = new Animal('Jack');
console.log(a.name); // Jack
a.name = 'Tom';		// 允许直接访问 public
console.log(a.name); // Tom

当我们希望属性不被外部所访问时，使用 private ：

class Animal {
  private name;
  public constructor(name) {
    this.name = name;
  }
}
let a = new Animal('Jack');
console.log(a.name); // Jack
a.name = 'Tom';
// index.ts(9,13): error TS2341: Property 'name' is private and only accessible within class 'Animal'.
// index.ts(10,1): error TS2341: Property 'name' is private and only accessible within class 'Animal'.

使用 protected 修饰，允许属性在子类被访问，不允许被外部访问：

class Animal {
  protected name;
  public constructor(name) {
    this.name = name;
  }
}
class Cat extends Animal {
  constructor(name) {
    super(name);
    console.log(this.name);
  }
}

readonly 只读属性关键字，只允许出现在属性声明或索引签名或构造函数中

class Animal {
  readonly name;
  public constructor(name) {
    this.name = name;
  }
}
let a = new Animal('Jack');
console.log(a.name); // Jack
a.name = 'Tom'; // 报错 error TS2540: Cannot assign to 'name' because it is a read-only property

类与接口

一般来讲，一个类只能继承自另一个类，有时候不同类之间可以有一些共有的特性，这时候就可以把特性提取成接口（interfaces），用 implements 关键字来实现。这个特性大大提高了面向对象的灵活性

实现（implements）是面向对象中的一个重要概念

类实现接口

---

interface Alarm {
    alert(): void;
}
interface Light {
    lightOn(): void;
    lightOff(): void;
}
class Car implements Alarm, Light {
    alert() {
        console.log('Car alert');
    }
    lightOn() {
        console.log('Car light on');
    }
    lightOff() {
        console.log('Car light off');
    }
}

Car 实现了 Alarm 和 Light 连个接口

接口继承接口

---

interface Alarm {
    alert(): void;
}

interface LightableAlarm extends Alarm {
    lightOn(): void;
    lightOff(): void;
}

LightableAlarm继承了Alarm，除了拥有 alert方法之外，还拥有两个新方法lightOn和lightOff

泛型

泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性

基本使用

---

泛型就像传递参数一样传递：

function createArray<T>(length: number, value: T): Array<T> {
  let res: T[] = [];
  for (let i = 0; i < length; i++) {
    res[i] = value;
  }

  return res;
}

createArray<string>(5, 'x');	// 使用的时候再指定类型，这个就相当于将string传递给T，像传递参数一样

我们在函数名后添加了 <T>，其中 T 用来指代任意输入的类型，在后面的输入 value: T 和输出 Array<T> 中即可使用了

多类型使用

定义泛型的时候，可以一次定义多个类型参数：

function swap<T, U>(tuple: [T, U]): [U, T] {
  return [tuple[1], tuple[0]];
}
swap([7, 'seven']);

我们定义了一个 swap 函数，用来交换输入的元组

泛型约束

---

在函数内部使用泛型变量的时候，由于事先不知道它是哪种类型，所以不能随意的操作它的属性或方法：

function loggingIdentity<T>(arg: T): T {
  console.log(arg.length);
  return arg;
}
// 报错 error TS2339: Property 'length' does not exist on type 'T'

然后对泛型进行约束，只允许函数传入那些包含 length 属性的变量。这就是泛型约束：

interface LengthWise {
  length: number;
}

function loggingIdentity<T extends LengthWise>(arg: T): T {
  console.log(arg.length);
  return arg;
}

loggingIdentity(7); // 报错  error TS2345: Argument of type 'number' is not assignable to parameter of type 'LengthWise'.

此时如果调用 loggingIdentity 的时候，传入的 arg 不包含 length，那么在编译阶段也会报错！！！

泛型接口

---

interface Identities<V, S> {
  value: V,
  msg: S
}

function identity<V, S>(value: V, msg: S): Identities<V, S> {
  console.log('value:', value, ' msg:', msg);
  let i: Identities<V, S>;
  return i = {
    value,
    msg,
  };
}

console.log(identity<number, string>(200, 'success'))

泛型接口的使用和普通用法没有任何区别，仅仅是增加了"类型的传递"

泛型类

---

依照之前的规则，那么在类中使用泛型也很简单

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

class GenericII<T extends number, U extends string> {
  zeroValue: T;
  addNum(x: T, y: T) {
    return x + y;
  };
  concatStr(x: U, y: U) {
    return x + y;
  }
}

let instanceNum = new Generic<number>();
let instanceStr = new Generic<string>();
let instanceNumII = new GenericII();
instanceNum.zeroValue = 0;
instanceNum.add = function(x, y) {
  return x + y;
}
instanceStr.add = function(x, y) {
  return x + y;
}
console.log(instanceNum.zeroValue);
console.log(instanceNum.add(1, 2));
console.log(instanceStr.add('1', '2'));
console.log(instanceNumII.addNum(1, 3));

泛型参数默认类型

---

在 TypeScript 2.3 以后，我们可以为泛型中的类型参数指定默认类型。当使用泛型时没有在代码中直接指定类型参数，从实际值参数中也无法推测出时，这个默认类型就会起作用

function createArray<T = string>(length: number, value: T): Array<T> {
    let result: T[] = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
}