【ts】typescript高阶：映射类型与keyof

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前端必备工具推荐网站(免费图床、API和ChatAI等实用工具):
http://luckycola.com.cn/

前言

学习目标
1、映射类型语法及示例
2、实现MyPartial工具类型
3、Key mapping语法及示例
4、keyof用法

---

一、映射类型语法及示例

1、映射类型语法

代码如下（示例）：

// 映射类型语法
// { readonly [P in K]?: T}

// { [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}

2、映射类型示例

代码如下（示例）：

// 映射类型示例
type Item = {
    
     a: string; b: number; c: boolean; };

type T1 = {
    
     [P in 'x' | 'y']: number }; // {x: number; y: number}
type T2 = {
    
     [P in 'x' | 'y']: P }; // {x: ‘x' ; y: 'y'}
type T3 = {
    
     [P in 'a' | 'b']: Item[P] }; // {a: string ; b: number}
type T4 = {
    
     [P in keyof Item]: Item[P] }; // {a: string ; b: number, c: boolean}

二、实现工具类型

MyPartial

代码如下（示例）：

// 工具类型
type MyParital<T> = {
    
    
  [P in keyof T]?: T[P]
};

type U1 = MyParital<{
    
     name: string; age: number }>;// { name?: string; age?: number }

三、Key mapping语法及示例

1、Key mapping语法

代码如下（示例）：

// key Mapping语法 其中的NewKeysType表示映射成的新key
type MappedTypeWidthNewKeys<T> = {
    
    
  [P in keyof T as NewKeysType]: T[P];
};

2、Key mapping示例

Getter

功能：生成对象KV类型的getter函数类型

// 例子 -- Getter工具类型
// 功能：生成对象KV类型的getter函数类型
type Getter<T> = {
    
    
  [K in keyof T as `get${
      
      Capitalize<K & string>}`]: () => T[K];
};

interface User {
    
    
  name: string;
  age: number;
  choose: boolean;
};

type Getter1 = Getter<User>;
// {
    
    
//   getName: () => string;
//   getAge: () => number;
//   getChoose: () => boolean;
// }

RemoveKindField

功能：去除某一个key类型

// 例子 -- RemoveKindField工具类型
// 功能：去除某一个key类型
type Exclude<T, K> = T extends K ? never : T;
type RemoveKindField<T> = {
    
    
  [K in keyof T as Exclude<K, 'kind'>]: T[K];
};

interface User2 {
    
    
  name: string;
  age: number;
  kind: 'kind'
};

type User3 = RemoveKindField<User2>;// {name: string; age: number}

四、keyof用法

1、keyof应用示例

//keyof用法

// keyof用法示例
type K1 = keyof boolean; // 'valueof'
type K2 = keyof any;// string | number | symbol
type K3 = keyof number;// "toFixed" | "toExponential" | "toPrecision" | "toString" | "valueOf" | "toLocaleString"
type K4 = keyof string; // "charAt" | "charCodeAt" | "concat" | "indexOf" | "lastIndexOf" | "localeCompare" | "match" | "replace" | "search" | "slice" | "split" | ... 28 more ... | "valueOf"


enum HttpMethods {
    
    
  Get,
  Post,
  Put,
  Delete
};

type K5 = keyof typeof HttpMethods;// "Get" | "Post" | "Put" | "Delete"

2、Partial、Required、Pick、Record工具类型的内在实现

// 基于keyof实现的Partial、Required、Pick、Record工具类型的内在实现
type Partial<T> = {
    
    
  [K in keyof T]?: T[K]
};

type Required<T> = {
    
    
  [K in keyof T]-?: T[K];
}

type Pick<T, U extends keyof T> = {
    
    
  [K in U]: T[K]
};

type Record<T extends keyof any, U> {
    
    
  [key: T]: U;
}

3、keyof在泛型函数中的典型应用

// keyof在泛型函数中的典型应用
type user5 = {
    
    
  name: string;
  age: number;
  boo: boolean;
}
type ValueType<T, U> = T extends keyof U ? U[T] : never;
function fn3(obj: user5, key: keyof user5): ValueType<keyof user5, user5> {
    
    
  return obj[key];
}

---

总结