ts 入门学习笔记

基础

1. 原始数据类型

分为：boolean、number、string、void、undefined、null

// 布尔值
let isDone: boolean = false;

// 数值
let decLiteral: number = 6;

// 字符串
let myName: string = 'Tom';

// 空值
function alertName(): void {
    alert('My name is Tom');
}

// Null 和 Undefined
let u: undefined = undefined;
let n: null = null;
复制代码

2. 任意值

2.1 什么是任意值类型?

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

let myFavoriteNumber: any = 'seven';
myFavoriteNumber = 7;
复制代码

2.2 未声明类型的变量

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

let something;
something = 'seven';
something = 7;
something.setName('Tom');
复制代码

3. 类型推论

3.1 什么是类型推论?

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

// error:以下代码虽然没有指定类型，但是会在编译的时候报错：
let myFavoriteNumber = 'seven';
myFavoriteNumber = 7;
// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'。
复制代码

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

// success
let myFavoriteNumber;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;
复制代码

4. 联合类型

合类型（Union Types）表示取值可以为多种类型中的一种。

4.1 简单的例子

// 联合类型使用 | 分隔每个类型。
let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;
复制代码

4.2 访问联合类型的属性或方法

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

// error: length 不是 string 和 number 的共有属性，所以会报错。
function getLength(something: string | number): number {
    return something.length;
}

// success
function getString(something: string | number): string {
    return something.toString();
}
复制代码

5. 对象的类型——接口

5.1 什么是接口?

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

TypeScript 中的接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象以外，也常用于对「对象的形状（Shape）」进行描述。

5.2 简单的例子

// 接口一般首字母大写。有的编程语言中会建议接口的名称加上 I 前缀。
interface Person {
    name: string;
    age: number;
}

//  success
let tom: Person = {
    name: 'Tom',
    age: 25
};

//error:定义的变量比接口少了一些属性是不允许的：
let tom: Person = {
    name: 'Tom'
};

// error:多一些属性也是不允许的：
let tom: Person = {
    name: 'Tom',
    age: 25,
    gender: 'male'
};
复制代码

5.3 可选属性

// success:“？”代表可选属性，可选属性的含义是该属性可以不存在。
interface Person {
    name: string;
    age?: number;
}

let tom: Person = {
    name: 'Tom'
};
复制代码

5.4 任意属性

// success:使用 [propName: string] 定义了任意属性取 string 类型的值。
interface Person {
    name: string;
    age?: number;
    [propName: string]: string | number;
}

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

// error
interface Person {
    name: string;
    age?: number;
    [propName: string]: string;
}

let tom: Person = {
    name: 'Tom',
    gender: 'male'
};
复制代码

5.5 只读属性

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

// 有时候我们希望对象中的一些字段只能在创建的时候被赋值，那么可以用 readonly 定义只读属性：
interface Person {
    readonly id: number;
    name: string;
    age?: number;
    [propName: string]: any;
}

let tom: Person = {
    id: 89757,
    name: 'Tom',
    gender: 'male'
};

tom.id = 9527;
复制代码

6. 数组的类型

6.1 创建方法

// 「类型 + 方括号」表示法
let fibonacci: number[] = [1, 1, 2, 3, 5];

// 数组泛型
let fibonacci: Array<number> = [1, 1, 2, 3, 5];

// 用接口表示数组
interface NumberArray {
    [index: number]: number;
}
let fibonacci: NumberArray = [1, 1, 2, 3, 5];
复制代码

6.2 类数组

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

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

// succuss
function sum() {
    let args: {
        [index: number]: number;
        length: number;
        callee: Function;
    } = arguments;
}
复制代码

常用的类数组都有自己的接口定义，如 IArguments, NodeList, HTMLCollection 等

function sum() {
    let args: IArguments = arguments;
}

interface IArguments {
    [index: number]: any;
    length: number;
    callee: Function;
}
复制代码

6.3 any 在数组中的应用

// 用 any 表示数组中允许出现任意类型：
let list: any[] = ['xcatliu', 25, { website: 'http://xcatliu.com' }];
复制代码

7. 函数的类型

7.1 创建方法

// 函数声明
function sum(x: number, y: number): number {
    return x + y;
}

// 函数表达式
let mySum = function (x: number, y: number): number {
    return x + y;
};

// 用接口定义函数的形状
interface SearchFunc {
    (source: string, subString: string): boolean;
}
let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
    return source.search(subString) !== -1;
}
复制代码

7.2 可选参数

可选参数必须接在必需参数后面

// 用 ? 表示可选的参数
function buildName(firstName: string, lastName?: string) {
    if (lastName) {
        return firstName + ' ' + lastName;
    } else {
        return firstName;
    }
}
let tomcat = buildName('Tom', 'Cat');
let tom = buildName('Tom')
复制代码

7.3 参数默认值

TypeScript 会将添加了默认值的参数识别为可选参数，不受可选参数必须接在必需参数后面的限制

function buildName(firstName: string = 'Tom', lastName: string) {
    return firstName + ' ' + lastName;
}
let tomcat = buildName('Tom', 'Cat');
let cat = buildName(undefined, 'Cat');
复制代码

7.4 剩余参数

function push(array: any[], ...items: any[]) {
    items.forEach(function(item) {
        array.push(item);
    });
}

let a = [];
push(a, 1, 2, 3);
复制代码

7.5 重载

输入为数字的时候，输出也应该为数字，输入为字符串的时候，输出也应该为字符串。

// 使用重载定义多个 reverse 的函数类型
function reverse(x: number): number;
function reverse(x: string): string;
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('');
    }
}
复制代码

8. 类型断言

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

值 as 类型
复制代码

8.1 类型断言的用途

用途:

• 联合类型可以被断言为其中一个类型
• 父类可以被断言为子类
• 任何类型都可以被断言为 any
• any 可以被断言为任何类型
• 要使得 A 能够被断言为 B，只需要 A 兼容 B 或 B 兼容 A 即可

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

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;
}
复制代码

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

// error:编译时不会报错，但在运行时会报错
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`
复制代码

(2) 将一个父类断言为更加具体的子类

class ApiError extends Error {
    code: number = 0;
}
class HttpError extends Error {
    statusCode: number = 200;
}

function isApiError(error: Error) {
    if (typeof (error as ApiError).code === 'number') {
        return true;
    }
    return false;
}

// 也可以采用 instanceof
function isApiError(error: Error) {
    if (error instanceof ApiError) { //如果ApiError是接口类型,则错误
        return true;
    }
    return false;
}
复制代码

(3) 将任何一个类型断言为 any

(window as any).foo = 1;
复制代码

注意：如果不是非常确定，就不要使用 as any

(4) 将 any 断言为一个具体的类型

function getCacheData(key: string): any {
    return (window as any).cache[key];
}

interface Cat {
    name: string;
    run(): void;
}

const tom = getCacheData('tom') as Cat;
tom.run();
复制代码

8.2 类型断言的限制

当 Animal 兼容 Cat 时，它们就可以互相进行类型断言。

// TypeScript 是结构类型系统，类型之间的对比只会比较它们最终的结构，而会忽略它们定义时的关系。
interface Animal {
    name: string;
}
interface Cat {
    name: string;
    run(): void;
}
// 等价于
interface Animal {
    name: string;
}
interface Cat extends Animal {
    run(): void;
}

let tom: Cat = {
    name: 'Tom',
    run: () => { console.log('run') }
};
let animal: Animal = tom;
复制代码

8.3 双重断言

除非迫不得已，千万别用双重断言。

interface Cat {
    run(): void;
}
interface Fish {
    swim(): void;
}

function testCat(cat: Cat) {
    return (cat as any as Fish);
}
复制代码

8.4 类型断言 vs 类型转换

类型断言只会影响 TypeScript 编译时的类型，类型断言语句在编译结果中会被删除

// 类型断言
function toBoolean(something: any): boolean {
    return something as boolean;
}
toBoolean(1);
// 返回值为 1

//等价于
function toBoolean(something) {
    return something;
}
toBoolean(1);
// 返回值为 1


// 类型转换
function toBoolean(something: any): boolean {
    return Boolean(something);
}

toBoolean(1);
// 返回值为 true
复制代码

8.5 类型断言 vs 类型声明

核心区别:
animal 断言为 Cat，只需要满足 Animal 兼容 Cat 或 Cat 兼容 Animal 即可
animal 赋值给 tom，需要满足 Cat 兼容 Animal 才行

// 类型断言
interface Animal {
    name: string;
}
interface Cat {
    name: string;
    run(): void;
}

const animal: Animal = {
    name: 'tom'
};
let tom = animal as Cat;


// 类型声明
interface Animal {
    name: string;
}
interface Cat {
    name: string;
    run(): void;
}

const animal: Animal = {
    name: 'tom'
};
let tom: Cat = animal;
// index.ts:12:5 - error TS2741: Property 'run' is missing in type 'Animal' but required in type 'Cat'.
复制代码

8.6 类型断言 vs 泛型

// 类型断言
function getCacheData(key: string): any {
    return (window as any).cache[key];
}

interface Cat {
    name: string;
    run(): void;
}

const tom = getCacheData('tom') as Cat;
tom.run();


// 泛型
function getCacheData<T>(key: string): T {
    return (window as any).cache[key];
}

interface Cat {
    name: string;
    run(): void;
}

const tom = getCacheData<Cat>('tom');
tom.run();
复制代码

9. 声明文件

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

9.1 新语法索引

• 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 扩展模块
• <reference /> 三斜线指令

9.2 什么是声明文件？

声明文件：把声明语句放到一个单独的文件（jQuery.d.ts）中。

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

jQuery('#foo');
复制代码


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

9.3 书写声明文件

库的使用场景主要有以下几种：

• 全局变量：通过 <script> 标签引入第三方库，注入全局变量
• npm 包：通过 import foo from 'foo' 导入，符合 ES6 模块规范
• UMD 库：既可以通过<script> 标签引入，又可以通过 import 导入
• 直接扩展全局变量：通过 <script> 标签引入后，改变一个全局变量的结构
• 在 npm 包或 UMD 库中扩展全局变量：引用 npm 包或 UMD 库后，改变一个全局变量的结构
• 模块插件：通过 <script> 或 import 导入后，改变另一个模块的结构

全局变量的声明文件主要有以下几种语法：

• declare var 声明全局变量

• declare function 声明全局方法

• declare class 声明全局类

• declare enum 声明全局枚举类型

• declare namespace 声明（含有子属性的）全局对象

• interface 和 type 声明全局类型

  // declare var declare const jQuery: (selector: string) => any;

  // declare function declare function jQuery(selector: string): any; declare function jQuery(domReadyCallback: () => any): any; //函数重载

  // declare class declare class Animal { // src/Animal.d.ts name: string; constructor(name: string); sayHi(): string; } let cat = new Animal('Tom'); // src/index.ts

  // declare enum declare enum Directions { Up, Down, } let directions = [Directions.Up, Directions.Down];

  // declare namespace 不推荐使用

  // interface 和 type interface和type类似 interface AjaxSettings { // src/jQuery.d.ts method?: 'GET' | 'POST' data?: any; } declare namespace jQuery { function ajax(url: string, settings?: AjaxSettings): void; } let settings: AjaxSettings = { //src/index.ts method: 'POST', data: { name: 'foo' } }; jQuery.ajax('/api/post_something', settings);

防止命名冲突
暴露在最外层的 interface 或 type 会作为全局类型作用于整个项目中，减少全局变量或全局类型的数量，最好将他们放到 namespace 下：

// src/jQuery.d.ts
declare namespace jQuery {
    interface AjaxSettings {
        method?: 'GET' | 'POST'
        data?: any;
    }
    function ajax(url: string, settings?: AjaxSettings): void;
}
复制代码

声明合并
假如 jQuery 既是一个函数，可以直接被调用 jQuery('#foo')，又是一个对象，拥有子属性 jQuery.ajax()（事实确实如此），那么我们可以组合多个声明语句，它们会不冲突的合并起来：

// src/jQuery.d.ts
declare function jQuery(selector: string): any;
declare namespace jQuery {
    function ajax(url: string, settings?: any): void;
}

// src/index.ts
jQuery('#foo');
jQuery.ajax('/api/get_something');
复制代码

9.4 npm 包 // to do

10. 内置对象

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

内置对象是指根据标准在全局作用域（Global）上存在的对象。这里的标准是指 ECMAScript 和其他环境（比如 DOM）的标准。

10.1 ECMAScript 的内置对象

let b: Boolean = new Boolean(1);
let e: Error = new Error('Error occurred');
let d: Date = new Date();
let r: RegExp = /[a-z]/;
复制代码

内置对象：developer.mozilla.org/en-US/docs/…

10.2 DOM 和 BOM 的内置对象

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
});
复制代码

10.3 TypeScript 核心库的定义文件

TypeScript 核心库的定义文件中定义了所有浏览器环境需要用到的类型，并且是预置在 TypeScript 中的。

// error
Math.pow(10, '2');
// index.ts(1,14): error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

// 等价于
interface Math {
    /**
     * Returns the value of a base expression taken to a specified power.
     * @param x The base value of the expression.
     * @param y The exponent value of the expression.
     */
    pow(x: number, y: number): number;
}
复制代码

10.4 用 TypeScript 写 Node.js

Node.js 不是内置对象的一部分，如果想用 TypeScript 写 Node.js，则需要引入第三方声明文件：

npm install @types/node --save-dev
复制代码

进阶

11. 类型别名

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

11.1 简单的例子

// 使用 type 创建类型别名
type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
    if (typeof n === 'string') {
        return n;
    } else {
        return n();
    }
}
复制代码

12. 字符串字面量类型

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

12.1 简单的例子

// 使用 type 定了一个字符串字面量类型 EventNames，它只能取三种字符串中的一种
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'
复制代码

13. 元组

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

13.1 简单的例子

// 定义一对值分别为 string 和 number 的元组
let tom: [string, number] = ['Tom', 25];

// success
let tom: [string, number];
tom[0] = 'Tom';
tom[1] = 25;

tom[0].slice(1);
tom[1].toFixed(2);

// error
let tom: [string, number];
tom = ['Tom'];
复制代码

13.2 越界的元素

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

let tom: [string, number];
tom = ['Tom', 25];
tom.push('male'); // success
tom.push(true); // error
复制代码

14. 枚举

枚举（Enum）类型用于取值被限定在一定范围内的场景，比如一周只能有七天，颜色限定为红绿蓝等。

14.1 简单的例子

// 枚举使用 enum 关键字来定义：
enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};

// 枚举成员会被赋值为从 0 开始递增的数字，同时也会对枚举值到枚举名进行反向映射：
console.log(Days["Sun"] === 0); // true
console.log(Days["Mon"] === 1); // true
console.log(Days["Tue"] === 2); // true
console.log(Days["Sat"] === 6); // true

console.log(Days[0] === "Sun"); // true
console.log(Days[1] === "Mon"); // true
console.log(Days[2] === "Tue"); // true
console.log(Days[6] === "Sat"); // true
复制代码

14.2 手动赋值

// 未手动赋值的枚举项会接着上一个枚举项递增
enum Days {Sun = 7, Mon = 1, Tue, Wed, Thu, Fri, Sat};

console.log(Days["Sun"] === 7); // true
console.log(Days["Mon"] === 1); // true
console.log(Days["Tue"] === 2); // true
console.log(Days["Sat"] === 6); // true

// 如果未手动赋值的枚举项与手动赋值的重复了，TypeScript 是不会察觉到这一点的
enum Days {Sun = 3, Mon = 1, Tue, Wed, Thu, Fri, Sat};

console.log(Days["Sun"] === 3); // true
console.log(Days["Wed"] === 3); // true
console.log(Days[3] === "Sun"); // false
console.log(Days[3] === "Wed"); // true

// 手动赋值的枚举项可以不是数字，此时需要使用类型断言来让 tsc 无视类型检查
enum Days {Sun = 7, Mon, Tue, Wed, Thu, Fri, Sat = <any>"S"};

// 手动赋值的枚举项也可以为小数或负数，此时后续未手动赋值的项的递增步长仍为 1
enum Days {Sun = 7, Mon = 1.5, Tue, Wed, Thu, Fri, Sat};

console.log(Days["Sun"] === 7); // true
console.log(Days["Mon"] === 1.5); // true
console.log(Days["Tue"] === 2.5); // true
console.log(Days["Sat"] === 6.5); // true
复制代码

14.3 常数项和计算所得项

枚举项有两种类型：常数项（constant member）和计算所得项（computed member）。

// 一个典型的计算所得项的例子
enum Color {Red, Green, Blue = "blue".length};

// 如果紧接在计算所得项后面的是未手动赋值的项，那么它就会因为无法获得初始值而报错：
enum Color {Red = "red".length, Green, Blue}; // error
复制代码

14.4 常数枚举

// 常数枚举是使用 const enum 定义的枚举类型：
const enum Directions {
    Up,
    Down,
    Left,
    Right
}

// error
const enum Color {Red, Green, Blue = "blue".length};
复制代码

14.5 外部枚举

// 外部枚举（Ambient Enums）是使用 declare enum 定义的枚举类型：
declare enum Directions {
    Up,
    Down,
    Left,
    Right
}

// 同时使用 declare 和 const 也是可以的
declare const enum Directions {
    Up,
    Down,
    Left,
    Right
}
let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];
复制代码

15. 类

15.1 类的概念

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

15.2 ES7 中类的用法

// 实例属性
class Animal {
  name = 'Jack';

  constructor() {
    // ...
  }
}

let a = new Animal();
console.log(a.name); // Jack


// 静态属性
class Animal {
  static num = 42;

  constructor() {
    // ...
  }
}

console.log(Animal.num); // 42
复制代码

15.3 TypeScript 中类的用法

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

• public 修饰的属性或方法是公有的，可以在任何地方被访问到，默认所有的属性和方法都是 public 的

• private 修饰的属性或方法是私有的，不能在声明它的类的外部访问

• protected 修饰的属性或方法是受保护的，它和 private 类似，区别是它在子类中也是允许被访问的

  // private属性，name不能直接访问 class Animal { private name; public constructor(name) { this.name = name; } }

  // protected属性，name可以被子类访问 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 {
  // public name: string;
  public constructor(public name) {
    // this.name = name;
  }
}
复制代码

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

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

let a = new Animal('Jack');
console.log(a.name); // Jack

// 注意如果 readonly 和其他访问修饰符同时存在的话，需要写在其后面。
class Animal {
  // public readonly name;
  public constructor(public readonly name) {
    // this.name = name;
  }
}
复制代码

抽象类
abstract 用于定义抽象类和其中的抽象方法。

// 抽象类是不允许被实例化的
abstract class Animal {
  public name;
  public constructor(name) {
    this.name = name;
  }
  public abstract sayHi();
}
let a = new Animal('Jack'); // error

// 抽象类中的抽象方法必须被子类实现
abstract class Animal {
  public name;
  public constructor(name) {
    this.name = name;
  }
  public abstract sayHi();
}

class Cat extends Animal {
  public sayHi() {
    console.log(`Meow, My name is ${this.name}`);
  }
}

let cat = new Cat('Tom');
复制代码

15.4 类的类型

class Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  sayHi(): string {
    return `My name is ${this.name}`;
  }
}

let a: Animal = new Animal('Jack');
console.log(a.sayHi()); // My name is Jack
复制代码

16. 类与接口

16.1 类实现接口

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

举例来说，门是一个类，防盗门是门的子类。如果防盗门有一个报警器的功能，我们可以简单的给防盗门添加一个报警方法。这时候如果有另一个类，车，也有报警器的功能，就可以考虑把报警器提取出来，作为一个接口，防盗门和车都去实现它：

interface Alarm { // 报警器
    alert(): void;
}

class Door { // 门
}

class SecurityDoor extends Door implements Alarm {
    alert() {
        console.log('SecurityDoor alert');
    }
}

class Car implements Alarm {
    alert() {
        console.log('Car alert');
    }
}
复制代码

一个类可以实现多个接口：

// Car 实现了 Alarm 和 Light 接口，既能报警，也能开关车灯
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');
    }
}
复制代码

16.2 接口继承接口

接口与接口之间可以是继承关系：

interface Alarm {
    alert(): void;
}

interface LightableAlarm extends Alarm {
    lightOn(): void;
    lightOff(): void;
}
复制代码

16.3 接口继承类

常见的面向对象语言中，接口是不能继承类的，但是在 TypeScript 中却是可以的：

class Point {
    x: number;
    y: number;
    constructor(x: number, y: number) {
        this.x = x;
        this.y = y;
    }
}

interface Point3d extends Point {
    z: number;
}

let point3d: Point3d = {x: 1, y: 2, z: 3}
复制代码

为什么 TypeScript 会支持接口继承类呢？

实际上，当我们在声明 class Point 时，除了会创建一个名为 Point 的类之外，同时也创建了一个名为 Point 的类型（实例的类型）。

所以我们既可以将 Point 当做一个类来用（使用 new Point 创建它的实例）

// 声明 Point 类时创建的 Point 类型只包含其中的实例属性和实例方法
class Point {
    /** 静态属性，坐标系原点 */
    static origin = new Point(0, 0);
    /** 静态方法，计算与原点距离 */
    static distanceToOrigin(p: Point) {
        return Math.sqrt(p.x * p.x + p.y * p.y);
    }
    /** 实例属性，x 轴的值 */
    x: number;
    /** 实例属性，y 轴的值 */
    y: number;
    /** 构造函数 */
    constructor(x: number, y: number) {
        this.x = x;
        this.y = y;
    }
    /** 实例方法，打印此点 */
    printPoint() {
        console.log(this.x, this.y);
    }
}

interface PointInstanceType {
    x: number;
    y: number;
    printPoint(): void;
}

let p1: Point; // 类型 Point 和类型 PointInstanceType 是等价的
let p2: PointInstanceType;
复制代码

17 泛型

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

17.1 简单的例子

首先，我们来实现一个函数 createArray，它可以创建一个指定长度的数组，同时将每一项都填充一个默认值：

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

createArray(3, 'x'); // ['x', 'x', 'x']
复制代码

Array 允许数组的每一项都为任意类型。但是我们预期的是，数组中每一项都应该是输入的 value 的类型。

// 泛型的写法
function createArray<T>(length: number, value: T): Array<T> {
    let result: T[] = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
}

createArray<string>(3, 'x'); // ['x', 'x', 'x']
复制代码

17.2 多个类型参数

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

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

swap([7, 'seven']); // ['seven', 7]
复制代码

17.3 泛型约束

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

function loggingIdentity<T>(arg: T): T {
    console.log(arg.length);
    return arg;
}
复制代码

这时，我们可以对泛型进行约束，只允许这个函数传入那些包含 length 属性的变量。这就是泛型约束：

interface Lengthwise {
    length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
    console.log(arg.length);
    return arg;
}
复制代码

多个类型参数之间也可以互相约束：

function copyFields<T extends U, U>(target: T, source: U): T {
    for (let id in source) {
        target[id] = (<T>source)[id];
    }
    return target;
}

let x = { a: 1, b: 2, c: 3, d: 4 };

copyFields(x, { b: 10, d: 20 });
复制代码

17.4 泛型接口

// 使用含有泛型的接口来定义函数的形状
interface CreateArrayFunc<T> {
    (length: number, value: T): Array<T>;
}

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

createArray(3, 'x'); // ['x', 'x', 'x']
复制代码

17.5 泛型类

// 使用含有泛型的接口来类
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; };
复制代码

17.6 泛型参数的默认类型

在 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;
}
复制代码

18. 声明合并

如果定义了两个相同名字的函数、接口或类，那么它们会合并成一个类型：

18.1 函数的合并

我们可以使用重载定义多个函数类型：

function reverse(x: number): number;
function reverse(x: string): string;
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('');
    }
}
复制代码

18.2 接口和类的合并

接口中的属性在合并时会简单的合并到一个接口中：

interface Alarm {
    price: number;
    alert(s: string): string;
}
interface Alarm {
    weight: number;
    alert(s: string, n: number): string;
}

// 相当于：
interface Alarm {
    price: number;
    weight: number;
    alert(s: string): string;
    alert(s: string, n: number): string;
}
复制代码

注意，合并的属性的类型必须是唯一的：

// success
interface Alarm {
    price: number;
}
interface Alarm {
    price: number;  // 虽然重复了，但是类型都是 `number`，所以不会报错
    weight: number;
}

// error
interface Alarm {
    price: number;
}
interface Alarm {
    price: string;  // 类型不一致，会报错
    weight: number;
}
复制代码