TypeScript：接口、函数重载

接口

接口用于对复杂的数据结构进行类型描述、定义类型规范，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");