第十四节: TypeScript 映射类型

映射类型

1. 映射类型

当你不要重复使用当前类型,有时又需要一个与当前类型结构相同的类型, 一句一种类型生成一种新型类型,这就是映射类型.

映射类型是建立在索引签名的语法之上的, 用于声明未提前声明的属性类型

例如:

// 索引签名
type OnlyBoolean= {
  [key:string]:boolean
}

const onlyBoolean:OnlyBoolean = {
  del:true,
  ready: false
}

// 映射类型
/*
    类型参数Type 如果接受一个对象类型 {name:string, age:number}
    keyof Type 将会返回 'name' | 'age'的联合类型
    Property只是OptionsFlags类型属性的别名
    通过 in typeof Type , Property 可能是'name',或'age', 每个属性值都是boolean类型
    即OptionsFlags 为对象类型 {name:boolean, age:boolean}
*/
type OptionsFlags<Type> = {
  [Property in keyof Type]: boolean
}

// 基于当前类型创建映射类型
type FeatureFlags = {
  name: string,
  age:number
}

type FeatureOptions = OptionsFlags<FeatureFlags>
// 此时FeatureOptions的类型为:
/**
  type FeatureOptions = {
    name: boolean;
    age: boolean;
  }
 * 
*/

映射类型的结构和索引签名类型的结构相同, 核心语句[Property in keyof Type],

映射类型是一种通用类型, 此示例中，OptionsFlags将从类型参数Type中获取所有属性并将其值更改为布尔类型的值。

此时新类型将具有目标类型所有的属性, 只不过所有的属性类型别修改为boolean类型

2. 映射修饰符

在映射期间可以使用两个额外的修饰符,分别是影响可变性(只读,readonly)和可选性(?)

可以通过添加-符号前缀来删除原有的只读(readonly)属性和可选(?)属性, 不使用-默认是添加这些修饰符+

也就是将保留映射目标类型中的只读,与可选修饰符

2.1 保留目标类型修饰符

例如: 不使用-修饰符, 保留原有的属性标识

// 映射类型
type OptionsFlags<Type> = {
  [Property in keyof Type]: boolean
}

// 使用映射类型
// 映射目标类型
type FeatureFlags = {
  readonly name: string,
  age?:number
}

// 映射返回的新类型
type FeatureOptions = OptionsFlags<FeatureFlags>
// 此时FeatureOptions的类型为:
/**
  type FeatureOptions = {
    readonly name: boolean;
    age?: boolean;
  }
 * 
*/

示例中, 映射返回类型将保留映射目标类型中的只读readonly和可选?修饰符.因为默认保留原有修饰符

<br./>

2.2 删除目标类型修饰符

通过在映射类型中使用-修饰符, 删除只读属性

用法:在只读属性修饰符readonly前添加-符号.表示删除的意思

例如:

// 映射类型(删除只读属性readonly)
type OptionsFlags<Type> = {
  -readonly [Property in keyof Type]: boolean
}

此时映射后返回的新类型将不存在只读(readonly)属性

// 映射返回的新类型
type FeatureOptions = OptionsFlags<FeatureFlags>
// 此时FeatureOptions的类型为:
/**
  type FeatureOptions = {
    name: boolean;
    age?: boolean;
  }
 * 
*/

示例中我们只改变了可变性, 也可以改变可选性

修改映射类型修饰符, 通过在可选修饰符? 修饰符前添加-, 删除可选性(?)属性修饰符,

例如:

type OptionsFlags<Type> = {
  -readonly [Property in keyof Type] -?: boolean
}

通过在?前添加-修饰符, 此时映射后的类型将不再具有可选属性,全部变成必传属性

// 映射返回的新类型
type FeatureOptions = OptionsFlags<FeatureFlags>
// 此时FeatureOptions的类型为:
/**
  type FeatureOptions = {
    name: boolean;
    age: boolean;
  }
*/

3. 添加属性修饰符

映射类型时,除了可以删除目标类型中的修饰符, 还可以在映射时添加属性修饰符

例如:

// 映射目标类型(目标类型属性没有任何修饰符)
type FeatureFlags = {
  name: string,
  age: number
}

// 映射类型(添加修饰符)
type OptionsFlags<Type> = {
  readonly [Property in keyof Type] ?: boolean
}



// 映射返回的新类型
type FeatureOptions = OptionsFlags<FeatureFlags>
// 此时FeatureOptions的类型为:
/**
 type FeatureOptions = {
    readonly name?: boolean;
    readonly age?: boolean;
  }
 * 
*/

映射类型返回的对象类型添加了只读readonly和可选?修饰符

4. 秘钥重映射通过as关键字

在TypeScript4.1 及更高的版本中, 你可以使用映射类型中as字句, 重新映射类型中的键的名称

// 映射类型
type MappedTypeWithNewProp<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;
}
*/