【TS】Interface接口

原创已于 2022-01-18 18:49:46 修改 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ts #typescript

于 2021-07-29 18:17:10 首次发布

TS 专栏收录该内容

5 篇文章

订阅专栏

本文深入探讨了TypeScript中的接口（Interface）概念，包括其用于描述对象形状、抽象类的抽象以及实现鸭子类型的机制。通过示例展示了如何定义接口，如IPerson，以及如何在类（如User）中实现接口。同时，接口还可用于定义函数类型，如Sayhi。此外，接口支持继承，如Teacher接口扩展了Person接口。最后，接口与type的区别在于type只能定义基本类型，而接口能定义更复杂的结构。

Interface定义

在TypeScript里，接口的作用就是定义Object类型，非常灵活有以下功能：

对对象（object）的形状（shape）进行描述。如属性、方法；
对类（class）进行抽象。在面向对象语言中较为常见；
Duck Typing（鸭子类型）。如果某东西具有鸭子的特性，就可以将它看作鸭子，是动态编程语言中对象的一种推断策略，更关注对象如何被使用，而不是对象的类型本身。

interface IPerson {
    readonly id: number; //readonly 只读属性
    name: string;
    age?: number; // ?标识符表示是可选属性
    [propName: string]: any; //预留属性
    say(): string; // 返回值类型
}

let viking: IPerson = {
    id: 1,
    name: 'viking',
    age: 20,
    say() {
        return 'say hello'
    }
}
viking.id = 2 // 试图改写只读属性id将为语法报错

class 应用 interface

类应用接口，一个类应用接口之后，必须具备接口里应有的属性和方法。

class User implements Person {

    name: 'lily',
    say() {
        return 'hello'
    }

}

interface 的继承

interface Person {
    name: string;
    age?: number;
    [propName: string]: any;
    say(): string;
    teach(): string;
}
interface Teacher extends Person {
    teach(): string
}

let viking: Teacher = {
    name: 'lily',
    say(){
        return 'hello'
    },
    teach() {
        return 'tech'
    }
}

用interface定义函数类型

interface Sayhi {
    (word: string): string. // （参数：类型）：返回值类型
}

const say: Sayhi = (word: string) => {
    return word
}

interface 和 type（类型别名）

type可以直接定义基础类型，interface必须定义对象或方法。

interface可以定义属性、方法、使用propName预留属性，可以使用 readonly 和 ? 标识只读和非必填。另外，Interface可继承，可以定义具体的方法类型，