2022-最新TypeScript教程（四）

目录

接口

接口中的任意属性 

接口和类型别名type的区别

1. 两者都可以用来描述对象或函数的类型

2.与接口不同，类型别名还可以用于其他类型，如基本类型（原始值）、联合类型、元组

3.接口可以定义多次,类型别名不可以

4.接口和类型别名的扩展

· 接口扩展接口 

· 类型别名扩展类型别名

· 接口扩展类型别名

· 类型别名扩展接口 

---

接口

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

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

interface Person {
    name: string;
    age: number;
}
let Du: Person = {
    name: 'Du',
    age: 23
};

我们定义了一个接口 Person，接着定义了一个变量 Du，它的类型是 Person。这样，我们就约束了 Du的形状必须和接口 Person 一致，少一些属性和多一些属性都是不允许的，接口一般首字母大写。

接口中的任意属性 

有时候我们希望一个接口中除了包含必选和可选属性之外，还允许有其他的任意属性，这时我们可以使用 索引签名 的形式来满足上述要求。 

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

let tom: Person = {
    name: 'Du',
    class:'Web'
};

 这里注意：一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集。在上例中，name和age都必须是any的子类型。

一个接口中只能有一个任意属性，如果接口中有多个类型的属性，则可以在任意属性中使用联合类型去定义：

interface Person {
    name: string;
    age?: number; // 这里真实的类型应该为：number | undefined
    [propName: string]: string | number | undefined;
}

let tom: Person = {
    name: 'Tom',
    age: 23,
    class: 'Web'
};

 在上述例子中，name和age的类型都是class联合类型的子集。

接口和类型别名type的区别

在大多数的情况下接口类型和类型别名的效果等价，但是在某些特定的场景下这两者还是存在很大区别的。

TypeScript 的核心原则之一是对值所具有的结构进行类型检查。 而接口的作用就是为这些类型命名的数据定义数据模型。

type(类型别名)会给一个类型起个新名字。 type 有时和 interface 很像，但是type可以作用于原始值（基本类型），联合类型，元组以及其它任何类型。

1. 两者都可以用来描述对象或函数的类型

· interface:

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

interface SetPoint {
  (x: number, y: number): void;
}

· type： 

type Point = {
  x: number;
  y: number;
};

type SetPoint = (x: number, y: number) => void;

2.与接口不同，类型别名还可以用于其他类型，如基本类型（原始值）、联合类型、元组

// primitive
type Name = string;

// object
type PartialPointX = { x: number; };
type PartialPointY = { y: number; };

// union
type PartialPoint = PartialPointX | PartialPointY;

// tuple
type Data = [number, string];

// dom
let div = document.createElement('div');
type B = typeof div;

3.接口可以定义多次,类型别名不可以

interface Point { x: number; }
interface Point { y: number; }
const point: Point = { x: 1, y: 2 };

4.接口和类型别名的扩展

接口可以扩展类型别名，同理，类型别名也可以扩展接口。

接口的扩展就是继承，通过 extends 来实现。类型别名的扩展就是交叉类型，通过 & 来实现。

· 接口扩展接口 

interface PointX {
    x: number
}

interface Point extends PointX {
    y: number
}

 · 类型别名扩展类型别名

type PointX = {
    x: number
}

type Point = PointX & {
    y: number
}

 · 接口扩展类型别名

type PointX = {
    x: number
}
interface Point extends PointX {
    y: number
}

· 类型别名扩展接口 

interface PointX {
    x: number
}
type Point = PointX & {
    y: number
}

持续更新中......