【TS】使用type实现接口继承效果

文章介绍了如何使用Type在JavaScript中实现接口继承的效果,通过`type`关键字定义`Person`和`Student`类型,尽管能模拟部分接口特性,但在变量声明时不会一次性显示所有属性和方法,存在告知不完全的局限性。
摘要由CSDN通过智能技术生成

如何使用type实现接口继承的效果

接口继承的写法

// 接口继承
interface Person {
  name: string
  age: number
  hobby?: string 
  say: (content: string) => void
}
interface Student extends Person {
  score: number
}

使用 type 模拟 interface的继承效果

// 使用type实现类似接口继承效果
type Person = {
  name: string
  age: number
  hobby?: string 
  say: (content: string) => void
}
type Student = {
	score: number
} & Person

如上写法虽然可以实现类似接口继承的效果,但还是有一定弊端,比如
在这里插入图片描述
声明变量时,并不会像接口继承一样一次性提醒出全部属性和方法,他会先提醒一部分类型,然后提醒&后的类型
在这里插入图片描述

TypeScript中,可以使用interface关键字来定义接口,并且可以通过export关键字将接口导出。导出接口的方式有两种,一种是直接在定义接口的同时使用export关键字导出,例如: export interface Config { name: string; } 另一种方式是先定义接口,然后在另一个文件中使用export default关键字导出接口,例如: interface Config { name: string; } export default Config; 这样就可以在其他文件中使用import语句导入并使用接口了。需要注意的是,interface支持同时声明和默认导出,而type不支持。 值得一提的是,interface和type alias在继承方式上也有区别。interface使用extends关键字来进行扩展,例如: interface Animal { name: string; } interface Bear extends Animal { honey: boolean; } 而type alias使用&操作符来进行扩展,例如: type Animal = { name: string; } type Bear = Animal & { honey: boolean; } 这就是在TypeScript使用interface导出的方式。希望能对你有所帮助!<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [TS中的interface与type的区别](https://blog.csdn.net/yhl521112/article/details/124836325)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [ts -type alias 和interface的区别](https://blog.csdn.net/weixin_28750673/article/details/124841143)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [json-to-ts-interface:json字符串自动转换为TypeScript interface定义](https://download.csdn.net/download/weixin_42116701/19195334)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

田本初

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值