• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

【Typescript】类与接口的关系(8)

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

今天我们介绍一下接口与类的关系。我们通过一个图来说明。

从这个图中我们可以看接口与类的关系,首先接口之间是可以相互继承的,这样能实现接口的复用。
类也可以相互继承,可以实现方法与类的复用。
接口是可以通过类来实现的,但是接口只能约束类的公有成员。另外,接口也可以抽离类的成员,抽离的时候会包括公有成员,私有成员,和受保护的成员。

interface Human {
    name: string,
    eat(): void
}

class Asia implements Human {
    constructor(name: string) {
        this.name = name;
    }
    name: string
    eat() {}
}

接口的特征

接口只能约束类的公有成员

interface Human {
    name: string,
    eat(): void
}

class Asia implements Human {
    constructor(name: string) {
        this.name = name;
    }
    private name: string // 这里这样写,这个类会报错, Property 'name' is private in type 'Asia' but not in type 'Human'.
    eat() {}
}

接口不能约束类的构造函数

interface Human {
    // new (name: string): void // 这里会提示实现了错误的类的接口,  Type 'Asia' provides no match for the signature 'new (name: string): void'.
    name: string,
    eat(): void
}

class Asia implements Human {
    constructor(name: string) {
        this.name = name;
    }
    name: string // 这里这样写,这个类会报错, Property 'name' is private in type 'Asia' but not in type 'Human'.
    eat() {}
}

接口的继承

接口可以像类一样继承,并且一个接口可以继承多个接口。

interface Human {
    name: string,
    eat(): void
}

class Asia implements Human {
    constructor(name: string) {
        this.name = name;
    }
    name: string 
    eat() {}
}

interface Man extends Human {
    run(): void
}

interface Child {
    cry(): void
}

interface Boy extends Man, Child {}

let boy: Boy = {
    name: '',
    run() {},
    cry() {},
    eat() {}
}

接口还可以继承类

class Auto {
    state = 1
}

interface AutoInterface extends Auto {

}

class C implements AutoInterface {
    state = 1
}

class Bus extends Auto implements AutoInterface {

}

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
typescript参数类型发布时间:2022-07-18
下一篇:
TypeScript入门五:TypeScript的接口发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap