TypeScript进阶

typescript
字数统计: 5.8k   |   阅读时长≈ 26 分钟

类型别名

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

1
2
3
4
5
6
7
8
9
10
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创建类型别名。
类型别名常用于联合类型。

字符串字面量类型

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

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

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

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

元组

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

简单的例子

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

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

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

1
2
3
4
5
6
7
8
9
10
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';

但是当直接对元组类型的变量进行初始化或者赋值的时候，需要提供所有元组类型中指定的项。

1
2
3
4
5
6
let tom: [string, number];
tom = ['Tom', 25];
let tom: [string, number];
tom = ['Tom'];
​
// Property '1' is missing in type '[string]' but required in type '[string, number]'.

越界的元素

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

1
2
3
4
5
6
let tom: [string, number];
tom = ['Tom', 25];
tom.push('male');
tom.push(true);
​
// Argument of type 'true' is not assignable to parameter of type 'string | number'

枚举

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

简单的例子

枚举使用enum关键字来定义：

1
enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};

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

1
2
3
4
5
6
7
8
9
10
11
enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};
​
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

事实上，上面的例子会被编译为：

1
2
3
4
5
6
7
8
9
10
var Days;
(function (Days) {
  Days[Days["Sun"] = 0] = "Sun";
  Days[Days["Mon"] = 1] = "Mon";
  Days[Days["Tue"] = 2] = "Tue";
  Days[Days["Wed"] = 3] = "Wed";
  Days[Days["Thu"] = 4] = "Thu";
  Days[Days["Fri"] = 5] = "Fri";
  Days[Days["Sat"] = 6] = "Sat";
})(Days || (Days = {}));

手动赋值

我们也可以给枚举项手动赋值：

1
2
3
4
5
6
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 是不会察觉到这一点的：

1
2
3
4
5
6
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

上面的例子中，递增到 3 的时候与前面的Sun的取值重复了，但是 TypeScript 并没有报错，导致Days[3]的值先是"Sun"，而后又被"Wed"覆盖了。编译的结果是：

1
2
3
4
5
6
7
8
9
10
var Days;
(function (Days) {
    Days[Days["Sun"] = 3] = "Sun";
    Days[Days["Mon"] = 1] = "Mon";
    Days[Days["Tue"] = 2] = "Tue";
    Days[Days["Wed"] = 3] = "Wed";
    Days[Days["Thu"] = 4] = "Thu";
    Days[Days["Fri"] = 5] = "Fri";
    Days[Days["Sat"] = 6] = "Sat";
})(Days || (Days = {}));

所以使用的时候需要注意，最好不要出现这种覆盖的情况。

手动赋值的枚举项可以不是数字，此时需要使用类型断言来让 tsc 无视类型检查 (编译出的 js 仍然是可用的)：

1
2
3
4
5
enum Days {Sun = 7, Mon, Tue, Wed, Thu, Fri, Sat = <any>"S"};
var Days;
(function (Days) {
    Days[Days["Sun"] = 7] = "Sun";
    Days[Days["Mon"] =

类

TypeScript 除了实现了所有 ES6 中的类的功能以外，还添加了一些新的用法。

类的概念

类(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

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

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

下面举一些例子：

1
2
3
4
5
6
7
8
9
10
11
class Animal {
  public name;
  public constructor(name) {
    this.name = name;
  }
}
​
let a = new Animal('Jack');
console.log(a.name); // Jack
a.name = 'Tom';
console.log(a.name); // Tom

上面的例子中，name被设置为了public，所以直接访问实例的name属性是允许的。

很多时候，我们希望有的属性是无法直接存取的，这时候就可以用private了：

1
2
3
4
5
6
7
8
9
10
11
12
13
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'.

需要注意的是，TypeScript 编译之后的代码中，并没有限制private属性在外部的可访问性。

上面的例子编译后的代码是：

1
2
3
4
5
6
7
8
9
var Animal = (function () {
  function Animal(name) {
    this.name = name;
  }
  return Animal;
}());
var a = new Animal('Jack');
console.log(a.name);
a.name = 'Tom';

使用private修饰的属性或方法，在子类中也是不允许访问的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class Animal {
  private name;
  public constructor(name) {
    this.name = name;
  }
}
​
class Cat extends Animal {
  constructor(name) {
    super(name);
    console.log(this.name);
  }
}
​
// index.ts(11,17): error TS2341: Property 'name' is private and only accessible within class 'Animal'.

而如果是用protected修饰，则允许在子类中访问：

1
2
3
4
5
6
7
8
9
10
11
12
13
class Animal {
  protected name;
  public constructor(name) {
    this.name = name;
  }
}
​
class Cat extends Animal {
  constructor(name) {
    super(name);
    console.log(this.name);
  }
}

当构造函数修饰为private时，该类不允许被继承或者实例化：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class Animal {
  public name;
  private constructor (name) {
    this.name = name;
  }
}
class Cat extends Animal {
  constructor (name) {
    super(name);
  }
}
​
let a = new Animal('Jack');
​
// index.ts(7,19): TS2675: Cannot extend a class 'Animal'. Class constructor is marked as private.
// index.ts(13,9): TS2673: Constructor of class 'Animal' is private and only accessible within the class declaration.

当构造函数修饰为protected时，该类只允许被继承：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class Animal {
  public name;
  protected constructor (name) {
    this.name = name;
  }
}
class Cat extends Animal {
  constructor (name) {
    super(name);
  }
}
​
let a = new Animal('Jack');
​
// index.ts(13,9): TS2674: Constructor of class 'Animal' is protected and only accessible within the class declaration.

参数属性

修饰符和readonly还可以使用在构造函数参数中，等同于类中定义该属性同时给该属性赋值，使代码更简洁。

1
2
3
4
5
6
class Animal {
  // public name: string;
  public constructor (public name) {
    // this.name = name;
  }
}

readonly

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

1
2
3
4
5
6
7
8
9
10
11
12
class Animal {
  readonly name;
  public constructor(name) {
    this.name = name;
  }
}
​
let a = new Animal('Jack');
console.log(a.name); // Jack
a.name = 'Tom';
​
// index.ts(10,3): TS2540: Cannot assign to 'name' because it is a read-only property.

注意如果readonly和其他访问修饰符同时存在的话，需要写在其后面。

1
2
3
4
5
6
class Animal {
  // public readonly name;
  public constructor(public readonly name) {
    // this.name = name;
  }
}

抽象类

abstract用于定义抽象类和其中的抽象方法。
什么是抽象类？

首先，抽象类是不允许被实例化的：

1
2
3
4
5
6
7
8
9
10
11
abstract class Animal {
  public name;
  public constructor(name) {
    this.name = name;
  }
  public abstract sayHi();
}
​
let a = new Animal('Jack');
​
// index.ts(9,11): error TS2511: Cannot create an instance of the abstract class 'Animal'.

上面的例子中，我们定义了一个抽象类Animal，并且定义了一个抽象方法 sayHi。在实例化抽象类的时候报错了。

其次，抽象类中的抽象方法必须被子类实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
abstract class Animal {
  public name;
  public constructor(name) {
    this.name = name;
  }
  public abstract sayHi();
}
​
class Cat extends Animal {
  public eat() {
    console.log(`${this.name} is eating.`);
  }
}
​
let cat = new Cat('Tom');
​
// index.ts(9,7): error TS2515: Non-abstract class 'Cat' does not implement inherited abstract member 'sayHi' from class 'Animal'.

上面的例子中，我们定义了一个类Cat继承了抽象类Animal，但是没有实现抽象方法sayHi，所以编译报错了。

下面是一个正确使用抽象类的例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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');

上面的例子中，我们实现了抽象方法sayHi，编译通过了。

需要注意的是，即使是抽象方法，TypeScript 的编译结果中，仍然会存在这个类，上面的代码的编译结果是：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var __extends = (this && this.__extends) || function (d, b) {
  for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  function __() { this.constructor = d; }
  d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var Animal = (function () {
  function Animal(name) {
    this.name = name;
  }
  return Animal;
}());
var Cat = (function (_super) {
  __extends(Cat, _super);
  function Cat() {
    _super.apply(this, arguments);
  }
  Cat.prototype.sayHi = function () {
    console.log('Meow, My name is ' + this.name);
  };
  return Cat;
}(Animal));
var cat = new Cat('Tom');

类的类型

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

1
2
3
4
5
6
7
8
9
10
11
12
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

类与接口

接口（Interfaces）可以用于对「对象的形状」进行描述，也可以对类的一部分行为进行抽象。

类实现接口

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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');
  }
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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接口，既能报警，也能开关车灯。

接口继承接口

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

1
2
3
4
5
6
7
8
interface Alarm {
  alert(): void;
}
​
interface LightableAlarm extends Alarm {
  lightOn(): void;
  lightOff(): void;
}

这很好理解，LightableAlarm继承了Alarm，除了拥有alert方法之外，还拥有两个新方法lightOn和lightOff。

接口继承类

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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创建它的实例）：

1
2
3
4
5
6
7
8
9
10
class Point {
  x: number;
  y: number;
  constructor(x: number, y: number) {
    this.x = x;
    this.y = y;
  }
}
​
const p = new Point(1, 2);

也可以将Point当做一个类型来用（使用: Point表示参数的类型）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
class Point {
  x: number;
  y: number;
  constructor(x: number, y: number) {
    this.x = x;
    this.y = y;
  }
}
​
function printPoint(p: Point) {
  console.log(p.x, p.y);
}
​
printPoint(new Point(1, 2));

这个例子实际上可以等价于：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
class Point {
  x: number;
  y: number;
  constructor(x: number, y: number) {
    this.x = x;
    this.y = y;
  }
}
​
interface PointInstanceType {
  x: number;
  y: number;
}
​
function printPoint(p: PointInstanceType) {
  console.log(p.x, p.y);
}
​
printPoint(new Point(1, 2));

上例中我们新声明的PointInstanceType类型，与声明class Point时创建的Point类型是等价的。

所以回到Point3d的例子中，我们就能很容易的理解为什么 TypeScript 会支持接口继承类了：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
class Point {
  x: number;
  y: number;
  constructor(x: number, y: number) {
    this.x = x;
    this.y = y;
  }
}
​
interface PointInstanceType {
  x: number;
  y: number;
}
​
// 等价于 interface Point3d extends PointInstanceType
interface Point3d extends Point {
  z: number;
}
​
let point3d: Point3d = {x: 1, y: 2, z: 3};

当我们声明interface Point3d extends Point时，Point3d继承的实际上是类Point的实例的类型。

换句话说，可以理解为定义了一个接口Point3d继承另一个接口PointInstanceType。

所以「接口继承类」和「接口继承接口」没有什么本质的区别。

值得注意的是，PointInstanceType相比于Point，缺少了constructor方法，这是因为声明Point类时创建的Point类型是不包含构造函数的。另外，除了构造函数是不包含的，静态属性或静态方法也是不包含的（实例的类型当然不应该包括构造函数、静态属性或静态方法）。

换句话说，声明Point类时创建的Point类型只包含其中的实例属性和实例方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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;
let p2: PointInstanceType;

上例中最后的类型Point和类型PointInstanceType是等价的。

同样的，在接口继承类的时候，也只会继承它的实例属性和实例方法。

泛型

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

简单的例子

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

1
2
3
4
5
6
7
8
9
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的类型。

这时候，泛型就派上用场了：

1
2
3
4
5
6
7
8
9
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。当然，也可以不手动指定，而让类型推论自动推算出来：

1
2
3
4
5
6
7
8
9
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']

多个类型参数

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

1
2
3
4
5
function swap<T, U>(tuple: [T, U]): [U, T] {
  return [tuple[1], tuple[0]];
}
​
swap([7, 'seven']); // ['seven', 7]

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

泛型约束

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

1
2
3
4
5
6
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属性的变量。这就是泛型约束：

1
2
3
4
5
6
7
8
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，那么在编译阶段就会报错了：

1
2
3
4
5
6
7
8
9
10
11
12
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'.

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

1
2
3
4
5
6
7
8
9
10
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中不存在的字段。

泛型接口

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

1
2
3
4
5
6
7
8
interface SearchFunc {
  (source: string, subString: string): boolean;
}
​
let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
  return source.search(subString) !== -1;
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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']

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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']

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

泛型类

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

1
2
3
4
5
6
7
8
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; };

泛型参数的默认类型

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

1
2
3
4
5
6
7
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;
}

声明合并

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

函数的合并

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

1
2
3
4
5
6
7
8
9
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('');
  }
}

接口的合并

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

1
2
3
4
5
6
7
8
9
10
11
interface Alarm {
  price: number;
}
interface Alarm {
  weight: number;
}
// 相当于：
interface Alarm {
  price: number;
  weight: number;
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
interface Alarm {
  price: number;
}
interface Alarm {
  price: number;  // 虽然重复了，但是类型都是 `number`，所以不会报错
  weight: number;
}
interface Alarm {
  price: number;
}
interface Alarm {
  price: string;  // 类型不一致，会报错
  weight: number;
}
​
// index.ts(5,3): error TS2403: Subsequent variable declarations must have the same type.
// Variable 'price' must be of type 'number', but here has type 'string'.

接口中方法的合并，与函数的合并一样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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;
}

类的合并

类的合并与接口的合并规则一致。

打赏
  • Copyrights © 2017-2023 WSQ
  • 访问人数: | 浏览次数:

请我喝杯咖啡吧~

支付宝
微信