typescript中的类型type与接口interface

typescript中的type相当于是给类型起一个新的名字

基本用法:
比如我想声明一个类型为number的年龄age,刚开始学typescript,我们可能会这样写

let age:number = 10

接触到type也可以这样写

//这里的second其实代表的就是number
type second = number

let b:second = 20

关键字:《1》pick:挑选指定的类型

interface Person {
  name: string;
  age: number;
  id: number;
  sex: 0 | 1;
}

// 问女生年纪不太礼貌,所以我们不需要 age 这个属性
type Woman = Pick<Person, "name" | "id">;

//返回值:
woman:{
	name: string;
	id: number;
}

《2》K extends keyof T:“或”匹配所有可能的类型
如下式代码

interface person {
    name:string,
    sex:string,
    age:number
}

// K extends keyof person
// 这里的k可能是
{
    name:string,
}

{
    name:string,
    sex:string,
}

{
    name:string,
    sex:string,
    age:number
}
等等

《3》type可以使用in关键字生成映射类型,这里的key获取的是

type Keys = "name" | "sex"

type DulKey = {
    [key in Keys]: string    // 类似for...in
}

let stu: DulKey = {
    name: "wang",
    sex: "man"
}

类型type其实和接口interface有些像,但是两者区别在哪:
(1)extends 和 &
接口interface可以通过extends拓展
其实extends相当于一个加好+,将personage和personall键值对进行合并

interface personage {
    age:number
}

interface personall extends personage {
    name:string
}

let person:personall = {
    name:"xiaoming",
    age:14
}
console.log(person)

类型type可以通过&实现类型的交叉

type personage = {
    age:number
}

type personname = {
    name:string
}

let personall:personage&personname = {
    age:13,
    name:"xiaoming"
}

console.log(personall)

(2)两者关联:

// interface 扩展 type
type Name = {
    name: string;
}
interface User extends Name {
    age: number;
}
let stu:User={name:'wang',age:1}

// type 与 interface 交叉
interface Name {
    name: string;
}
type User = Name & {
    age: number;
}
let stu:User={name:'wang',age:1}

(3)接口interface可以声明多次,声明多次相当于扩展,如下式代码,这个person声明了3次,那么它所应该具有的属性是3个,如果少写了,ts就会报错;type不可以定义多次

interface person {
    name:string
}

interface person {
    age:number
}

interface person {
    sex:string
}



let stu:person = {
    name:"xiaoming",
    age:12,
    sex:"男"
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

Realistic-er

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

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

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

打赏作者

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

抵扣说明:

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

余额充值