Ts中type和interface定义类型扩展类型的方法

1、在Ts中,我们可以通过type和interface的方式去定义类型,一般情况下通过interface接口的方法定义的类型都可以通过type去定义。注意type要添加等号。Interface定义类型不需要添加等号。

下面代码是用type声明一个string类型的例子

type user=string
//接收一个字符串类型的数据,返回一个user类型(字符串类型)的数据
function Input(str:string):user{
    return str.slice(0,2)
}
//把返回结果赋值给userInput
let userInput=Input('hello')
//重新给其赋值一个字符串类型的值,没有报错,说明用type声明的字符串类型生效
userInput='new'

下面代码是用interface声明一个对象类型的例子

interface Point{
    x:number,
    y:number
}
//接收一个Point的对象类型数据
function printCoord(pt:Point){

}
//给函数传一个对象类型的数据,没有报错,说明用interface声明的类型生效
printCoord({
    x:100,
    y:100
})

2、 Interface扩展接口:可以在interface后面添加关键字extends去扩展接口。类型别名type需要使用&符号去扩展接口

下面代码是用extends扩展接口的例子

//扩展接口
interface Animal{
    name:string
}
interface Bear extends Animal{
    honey:boolean
}
//声明一个类型为Bear类型的对象,要求既要有name,也要有honey。说明用extends扩展接口成功
const bear:Bear={
    name:'winie',
    honey:true
}
console.log(bear.name);
console.log(bear.honey);

 下面代码是用type扩展接口的例子

//扩展类型
type Animal={
    name:string
}
//给Animal扩展接口
type Bear=Animal&{
    honey:boolean
}
const bear:Bear={
    name:'winie',
    honey:true
}

3、向现有类型添加新字段,interface可以通过定义同名的方式去扩展字段,类型别名type是不能通过同名的方式去进行扩展的。

下面代码是interface通过定义同名的方式向现有类型添加新字段

//向现有的类型添加新字段
interface MyWindow{
    title:string
}
interface MyWindow{
    count:number
}
const w:MyWindow={
    title:'wz',
    count:666
}

 下面代码会报错,因为类型别名type是不能通过同名的方式去进行扩展的。

//类型创建后不能更改
type MyWindow={
    title:string
}
type MyWindow={

}

  • 8
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
TypeScript,可以使用interface关键字来定义接口,并且可以通过export关键字将接口导出。导出接口的方式有两种,一种是直接在定义接口的同时使用export关键字导出,例如: export interface Config { name: string; } 另一种方式是先定义接口,然后在另一个文件使用export default关键字导出接口,例如: interface Config { name: string; } export default Config; 这样就可以在其他文件使用import语句导入并使用该接口了。需要注意的是,interface支持同时声明和默认导出,而type不支持。 值得一提的是,interfacetype 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* [TSinterfacetype的区别](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
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值