typescript如何使用映射类型

这篇文章主要介绍了typescript如何使用映射类型，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

映射类型

在了解映射类型之前，需要了解 keyof, never, typeof, in。

keyof：keyof 取 interface 的键

interface Point {    x: number;    y: number;}// type keys = "x" | "y"type keys = keyof Point;

never：永远不存在的值的类型

官方描述：

the never type represents the type of values that never occur.

// 例子：进行编译时的全面的检查type Foo = string | number;function controlFlowAnalysisWithNever(foo: Foo) {  if (typeof foo === "string") {    // 这里 foo 被收窄为 string 类型  } else if (typeof foo === "number") {    // 这里 foo 被收窄为 number 类型  } else {    // foo 在这里是 never    const check: never = foo;  }}

使用 never 避免出现新增了联合类型没有对应的实现，目的就是写出类型绝对安全的代码。

typeof：取某个值的 type

const a: number = 3// 相当于: const b: number = 4const b: typeof a = 4

in：检查一个对象上是否存在一个属性

interface A {  x: number;}interface B {  y: string;}function doStuff(q: A | B) {  if ('x' in q) {    // q: A  } else {    // q: B  }}

映射类型就是将一个类型映射成另外一个类型，简单理解就是新类型以相同的形式去转换旧类型的每个属性。

Partial, Readonly, Nullable, Required

• Partial 将每个属性转换为可选属性

• Readonly 将每个属性转换为只读属性

• Nullable 转换为旧类型和null的联合类型

• Required 将每个属性转换为必选属性
  

type Partial = {    [P in keyof T]?: T[P];}type Readonly = {    readonly [P in keyof T]: T[P];}type Nullable = {   [P in keyof T]: T[P] | null }type Required = {  [P in keyof T]-?: T[P]}interface Person {    name: string;    age: number;}type PersonPartial = Partial;type PersonReadonly = Readonly;type PersonNullable = Nullable;type PersonPartial = {    name?: string | undefined;    age?: number | undefined;}type PersonReadonly = {    readonly name: string;    readonly age: number;}type PersonNullable = {      name: string | null;      age: number | null;}interface Props {  a?: number;  b?: string;}const obj: Props = { a: 5 };const obj2: Required = { a: 5 };// Property 'b' is missing in type '{ a: number; }' but required in type 'Required'.

Pick, Record

• Pick 选取一组属性指定新类型

• Record 创建一组属性指定新类型，常用来声明普通Object对象
  

type Pick = {  [P in K]: T[P];}type Record = {  [P in K]: T;}interface Todo {  title: string;  description: string;  completed: boolean;}type TodoPreview = Pick;const todo: TodoPreview = {  title: "Clean room",  completed: false,};todo; // = const todo: TodoPreviewinterface PageInfo {  title: string;}type Page = "home" | "about" | "contact";const nav: Record = {  about: { title: "title1" },  contact: { title: "title2" },  home: { title: "title3" },};nav.about; // = const nav: Record

Exclude, Omit

• Exclude 去除交集，返回剩余的部分

• Omit 适用于键值对对象的Exclude，去除类型中包含的键值对
  

type Exclude = T extends U ? never : Ttype Omit = Pick>// 相当于: type A = 'a'type A = Exclude<'x' | 'a', 'x' | 'y' | 'z'>interface Todo {  title: string;  description: string;  completed: boolean;}type TodoPreview = Omit;const todo: TodoPreview = {  title: "a",  completed: false,};

ReturnType

获取返回值类型，一般为函数

type ReturnType any>  = T extends (...args: any) => infer R ? R : any;declare function f1(): { a: number; b: string };type T1 = ReturnType;//    type T1 = {//        a: number;//        b: string;//    }

感谢你能够认真阅读完这篇文章，希望小编分享的"typescript如何使用映射类型"这篇文章对大家有帮助，同时也希望大家多多支持，关注行业资讯频道，更多相关知识等着你来学习!