Record、Readonly、ToPartial、ToMutable、ToRequired、FilterByValueType修饰符

101 阅读2分钟

1、Record

高级类型 Record :来创建索引类型:

type Record<K extends string | number | symbol, T> = { [P in K]: T; }

//例子:
type UppercaseKey24_1<Obj extends object> = {
  [Key in keyof Obj as Uppercase<Key & string>]: Obj[Key]
}
//key值大写:改成下面这个
type UppercaseKey24_2<Obj extends Record<string, any>> = {
  [Key in keyof Obj as Uppercase<Key & string>]: Obj[Key]
}

2、Readonly:只读修饰符

readonly 的修饰符,代表只读。

type Readonly<T> = { 
    readonly [Key in keyof T]: T[Key]; 
}

//例子:
type test25 = Readonly<{ name: 'Lily'; age: 18 }>
//type test25 = {
//  readonly name: 'Lily';
//  readonly age: 18;
//}

3、ToPartial:可选修饰符

type Partial<T> = {
  [Key in keyof T]?: T[Key]
}
type test26 = Partial<{ name: 'Lily'; age: 18 }>
//type test26 = {
//  name?: "Lily" | undefined;
//  age?: 18 | undefined;
//}

4、ToMutable:去掉readonly

作用:给索引类型 T 的每个索引去掉 readonly 的修饰,其余保持不变。

type ToMutable<T> = {
  -readonly [Key in keyof T]: T[Key]
}
type test27 = ToMutable<{ readonly name: 'Lily'; readonly age: 18 }>
//type test17 = {
//  name: 'Lily';
//  age: 18;
//}

5、ToRequired:去掉可选修饰符

作用:给索引类型 T 的索引去掉 ? 的修饰 ,其余保持不变。

type ToRequired<T> = {
  [Key in keyof T]-?: T[Key]
}
type test28 = ToRequired<{ name?: 'Lily'; age?: 18 }>
//type test28 = {
//  name: 'Lily';
//  age: 18;
//}

6、FilterByValueType:根据索引值的类型做过滤

作用:可以在构造新索引类型的时候根据值的类型做下过滤:

type FilterByValueType<
  Obj extends Record<string, any>,
  ValueType
> = {
    [Key in keyof Obj
    as Obj[Key] extends ValueType ? Key : never]
    : Obj[Key]
  }
//类型参数 Obj 为要处理的索引类型,通过 extends 约束为索引为 string,值为任意类型的索引类型 Record<string, any>。
//类型参数 ValueType 为要过滤出的值的类型。

//构造新的索引类型,索引为 Obj 的索引,也就是 Key in keyof Obj,但要做一些变换,也就是 as 之后的部分。
//如果原来索引的值 Obj[Key] 是 ValueType 类型,索引依然为之前的索引 Key,否则索引设置为 never
//never 的索引会在生成新的索引类型时被去掉。


interface People {
  name: string;
  age: number;
  gender: boolean
  grade: string[];
}
type test29 = FilterByValueType<People, string | number>
//type test29 = {
//  name: string;
//  age: number;
//}

其中索引类型有专门的语法叫做映射类型,对索引做修改的 as 叫做重映射

参考链接:

juejin.cn/book/704752…