[JavaScript知识库]什么是 TypeScript 以及其特性 好处 优点

TypeScript 的特性

什么是 TypeScript？

• TypeScript 是添加了类型系统的 JavaScript，适用于任何规模的项目。
• TypeScript 是一门静态类型、弱类型的语言。
• TypeScript 是完全兼容 JavaScript 的，它不会修改 JavaScript 运行时的特性。
• TypeScript 可以编译为 JavaScript，然后运行在浏览器、Node.js 等任何能运行 JavaScript 的环境中。
• TypeScript 拥有很多编译选项，类型检查的严格程度由你决定。
• TypeScript 可以和 JavaScript 共存，这意味着 JavaScript 项目能够渐进式的迁移到 TypeScript。
• TypeScript 增强了编辑器（IDE）的功能，提供了代码补全、接口提示、跳转到定义、代码重构等能力。
• TypeScript 拥有活跃的社区，大多数常用的第三方库都提供了类型声明。
• TypeScript 与标准同步发展，符合最新的 ECMAScript 标准（stage 3）。

类型系统

TypeScript 的类型系统，在很大程度上弥补了 JavaScript 的缺点。

TypeScript 是静态类型§

类型系统按照「类型检查的时机」来分类，可以分为动态类型和静态类型。

动态类型是指在运行时才会进行类型检查，这种语言的类型错误往往会导致运行时错误。JavaScript 是一门解释型语言，没有编译阶段，所以它是动态类型，

静态类型是指编译阶段就能确定每个变量的类型，这种语言的类型错误往往会导致语法错误。TypeScript 在运行前需要先编译为 JavaScript，而在编译阶段就会进行类型检查，所以?TypeScript 是静态类型

TypeScript 是弱类型

类型系统按照「是否允许隐式类型转换」来分类，可以分为强类型和弱类型。

以下这段代码不管是在 JavaScript 中还是在 TypeScript 中都是可以正常运行的，运行时数字?1?会被隐式类型转换为字符串 “1”，加号?+?被识别为字符串拼接，所以打印出结果是字符串 “11”。

console.log(1 + '1');

类型推论

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

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

联合类型

联合类型表示取值可以为多种类型中的一种。

联合类型使用?|?分隔每个类型。

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

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

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

length?不是?string?和?number?的共有属性，所以会报错

访问?string?和?number?的共有属性是没问题的

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

对象的类型—接口

在面向对象语言中，接口（Interfaces）是一个很重要的概念

interface Person {
    name: string;
    age: number;
}

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

我们定义了一个接口?Person，接着定义了一个变量?tom，它的类型是?Person。这样，我们就约束了?tom?的形状必须和接口?Person?一致。接口一般首字母大写。

• 定义的变量比接口少了一些属性是不允许的
• 多一些属性也是不允许的

数组的类型

使用「类型 + 方括号」来表示数组

let fibonacci: number[] = [1, 1, 2, 3, 5];

数组的项中不允许出现其他的类型

数组的一些方法的参数也会根据数组在定义时约定的类型进行限制

数组泛型

我们可以使用数组泛型?Array<elemType>?来表示数组

let fibonacci: Array<number> = [1, 1, 2, 3, 5];

接口也可以用来描述数组

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

函数的类型

在 JavaScript 中，有两种常见的定义函数的方式——函数声明和函数表达式

// 函数声明（Function Declaration）
function sum(x, y) {
    return x + y;
}

// 函数表达式（Function Expression）
let mySum = function (x, y) {
    return x + y;
};

类型断言

可以用来手动指定一个值的类型

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

主要用于

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

• 将一个父类断言为更加具体的子类

• 将任何一个类型断言为?any

• 将?any?断言为一个具体的类型

声明文件

通常我们会把声明语句放到一个单独的文件（jQuery.d.ts）中，这就是声明文件

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

声明文件必需以?.d.ts?为后缀。

假如我们想使用第三方库 jQuery，一种常见的方式是在 html 中通过?<script>?标签引入 jQuery，然后就可以使用全局变量?$?或?jQuery?了。

在 ts 中，编译器并不知道?$?或?jQuery?是什么东西

这时，我们需要使用?declare var?来定义它的类型

类型别名

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

type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
    if (typeof n === 'string') {
        return n;
    } else {
        return n();
    }
}

我们使用?type?创建类型别名

字符串字面量类型

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

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'

我们使用?type?定了一个字符串字面量类型?EventNames，它只能取三种字符串中的一种。

元组

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

定义一对值分别为?string?和?number?的元组：

let tom: [string, number] = ['Tom', 25];

当赋值或访问一个已知索引的元素时，会得到正确的类型：

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

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

也可以只赋值其中一项：

let tom: [string, number];
tom[0] = 'Tom';

类

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

TypeScript 中类的用法

public private 和 protected

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

类的类型

给类加上 TypeScript 的类型很简单，与接口类似：

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

????泛型（重点）

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

简单的例子：

首先，我们来实现一个函数?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<any>?允许数组的每一项都为任意类型。但是我们预期的是，数组中每一项都应该是输入的?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']

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

接着在调用的时候，可以指定它具体的类型为?string。当然，也可以不手动指定，而让类型推论自动推算出来：

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(3, 'x'); // ['x', 'x', 'x']

多个类型参数

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

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

swap([7, 'seven']); // ['seven', 7]

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

泛型约束

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

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

// index.ts(2,19): error TS2339: Property 'length' does not exist on type 'T'.

上例中，泛型?T?不一定包含属性?length，所以编译的时候报错了。

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

interface Lengthwise {
    length: number;
}

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

上例中，我们使用了?extends?约束了泛型?T?必须符合接口?Lengthwise?的形状，也就是必须包含?length?属性。

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

interface Lengthwise {
    length: number;
}

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

loggingIdentity(7);

// index.ts(10,17): error TS2345: Argument of type '7' is not assignable to parameter of type 'Lengthwise'.

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

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 });

上例中，我们使用了两个类型参数，其中要求?T?继承?U，这样就保证了?U?上不会出现?T?中不存在的字段。

泛型接口

可以使用接口的方式来定义一个函数需要符合的形状：

interface SearchFunc {
  (source: string, subString: string): boolean;
}

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
    return source.search(subString) !== -1;
}

当然也可以使用含有泛型的接口来定义函数的形状：

interface CreateArrayFunc {
    <T>(length: number, value: T): Array<T>;
}

let createArray: CreateArrayFunc;
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']

进一步，我们可以把泛型参数提前到接口名上：

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']

注意，此时在使用泛型接口的时候，需要定义泛型的类型。

泛型类

与泛型接口类似，泛型也可以用于类的类型定义中：

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; };

泛型参数的默认类型

在 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;
}