目录
接口
接口中的任意属性
接口和类型别名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
}
持续更新中......
相关文章
您阅读本篇文章共花了：
发表评论