广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >TypeScript映射类型详情
  • 309
分享到

TypeScript映射类型详情

2024-04-02 19:04:59 309人浏览 安东尼
摘要

目录1.映射类型(Mapped Types)2.映射修饰符(Mapping Modifiers)3.通过 as 实现键名重新映射(Key Remapping via as)4.深入探

前言:

typescript 的官方文档早已更新,但我能找到的中文文档都还停留在比较老的版本。所以对其中新增以及修订较多的一些章节进行了翻译整理。

本篇翻译整理自 TypeScript Handbook 中 「Mapped Types」 章节。

本文并不严格按照原文翻译,对部分内容也做了解释补充。

1.映射类型(Mapped Types)

有的时候,一个类型需要基于另外一个类型,但是你又不想拷贝一份,这个时候可以考虑使用映射类型。

映射类型建立在索引签名的语法上,我们先回顾下索引签名:


// 当你需要提前声明属性的类型时
type OnlyBoolsAndHorses = {
  [key: string]: boolean | Horse;
};
 
const confORMs: OnlyBoolsAndHorses = {
  del: true,
  rodney: false,
};


而映射类型,就是使用了 PropertyKeys 联合类型的泛型,其中 PropertyKeys 多是通过 keyof 创建,然后循环遍历键名创建一个类型:


type OptionsFlags<Type> = {
  [Property in keyof Type]: boolean;
};


在这个例子中,OptionsFlags 会遍历 Type 所有的属性,然后设置为布尔类型。


type FeatureFlags = {
  darkMode: () => void;
  newUserProfile: () => void;
};
 
type FeatureOptions = OptionsFlags<FeatureFlags>;
// type FeatureOptions = {
//    darkMode: boolean;
//    newUserProfile: boolean;
// }


2.映射修饰符(Mapping Modifiers)

在使用映射类型时,有两个额外的修饰符可能会用到,一个是 readonly,用于设置属性只读,一个是 ? ,用于设置属性可选。

你可以通过前缀 - 或者 + 删除或者添加这些修饰符,如果没有写前缀,相当于使用了 + 前缀。


// 删除属性中的只读属性
type CreateMutable<Type> = {
  -readonly [Property in keyof Type]: Type[Property];
};
 
type LockedAccount = {
  readonly id: string;
  readonly name: string;
};
 
type UnlockedAccount = CreateMutable<LockedAccount>;

// type UnlockedAccount = {
//    id: string;
//    name: string;
// }
// 删除属性中的可选属性
type Concrete<Type> = {
  [Property in keyof Type]-?: Type[Property];
};
 
type MaybeUser = {
  id: string;
  name?: string;
  age?: number;
};
 
type User = Concrete<MaybeUser>;
// type User = {
//    id: string;
//    name: string;
//    age: number;
// }

3.通过 as 实现键名重新映射(Key Remapping via as)

TypeScript 4.1 及以后,你可以在映射类型中使用 as 语句实现键名重新映射:


type MappedTypeWithNewProperties<Type> = {
    [Properties in keyof Type as NewKeyType]: Type[Properties]
}


举个例子,你可以利用「模板字面量类型」,基于之前的属性名创建一个新属性名:


type Getters<Type> = {
    [Property in keyof Type as `get${Capitalize<string & Property>}`]: () => Type[Property]
};
 
interface Person {
    name: string;
    age: number;
    location: string;
}
 
type LazyPerson = Getters<Person>;

// type LazyPerson = {
//    getName: () => string;
//    getAge: () => number;
//    getLocation: () => string;
// }

你也可以利用条件类型返回一个 never 从而过滤掉某些属性:


// Remove the 'kind' property
type RemoveKindField<Type> = {
    [Property in keyof Type as Exclude<Property, "kind">]: Type[Property]
};
 
interface Circle {
    kind: "circle";
    radius: number;
}
 
type KindlessCircle = RemoveKindField<Circle>;

// type KindlessCircle = {
//    radius: number;
// }

你还可以遍历任何联合类型,不仅仅是 string | number | symbol 这种联合类型,可以是任何类型的联合:


type EventConfig<Events extends { kind: string }> = {
    [E in Events as E["kind"]]: (event: E) => void;
}
 
type SquareEvent = { kind: "square", x: number, y: number };
type CircleEvent = { kind: "circle", radius: number };
 
type Config = EventConfig<SquareEvent | CircleEvent>
// type Config = {
//    square: (event: SquareEvent) => void;
//    circle: (event: CircleEvent) => void;
// }

4.深入探索(Further Exploration)

映射类型也可以跟其他的功能搭配使用,举个例子,这是一个使用条件类型的映射类型,会根据对象是否有 pii 属性返回 true 或者 false :


type ExtractPII<Type> = {
  [Property in keyof Type]: Type[Property] extends { pii: true } ? true : false;
};
 
type DBFields = {
  id: { format: "incrementing" };
  name: { type: string; pii: true };
};
 
type ObjectsNeedingGDPRDeletion = ExtractPII<DBFields>;
// type ObjectsNeedingGDPRDeletion = {
//    id: false;
//    name: true;
// }

--结束END--

本文标题: TypeScript映射类型详情

本文链接: https://www.lsjlt.com/news/159809.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • TypeScript映射类型详情
    目录1.映射类型(Mapped Types)2.映射修饰符(Mapping Modifiers)3.通过 as 实现键名重新映射(Key Remapping via as)4.深入探...
    99+
    2022-11-12
  • TypeScript 映射类型是怎样的
    这期内容当中小编将会给大家带来有关TypeScript 映射类型是怎样的,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。前言:TypeScript 的官方文档早已更新,但我能找到的中文文档都还停留...
    99+
    2023-06-22
  • 详解TypeScript映射类型和更好的字面量类型推断
    目录概述使用映射类型构建 Object.freeze()映射类型的语法更直观解释更多映射类型的示例映射类型的实际用例更好的字面量类型推断更好的 const 变量推断更好的只读属性推断...
    99+
    2022-11-12
  • 深入了解TypeScript中的映射类型
    目录1. 基本概念(1)索引访问类型(2)索引签名(3)联合类型(4)keyof 类型运算符(5)元组类型(6)条件类型2. 映射类型(1)初体验(2)概念(3)实例3. 实用程序中...
    99+
    2022-11-13
    TypeScript映射类型 TypeScript映射
  • Python映射类型之dict详解
    目录映射类型—dictlist(d)len(d)d[key]d[key]=valuedeld[key]keyinditer(d)clear()copy()classmet...
    99+
    2022-11-13
  • Hibernate映射之基本类映射和对象关系映射详解
    回想一些我们在没有学习ssh的时候,我们建立数据库的表时,首先是数据库建模E-R图,然后再通过实体模型来建立关系模型,再建立相应的表。实体间存在三种关系,一对一,一对多(或者说多对一),多对多。而如今我们要根据类来映射相应的表,那只能是通过...
    99+
    2023-05-31
    hibernate 对象 映射
  • 详解 TypeScript 枚举类型
    目录1. 数字枚举2. 字符串枚举3. 反向映射4. 异构枚举5. 常量枚举6. 枚举成员类型和联合枚举类型(1)枚举成员类型(2)联合枚举类型7. 枚举合并前言: TypeScri...
    99+
    2022-11-12
  • Hibernate中有哪些映射类型
    Hibernate中有哪些映射类型,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。1.Hibernate内置映射类型1).Java基本类型的Hibernate映射类型Java类型...
    99+
    2023-06-17
  • Python映射类型中dict怎么用
    这篇文章给大家分享的是有关Python映射类型中dict怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。映射类型 - dict字典可用多种方式来创建:使用花括号内以逗号分隔键: 值对的方式: {&ls...
    99+
    2023-06-29
  • 详解TypeScript的基础类型
    目录布尔类型数字类型字符串类型字符串和数字进行拼接undefined和 null数组类型元组类型枚举类型any类型void类型联合类型总结布尔类型 // 布尔类型--->boo...
    99+
    2022-11-12
  • JPA之映射mysql text类型的问题
    目录JPA之映射mysql text类型问题背景解决方案JPA各种类型映射处理JPA之映射mysql text类型 问题背景 jpa如果直接映射mysql的text/longtext...
    99+
    2022-11-12
  • 详解TypeScript中的类型保护
    目录概述类型断言in语法instanceof 语法typeof 语法总结概述 在 TypeScript 中使用联合类型时,往往会碰到这种尴尬的情况: interface Bird...
    99+
    2022-11-12
  • TypeScript类型断言VS类型守卫示例详解
    目录类型断言类型守卫使用 in 关键字使用 instanceof 关键字使用 typeof 关键字自定义类型守卫总结类型断言 类型断言有两种写法,分别为value as Type和&...
    99+
    2022-11-16
    TypeScript类型断言类型守卫 TypeScript 类型
  • MySQL 数据类型详情
    目录1、数值类型1.1、数值类型分类1.1.1、浮点数1.1.2、位类型1.1.3、时间日期类型1.1.4、字符串类型1.1.5、ENUM 类型1.1.6、SET类型1、数值类型 1...
    99+
    2022-11-12
  • python_tkinter事件类型详情
    目录1.事件绑定函数2.事件类型3.事件对象1.事件绑定函数 事件绑定函数有三个如下:        组件.bind('事件类型...
    99+
    2022-11-13
  • UniDAC使用教程(四):数据类型映射
    下载UniDAC最新版本Universal Data Access Components (UniDAC)是一款通用数据库访问组件,提供了多个数据库的直接访问,如针对Windows的Delphi, C++B...
    99+
    2022-10-18
  • Elasticsearch映射字段数据类型及管理
    目录Elasticsearch映射管理一 映射介绍1.1 字段数据类型1.2 映射参数二 创建索引三 查看索引Elasticsearch映射管理 在Elasticsearch 6.0...
    99+
    2022-11-10
  • Elasticsearch的删除映射类型操作示例
    目录一 前言二 什么是映射类型?三 为什么要删除映射类型?四 映射类型的替代方法4.1 将映射类型分开存储在索引中4.2 自定义类型字段回到顶部五 没有映射类型的父/子六 删除映射类...
    99+
    2022-11-13
  • Elasticsearch的删除映射类型怎么操作
    这篇文章主要讲解了“Elasticsearch的删除映射类型怎么操作”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Elasticsearch的删除映射类型怎么操作”吧!一 前言在elasti...
    99+
    2023-06-30
  • GoREFLECTLibrary反射类型详解
    目录一、反射概述二、反射类型对象基本数类型的 反射类型对象引用数据类型的 反射类型对象结构体的 反射类型对象指针的 反射类型对象一、反射概述 反射是指程序在运行期间对程序本身进行访问...
    99+
    2022-11-11
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作