ts中的映射类型

在开发的时候常常会遇到类型复用的情况, 但在某些时候类型又没完全复用, 可能我现在需要旧类型中的前两个属性, 又可能类型属性为了代码的健壮性不能修改了, 又或许我需要从原有属性剔除一些属性, 此时就可以用到ts中的映射类型 .

我觉得映射类型可以理解为从原有类型通过关键字再返回一个新类型

  • Partial  可选类型

  • ReadOnly  只读类型

  • Pick  从旧选新类型

  • Omit  剔除类型

Partial 可选类型

Partial 关键字可以使原有类型的属性变为可选的

// 定义了一个类型 prop
// Partial 可选关键字 关键字用于将类型变量Prop中定义的属性设置为可选
type Prop = {
  name: string
  age: number
}
const obj1: Partial<Prop> = {
  name: 'abc',
}

ReadOnly 只读类型

ReadOnly 关键字用于类型, 使用此类型进行赋值操作, 将不能再进行修改

// ReadOnly 只读关键字 设置类型变量的属性是只读的, 不能修改
type Prop = {
  name: string
  age: number
}
const obj2: Readonly<Partial<Prop>> = {
  age: 1,
}
// obj2.age = 2 // 报错因为obj.age是只读属性

Pick 从旧选新类型

Pick 关键字基于一个类型新建一个类型

// Pick 从类型变量中选一组属性构造新属性
// 参数分别是 类型变量 属性 | 属性 | 属性 ....
type teacher = {
  name: string
  age: number
  skill: string
  sex: string
}
type waiter = Pick<teacher, 'name' | 'age' | 'skill'>
const waiterObj: waiter = {
  name: 'zs',
  age: 12,
  skill: 'caobi',
}

Omit  剔除类型

剔除类型我觉得优点鸡肋, 如果想删除类型中的某个属性, 我可以在代码中直接删除, 也可以变为可选类型间接删除, 不过使用Omit 显得更加规范一点吧

// Omit 剔除类型变量中的某些属性

type teacher = {
  name: string
  age: number
  skill: string
  sex: string
}

const biantaiType: Omit<teacher, 'sex'> = {
  name: 'a',
  age: 1,
  skill: 'b',
  // sex : '2' 报错 因为我已经把 sex 属性剔除掉了
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值