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

TypeScript-映射类型

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
  • 根据 的类型创建出 的类型, 我们称之为映射类型

假如如下的 TestInterface1 是旧的类型:

interface TestInterface1 {
    name: string,
    age: number
}

那么这个时候根据 TestInterface1 创建出来的新的类型就称之为映射类型,例如如下的 TestInterface2

interface TestInterface2 {
    readonly name: string,
    readonly age: number
}

如上只是一个简单的示例,接下来就来看看真实的示例,就是真实的通过旧的类型创建出来的新的类型:

type ReadonlyTestInterface<T> = {
    readonly [P in keyof T]: T[P]
}

如上我定义了一个类型别名通过该类型别名就可以实现从旧的类型转换到新的类型,如上 [P in keyof T] 的作用就是遍历出指定类型所有的 key, 添加到当前对象上,然后使用一下该类型别名:

interface TestInterface1 {
    name: string,
    age: number
}

type ReadonlyTestInterface<T> = {
    readonly [P in keyof T]: T[P]
}

type MyType = ReadonlyTestInterface<TestInterface1>

测试方式很简单,就是按住键盘上的 ctrl + 鼠标左键移动到 MyType 上面即可查看最新的类型,如果还想让创建出新的类型当中的属性变为可选的那么该如何实现呢如下:

interface TestInterface1 {
    name: string,
    age: number
}

type ReadonlyTestInterface<T> = {
    readonly [P in keyof T]?: T[P]
}

type MyType = ReadonlyTestInterface<TestInterface1>

测试方式同上,其实还可以通过 +/- 来指定 添加 还是 删除 只读可选 修饰符,假如现在的接口当中有只读和可选的属性,如果我们在创建出来的新类型的时候不想要只读和可选,那么就可以利用 - 在类型别名当中进行去除代码如下:

interface TestInterface1 {
    readonly name?: string,
    readonly age?: number
}

type ReadonlyTestInterface<T> = {
    -readonly [P in keyof T]-?: T[P]
}

type MyType = ReadonlyTestInterface<TestInterface1>

如果想 添加 也是同理可证的如下:

interface TestInterface1 {
    readonly name?: string,
    readonly age?: number
}

type ReadonlyTestInterface<T> = {
    +readonly [P in keyof T]+?: T[P]
}

type MyType = ReadonlyTestInterface<TestInterface1>
  • 由于生成 只读 属性和 可选 属性比较常用, 所以 TS 内部已经给我们提供了现成的实现
  • Readonly:添加只读
  • Partial:添加可选
interface TestInterface1 {
    readonly name?: string,
    readonly age?: number
}

type MyType1 = Readonly<TestInterface1>;
type MyType2 = Partial<TestInterface1>;
type MyType3 = Partial<Readonly<TestInterface1>>;

Pick 映射类型

  • 将原有类型中的 部分 内容映射到新类型中
interface TestInterface {
    name: string,
    age: number
}

type MyType = Pick<TestInterface, 'name'>;

验证方式同上 ctrl + 鼠标左键移动到 MyType 上面即可查看最新的类型。

Record 映射类型

  • 他会将一个类型的所有属性值都映射到另一个类型上并创造一个新的类型
type Animal = 'person' | 'dog' | 'cat';

interface TestInterface {
    name: string;
    age: number;
}

type MyType = Record<Animal, TestInterface>;

let res: MyType = {
    person: {
        name: 'zs',
        age: 18
    },
    dog: {
        name: 'wc',
        age: 3
    },
    cat: {
        name: 'mm',
        age: 2
    }
}

console.log(res);

验证方式同上 ctrl + 鼠标左键移动到 MyType 上面即可查看最新的类型。


鲜花

握手

雷人

路过

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

请发表评论

全部评论

专题导读
上一篇:
TypeScript-泛型约束发布时间:2022-07-18
下一篇:
vue3+vuex4.0+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