接口
接口用于对复杂的数据结构进行类型描述、定义类型规范,
TypeScript
编译器通过接口定义的规范对数据结构进行类型检查。接口通过interface
修饰。
在实现了接口规范的情况下,规范以外的值默认是允许存在的。
接口具有继承特性,即接口与接口之间可以存在继承关系,而且一个接口可以继承多个接口。
// 接口
interface Person {
name: string,
age: number,
gender: string
};
// 需要的参数需要符合 Person 接口中的规范
function getUserInfo(user: Person) {
console.log(user);
};
// 定义符合接口规范的参数
const person = {
name: "张三",
age: 18,
gender: "男"
};
// 调用方法
getUserInfo(person);
/* 接口继承 */
interface Size {
sizes: string[];
getAvailableSizes(): string[];
};
interface Shape {
color: string;
};
// 继承两个接口
interface Pizza extends Sizes, Shape {
name: string;
};
// 接口继承需要实现所有的属性和方法
const pizza: Pizza = {
name: "",
sizes: [],
getAvailableSizes: function (): string[] {
throw new Error("Function not implemented.");
},
color: "",
};
接口具有声明合并特性,即多个相同名称的接口可以合并。
interface Box {
width: number;
height: number;
};
interface Box {
scale: number;
};
// 需要实现所有同名接口的属性和方法
let box: Box = { width: 5, height: 6, scale: 10 }
接口可以被类实现,约束类中必须要实现的成员。
// 语法格式
class 类名 implements 接口名 { };
// 接口
interface Calendar {
name: string;
addEvent(): void;
removeEvent(): void;
};
// 类实现接口
class GoogleCalendar implements Calendar {
name: string = "test";
addEvent(): void {};
removeEvent(): void {};
};
使用接口规范函数的类型。
interface Sum {
(n: number, m: number): number;
};
const sum: Sum = function (a, b) {
return a + b;
};
接口与类型别名
类型别名可以定义对象、联合类型、基本数据类型,而接口只能定义对象类型。
// 使用类型别名定义联合类型
type ISBN = number | string;
// 使用联合类型定义对象类型
type PublicationT = {
isbn: ISBN;
author: string;
publisher: string;
};
// 接口只能定义对象类型
interface PublicationI {
isbn: ISBN;
author: string;
publisher: string;
};
函数重载
根据函数入参类型的不同或入参个数的不同,设置不同的返回值类型。
// 消息种类的类型
type MessageType = "string" | "image" | "audio";
// 消息的类型
type Message = {
id: number;
type: MessageType;
content: string;
};
// 消息数组
const data: Message[] = [
{ id: 1, type: "string", content: "hello-1" },
{ id: 2, type: "image", content: "hello-2" },
{ id: 3, type: "audio", content: "hello-3" },
];
// 函数重载
// 根据id来确定返回值类型
function getMessage(id: number): Message | undefined;
// 根据type来确定返回值类型
function getMessage(type: MessageType): Message[];
function getMessage(query: any): any {
// 根据传参的类型来做业务逻辑处理
if(typeof query === "number") {
return data.find(message => message.id === query);
} else {
return data.filter(message => message.type === query);
};
};
const m1 = getMessage(1);
const m2 = getMessage("image");
接口代替函数重载
// 消息种类的类型
type MessageType = "string" | "image" | "audio";
// 消息的类型
type Message = {
id: number;
type: MessageType;
content: string;
};
// 消息数组
const data: Message[] = [
{ id: 1, type: "string", content: "hello-1" },
{ id: 2, type: "image", content: "hello-2" },
{ id: 3, type: "audio", content: "hello-3" },
];
// 函数重载
interface GetMessage {
(id: number): number | undefined;
(type: MessageType): message[];
};
// 根据传递的类型来确认返回值的类型
const getMessage: GetMessage = (query: any): any {
if(typeof query === "number") {
return data.find(message => message.id === query);
} else {
return data.filter(message => message.type === query);
};
};
const m1 = getMessage(1);
const m2 = getMessage("image");