基础网站建设代码,网页版微信怎么截图,百度网站的主要盈利来源不包括,泉州app开发掌握TypeScript的映射类型#xff0c;了解TypeScript内置的实用类型是如何工作的。 您是否使用过Partial、Required、Readonly和Pick实用程序类型? 你知道他们内部是怎么运作的吗? 如果您想彻底掌握它们并创建自己的实用程序类型#xff0c;那么不要错过本文所涵盖的内容。… 掌握TypeScript的映射类型了解TypeScript内置的实用类型是如何工作的。 您是否使用过Partial、Required、Readonly和Pick实用程序类型? 你知道他们内部是怎么运作的吗? 如果您想彻底掌握它们并创建自己的实用程序类型那么不要错过本文所涵盖的内容。
用户注册是日常工作中普遍存在的场景。在这里我们可以使用TypeScript定义一个User类型其中所有的键都是必需的。
type User { name: string; password: string; address: string; phone: string;};
通常对于注册用户我们只允许用户修改一些用户信息。此时我们可以定义一个新的UserPartial类型它表示要更新的用户对象的类型其中所有键都是可选的。
type UserPartial { name?: string; password?: string; address?: string; phone?: string; };
对于查看用户信息的场景我们希望用户对象对应的对象类型中的所有键都是只读的。对于这个需求我们可以定义Readonly User类型。
type ReadonlyUser { readonly name: string; readonly password: string; readonly address: string; readonly phone: string;};
回顾已经定义的三个与用户相关的类型您将看到它们包含大量重复的代码。 那么我们如何减少上述类型中的重复代码呢? 答案是您可以使用映射类型这是可用于将原始对象类型映射到新对象类型的泛型类型。 映射到可选属性 映射到只读属性 映射类型的语法如下: 映射类型语法
其中K中的P类似于JavaScript的for. .in语句用于遍历类型K中的所有类型以及类型变量T用于表示TypeScript中的任何类型。 映射类型修饰符
您还可以在映射过程中使用附加的修饰符read-only和问号(?)。通过添加加号()和减号(-)前缀来添加和删除相应的修饰符。默认情况下如果没有添加前缀则使用加号。
现在我们可以总结一下常见映射类型的语法。
{ [ P in K ] : T }{ [ P in K ] ?: T }{ [ P in K ] -?: T }{ readonly [ P in K ] : T }{ readonly [ P in K ] ?: T }{ -readonly [ P in K ] ?: T }
在介绍映射类型的语法之后让我们看一些示例。 让我们看一下如何使用映射类型重新定义UserPartial类型
type MyPartialT { [P in keyof T]?: T[P];};
type UserPartial MyPartialUser;
在上面的代码中我们定义了MyPartial映射类型然后使用它将User类型映射到UserPartial类型。keyof操作符用于获取类型的所有键其返回类型为联合类型。类型变量P在每次遍历时变为不同的类型T[P]这与属性访问的语法类似用于获取与对象类型的属性对应的值的类型。
让我们来演示MyPartial映射类型的完整执行流程如果你不确定可以多看几遍加深对TypeScript映射类型的理解。
MyPartial执行流程 TypeScript 4.1允许我们使用 as 子句来重新映射映射类型中的键。其语法如下:
type MappedTypeWithNewKeysT { [K in keyof T as NewKeyType]: T[K] // ^^^^^^^^^^^^^ // New Syntax}
其中NewKeyType的类型必须是字符串|数字|符号联合类型的子类型。使用 as 子句我们可以定义一个Getter实用程序类型为对象类型生成相应的Getter类型。
type GettersT { [K in keyof T as get${Capitalizestring K}]: () T[K]};
interface Person {
name: string; age: number; location: string;}
type LazyPerson GettersPerson;// {// getName: () string;// getAge: () number;// getLocation: () string;// } 在上面的代码中由于keyof T返回的类型可能包含符号类型并且Capitalize实用程序类型要求要处理的类型必须是字符串类型的子类型因此需要使用 操作符进行类型过滤。
此外在重新映射键的过程中我们可以通过返回 never 类型来过滤键。
// Remove the kind propertytype RemoveKindFieldT { [K in keyof T as ExcludeK, kind]: T[K]};
interface Circle { kind: circle; radius: number;}
type KindlessCircle RemoveKindFieldCircle;// type KindlessCircle {// radius: number;// }; 读完这篇文章我相信你已经理解了映射类型是做什么的以及TypeScript中的一些实用工具类型是如何实现的。 欢迎关注公众号文本魔术了解更多
