TypeScript 之映射类型 TypeScript 的官方文档早已更新，但我能找到的中文文档都还停留在比较老的版本。所以对其中新增以及修订较多的一些章节进行了翻译整理。...映射类型（Mapped Types） 有的时候，一个类型需要基于另外一个类型，但是你又不想拷贝一份，这个时候可以考虑使用映射类型。...映射类型建立在索引签名的语法上，我们先回顾下索引签名： // 当你需要提前声明属性的类型时 type OnlyBoolsAndHorses = { [key: string]: boolean |...（Mapping Modifiers） 在使用映射类型时，有两个额外的修饰符可能会用到，一个是 readonly，用于设置属性只读，一个是 ?...（Key Remapping via as） 在 TypeScript 4.1 及以后，你可以在映射类型中使用 as 语句实现键名重新映射： type MappedTypeWithNewProperties
映射类型概述 根据 旧 的类型创建出 新 的类型, 我们称之为映射类型 假如如下的 TestInterface1 是旧的类型： interface TestInterface1 { name:...string, age: number } 那么这个时候根据 TestInterface1 创建出来的新的类型就称之为映射类型，例如如下的 TestInterface2： interface...type MyType = ReadonlyTestInterface 测试方式同上，其实还可以通过 +/- 来指定 添加 还是 删除 只读 和 可选 修饰符，假如现在的接口当中有只读和可选的属性...Record 映射类型 他会将一个类型的所有属性值都映射到另一个类型上并创造一个新的类型 type Animal = 'person' | 'dog' | 'cat'; interface TestInterface...由映射类型进行推断 对于 Readonly，Partial 和 Pick 的映射类型, 我们可以对映射之后的类型进行拆包 还原映射之前的类型, 这种操作我们称之为 拆包 interface MyInterface
一、什么是接口 在 TypeScript 中，我们使用接口（Interfaces）来定义对象的类型 接口是一系列抽象方法的声明，是一些方法特征的集合，第三方可以通过这组抽象方法调用，让具体的类执行具体的方法...TypeScript 中接口除了可用于对类的一部分行为进行抽象以外，还可用于对「对象的形状（Shape）」进行描述 举个例子： interface Person { name: string;...上例中，任意属性的值允许是 string，但可选属性 age 的值却是 number，number 不是 string 的子属性，所以报错了 注意：一个接口中只能定义一个任意属性 如果接口中有多个类型的属性...上例中，报错信息有两处： 1、在对 faker 进行赋值的时候，没有给 id 赋值 2、在给 faker.id 赋值的时候，由于它是只读属性，所以报错了 五、联合类型和接口 以下实例演示了如何在接口中使用联合类型...:Ages; list2["Faker"] = 22 // 正确 list2[2] = "ten" // 错误 七、接口继承 接口继承就是说接口可以通过其他接口来扩展自己，Typescript
类型转换是TS最好玩也是语言的灵魂，想玩好需要熟练各种手段和工具，下面一一介绍类型转换的一些常用手段。...Mapped Types ---- 有时候对象属性类型重复或者一个类型基于另一个了类型的时候 映射类型基于索引签名的语法构建，用于声明尚未提前声明的属性类型： type OnlyBoolsAndHorses...有两个附加的修饰符可以在映射期间应用：readonly和？...在TypeScript 4.1及更高版本中，您可以使用映射类型中的as子句重新映射映射映射类型中的键： type MappedTypeWithNewProperties = { [...，例如，这里有一个使用条件类型的映射类型，该类型根据对象的属性pii是否设置为文本true返回true或false： type ExtractPII = { [Property in keyof
TypeScript联合类型 联合类型表示取值可以为多种类型中的一种 如下所示 /** * 联合类型 */ var muchtype:string|number="hello"; muchtype=...1; 这一块我们必须使用string或者number都支持的类型，那么下面我们可以进行调用扩展方法toString() /** * 联合类型 * 注意：如果说我们使用字符串的length属性那么我们需要注意...，如果是number类型是不支持的 * 这一块我们必须使用string或者number都支持的类型，那么下面我们可以进行调用扩展方法toString() * */ var muchtype:string...中对象类型-接口 接口可以描述一种抽象的行为，也可以描述对象的结构形状,当然我们也需要遵守接口命名规范,接口一般首字母大写 当然在一些语言上面建议接口的名称前缀加上I前缀 interface IStudent...{ name:string } /** * 接口规范了name属性是必须要写的所以我们要通过第四行代码进行使用 * 接口起到一个约束作用约束我们这些属性字段必须一对一的编写. */ var
接口类型我们经常说道的接口比如后端写了一个接口给前端调用，接口包括地址、参数、请求方式等等，参数规定了传参的类型。而在TS中的接口的定义是什么呢？...使用通过interface来声明类的类型，使用时需要注意以下几点：interface声明的类的首字母大写，这是tslint规范，当然不使用时tslint规范，写成小写是不会报错，建议大写在声明变量时，变量的形状必须跟接口的形状保持一致...，即变量的属性值的类型必须和声明的类的属性的类型保持一致，否则会报错，少写、多写都会报错。...name: 'typescript',}另外除了以上基础用法外，还可以设置接口属性只读、索引签名、可选属性、函数类型接口，具体如下：（1）设置属性只读我们在接口中属性前加readonly，表示该属性为只读...具体使用是在接口中定义一个 [property:string]:any，意思是定义了一个属性，属性的类型是字符串，属性值类型为任意。
在TypeScript中，type和interface都用于定义对象或类型的形状。它们在功能上看起来相似，但在使用方式和扩展方面有一些区别。Interfaces（接口）：接口用于定义对象的结构或形状。..., age: 30,};Types（类型）：类型用于在TypeScript中创建不同类型的别名。...如果您使用相同名称声明了两个接口，TypeScript会将它们合并为一个。类型可以通过交叉（&）或联合（|）的组合使用，但不能像接口那样进行扩展或合并。语法：接口使用interface关键字。...类型使用type关键字。声明：接口更适合定义对象形状、契约或实现它们的类。类型更加灵活，不仅可以定义对象形状，还可以定义联合类型、交叉类型、条件类型等。...为原始类型、联合类型、交叉类型或复杂类型定义别名，以提高代码可读性。在许多情况下，接口和类型都可以完成相同的任务，选择使用哪一个通常取决于个人偏好或代码库中的特定需求。
is only a string 二.映射类型 与索引类型类似，另一种从现有类型衍生新类型的方式是做映射： In a mapped type, the new type transforms each...T = Boxed; 上例中Boxed的True分支具有any[]类型约束，因此能够通过索引访问（T[number]）得到数组元素的类型 应用场景 条件类型结合映射类型能够实现具有针对性的类型映射...TypeScript 还内置了一些常用的条件类型： // 从 T 中去掉属于 U 的子类型的部分，即之前示例中的 Diff type Exclude = T extends U ?...R : any; （摘自TypeScript/lib/lib.es5.d.ts） 具体示例见Predefined conditional types 四.总结 除类型组合外，另2种产生新类型的方式是类型查询与类型映射...类型查询： 索引类型：取现有类型的一部分产生新类型 类型映射： 映射类型：对现有类型做映射得到新类型 条件类型：允许以类型兼容关系为条件进行简单的三目运算，用来表达非均匀类型映射 参考资料 Advanced
索引类型是 TypeScript 中的常见类型，它是聚合多个元素的类型，对象、类、元组等都是索引类型。...： TypeScript 也内置了很多基于映射类型实现的工具类型，比如 Partial、Required 等。...总之，会了映射类型就能够对索引类型做各种变换了。 但是，这些都是对索引类型整体做的变换，变换的结果依然是一个索引类型。 有的时候是想把它们分开的。比如这种需求： 希望能把每个索引给分开。...外层映射类型 [Key in keyof Obj] 就是对每个 Key 做处理，它值也是一个映射类型，而 Key2 来自于刚才的 Key，那么这样映射完之后的类型就是这样的： 这时你取 name 的值就是这样的...总结 索引类型是 TypeScript 中的常见类型，可以通过映射类型的语法来对它做一些修改，生成新的索引类型。
因为我也是 TypeScript 的初学者，所以无法保证翻译百分之百准确，若有错误，欢迎评论区指出； 翻译内容：暂定翻译内容为 TypeScript Handbook，后续有空会补充翻译文档的其它部分；...项目地址：TypeScript-Doc-Zh，如果对你有帮助，可以点一个 star ~ 本章节官方文档地址：Mapped Types 映射类型 有时候我们不想重复编写代码，这时候就需要基于某个类型创建出另一个类型...索引签名用于为那些没有提前声明的属性去声明类型，而映射类型是基于索引签名的语法构建的。...在 TypeScript4.1 或者更高的版本中，你可以在映射类型中使用 as 子句实现键的重新映射： type MappedTypeWithNewProperties = { [...映射类型也可以和本章（类型操控）介绍的其它特性搭配使用。
可定义的类型 以下所写的并不代表typescript的数据类型，而是在使用过程中可以用作定义的类型。...interface : 接口； 该类型需要通过interface关键词来实现 enum ：枚举类型； 该类型需要通过enum关键词来实现 void ：空类型； 该类型规定函数返回值，代表无返回值...当一些复杂类型需要多次使用，可以通过type来自定义类型，便于复用 type GetMoney = ()=>string|number let getMoney:GetMoney = function...-> name） 数字枚举成员还具有反向映射， 要注意的是不会为字符串枚举成员生成反向映射 enum Enum { A } let a = Enum.A; let nameOfA = Enum...(interface) 接口的作用是对值所具有的结构进行类型检查，为这些结构定义规定，让你的代码按照规定去执行。
介绍--我们经常说道的接口比如后端写了一个接口给前端调用，接口包括地址、参数、请求方式等等，参数规定了传参的类型。而在TS中的接口的定义是什么呢？...，变量的形状必须跟接口的形状保持一致，即变量的属性值的类型必须和声明的类的属性的类型保持一致，否则会报错，少写、多写都会报错。...', time: 2, age:18}与声明的类的属性的类型不一致let info: Class = { name: 'typescript', time: '2',}少写属性let...info: Class = { name: 'typescript',}另外除了以上基础用法外，还可以设置接口属性只读、索引签名、可选属性、函数类型接口，具体如下：（1）设置属性只读我们在接口中属性前加...具体使用是在接口中定义一个 [property:string]:any，意思是定义了一个属性，属性的类型是字符串，属性值类型为任意。
. ---- 为了保证的可读性，本文采用意译而非直译。 TypeScript 2.1 引入了映射类型，这是对类型系统的一个强大的补充。本质上，映射类型允许w咱们通过映射属性类型从现有类型创建新类型。...根据咱们指定的规则转换现有类型的每个属性。转换后的属性组成新的类型。 使用映射类型，可以捕获类型系统中类似 Object.freeze() 等方法的效果。...Point 接口，咱们还定义了另一个接口FrozenPoint，它与 Point 相同，只是它的所有属性都被使用 readonly 定义为只读属性。...此外，TypeScript 定义了其他映射类型，这些映射类型在各种情况下都非常有用。...在 TypeScript 2.0 中，类型系统扩展了几个新的字面量类型： boolean 字面量类型 数字字面量 枚举字面量 不带类型注解的 const 变量或 readonly 属性的类型推断为字面量初始化的类型
TypeScript的接口，个人理解就是一种约束，包括各种类型的契约或者代码定义上的契约。当然，和java中的用法基本一致，接口可以被继承也可以被实现。...可索引的类型 接口描述这种类型，比较有意思，可索引的类型包含两种，一种是对象，一种的数组。...可以在接口中描述索引的类型，以及索引值的类型，如下： interface StringArray { [index: number]: string; } let z1: StringArray...索引签名除了number还要string，可以同时使用两种类型的索引。但是要注意：数字类型索引的索引值一定要是字符串索引类型索引值的子类型。...Dog，Animal必须是Dog的子类型，但是实际恰恰相反——Dog是Animal类型的子类型，所以这里会报错。
本文会和大家详细介绍 TypeScript 中的映射类型（Mapped Type），看完本文你将学到以下知识点： 数学中的映射和 TS 中的映射类型的关系； TS 中映射类型的应用； TS 中映射类型修饰符的应用...这样就能很好的实现映射过程的复用。 二、TypeScript 中的映射类型是什么？ 1....概念介绍 TypeScript 中的映射类型和数学中的映射类似，能够将一个集合的元素转换为新集合的元素，只是 TypeScript 映射类型是将一个类型映射成另一个类型。...https://juejin.cn/post/7009046640308781063 三、映射类型的应用 TypeScript 映射类型经常用来复用一些对类型的操作过程，比如 TypeScript 目前支持的...，详细介绍 TypeScript 映射类型（Mapped Type）并介绍映射类型的应用和修饰符的应用。
TypeScript Web 项目的API 的参数与响应数据类型，如果不手动映射，默认是缺失的： async function sendRequest(url: string, params?...可是至此好像并没有很大的帮助，毕竟我们也可以在请求编写 as AppleRes 映射类型，下面继续。...指定参数类型 映射参数类型是简单的, 只需要在 params 参数指定： // 假定接口A的路径是 '/apple', 参数类型是 AppleReq, 响应类型是 AppleRes interface...这样的话，每次请求接口都需要手动输入 Req， Res 的类型，很麻烦。...绑定请求路径&参数&响应数据类型 假定我们有很多个接口，我们一一定义它们的映射关系，使用 interface 挺合适： interface AppleRes { code: number data
keyof 操作符：keyof 是TypeScript中的一个操作符，它返回一个类型的所有属性名的联合类型。...通过这些概念，我们可以更深入地了解TypeScript的映射类型，并通过实际的例子来掌握它们的用法。接下来，我们将逐步展示从简单到高级的7个映射类型的实例，让你轻松掌握这一强大的类型转换工具。...一、布尔类型的转换 在TypeScript中，有时候我们需要将一种类型的属性转换为另一种类型。使用映射类型可以轻松实现这一点。下面我们通过一个具体的例子来展示如何将User类型的属性转换为布尔类型。...同样，在TypeScript中，映射类型可以遍历类型的每个属性并对其进行转换。 二、 将类型属性设为可选 在TypeScript中，我们常常需要将某个类型的所有属性设为可选属性。...的映射类型真的是一项非常强大的功能，能让我们实现各种复杂的类型转换。
类型别名概述类型别名就是给一个类型起个 新名字, 但是它们都代表 同一个类型例如: 你的本名叫张三, 你的外号叫小三, 小三就是张三的别名, 张三和小三都表示同一个人type MyString = string...MyString 还是 string 都表示 string 也就是说将来你使用 MyString 别名作为变量的类型那么改变量就只能存储字符串类型的数据像如上的示例代码我赋值了其它类型的数据其实在编译器当中已经报错了如下...接口和类型别名是相互兼容的type MyType = { name: string}interface MyInterface { name: string}let value1: MyType...= {name: 'yangbuyiya'};let value2: MyInterface = {name: 'zs'};value1 = value2;value2 = value1;接口和类型别名的异同都可以描述..., boolean, number];type 不会自动合并interface 的自动合并可查看 TypeScript 当中的 30.TypeScript-接口合并现象 这里就只演示 type 的不会自动合并的不同点
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
