TS 中的類型驗算- 高級通用 API 實現

由於現在工作使用的技術棧是 React、TypeScript 和 ahooks，工作中需要用到大量的類型定義，特此記錄一下一些常用的類型通用 API 封裝。

TS 內置類型

Partial：將 T 所有屬性變爲可選屬性
Required：將 T 所有屬性變爲必選屬性
Readonly：將 T 所有屬性變爲只讀屬性
NonNullable：過濾 T 類型中的 null 及 undefined 類型
Parameters：獲取函數的參數類型，將每個參數類型放在一個元組中
Omit<T, K>：從類型 T 中剔除 K 中的所有屬性
Pick<T, K>：從類型 T 中挑選 K 中的所有屬性
Exclude<T, U>：提取存在於 T，但不存在於 U 的類型組成的聯合類型
Extract<T, U>：提取聯合類型 T 和聯合類型 U 的所有交集
Record<T, K>：構造一個具有一組屬性 K (類型 T ) 的類型

TS 內置關鍵字

extends：繼承、泛型約束、條件類型
infer：這玩意我到現在都還沒搞懂
keyof：將一個類型的屬性名全部提取出來當做聯合類型
typeof：在類型上下文中獲取變量或者屬性的類型
in：常用來遍歷枚舉類型

TS compiler 內部實現的類型

Uppercase：構造一個將字符串轉大寫的類型
Lowercase：構造一個將字符串轉小寫的類型
Capitalize：構造一個將字符串首字符轉大寫的類型
Uncapitalize：構造一個將字符串首字符轉大小寫的類型

實現 Optional API，實現部分類型變爲可選

type Article = {
  title: string;
  content: string;
  author: string;
  date: Date;
  readCount: number;
}
// 實現 T 部分類型變爲可選
type Optional<T,K extends keyof T> = Omit<T,K> & Partial<Pick<T,K>>; 
type ArticleTodo = Optional<Article,'author' | 'date' | 'readCount'>
// { title: string; content: string; author?: string; date?: Date; readCount?: number; }

實現 GetOptional API，獲取類型中的所有可選字段

type Article = {
  title: string;
  content: string;
  author?: string;
  date?: Date;
  readCount?: number;
}
// 獲取 T 類型中的所有可選字段
type GetOptional<T> = {
  [P in keyof T as T[P] extends Required<T>[P] ? never : P]: T[P]
};
type ArticleTodo = GetOptional<Article>
// { author?: string; date?: Date; readCount?: number; }

實現 DeepReadonly API，實現不可變類型的深度遍歷

type Article = {
  title: string;
  name:{
    first:string;
    lasr:string;
  }
}
// API，實現不可變類型的深度遍歷
type DeepReadonly<T extends Record<string | symbol,any>> = {
  readonly [k in keyof T]: DeepReadonly<T[K]>;
};
type ArticleTodo = DeepReadonly<Article>

實現 UnionToIntersection API，將聯合類型轉爲交叉類型

type Article = { title:string } | { name:string } | { date: Date }
// API，將聯合類型轉爲交叉類型
type UnionToIntersection<T> = 
  (T extends any ? (x: T) => any : never) extends (x: infer R) => any ? R : never;
type ArticleTodo = UnionToIntersection<Article>
// { title:string } & { name:string } & { date: Date }

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/6wiaqmlU2Es0DohJiCbh-g

猜你喜歡