TypeScript 学习笔记(五)：interface接口

前言

在上一篇文章中我们学习了TS中的数组和元组，本篇文章我们主要了解TS中的interface接口。

interface接口介绍

interface 是一种类型约定，中文译为"接口"。使用了这个interface的对象，就拥有了指定的类型结构。

interface Person {
  firstName: string;
  lastName: string;
}

上面示例中，定义了一个接口Person，它指定一个对象模板，拥有属性firstName和lastName。任何实现这个接口的对象，都必须部署这两个属性。 如以下实例，变量p的类型就是接口Person，所以必须符合Person指定的结构，否则就会报错。

const p:Person = {
  firstName: 'Li',
  lastName: 'Xu',
};

interface 的使用

在interface接口中，一般有着以下几类成员。

• 对象属性
• 对象的属性索引
• 对象方法
• 函数

对象属性

示例:

interface Point {
  x: number;
  y: number;
}

如果属性是可选的，就在属性名后面加一个问号。

interface Foo {
  x?: string;
}

如果属性是只读的，需要加上readonly修饰符。

interface A {
  readonly a: string;
}

对象的属性索引

interface A {
  [Key: string]: number;
}

上面示例中，[Key: string]就是属性的字符串索引，表示属性名只要是字符串，都符合类型要求。属性索引共有string、number和symbol三种类型。

对象方法

写法如下：

// 写法一
interface A {
  f(x: boolean): string;
}

// 写法二
interface B {
  f: (x: boolean) => string;
}

// 写法三
interface C {
  f: { (x: boolean): string };
}

这三种写法都定义了一个接受布尔类型参数并返回字符串类型的函数。

函数

interface也可以用来声明独立的函数。

interface Add {
  (x:number, y:number): number;
}

const myAdd:Add = (x,y) => x + y;

interface的继承

interface可以继承其他类型。

interface继承interface

interface可以使用extends关键字，继承其他interface。

interface Shape {
  name: string;
}

interface Circle extends Shape {
  radius: number;
}

extends关键字会从继承的接口里面拷贝属性类型，这样就不必书写重复的属性。

而且interface还允许多重继承，如以下例子。

interface Style {
  color: string;
}

interface Shape {
  name: string;
}

interface Circle extends Style, Shape {
  radius: number;
}

如果子接口与父接口存在同名属性，那么子接口的属性会覆盖父接口的属性。但是子接口与父接口的同名属性必须是类型兼容的，不能有冲突。

interface Foo {
  id: string;
}

interface Bar extends Foo {
  id: number; // 报错
}

interface继承type

interface可以继承type命令定义的对象类型。如果type命令定义的类型不是对象，interface 就无法继承。

type Country = {
  name: string;
  capital: string;
}

interface CountryWithPop extends Country {
  population: number;
}

interface继承class

class A {
  x:string = '';

  y():boolean {
    return true;
  }
}

interface B extends A {
  z: number
}

interface与type的区别

interface命令与type命令作用类似，都可以表示对象类型。

很多对象类型既可以用 interface 表示，也可以用 type 表示。而且，两者往往可以换用，几乎所有的 interface 命令都可以改写为 type 命令。

相同点

都能为对象类型起名。

type Country = {
  name: string;
  capital: string;
}

interface Country {
  name: string;
  capital: string;
}

不同点

1. type能够表示非对象类型，而interface只能表示对象类型。
2. interface可以继承其他类型，type不支持继承。
3. 同名interface会自动合并，同名type则会报错。也就是说，TypeScript 不允许使用type多次定义同一个类型。
4. interface不能包含属性映射，type可以。
5. this关键字只能用于interface。
6. type 可以扩展原始数据类型，interface 不行。