TS高級(jí)類型

keyof

獲取類型內(nèi)所有的 key,即所有屬性名 , 獲取的是一個(gè) 聯(lián)合類型
這里類型指:通過(guò) interface 或 type 定義的類型;通過(guò) typeof xxx 返回的類型等。keyof 后面必須是類型,不能是具體的對(duì)象

interface IPeople {
    name:string,
    age?: number,
    sex: string,
  }
  
  type T = keyof IPeople

  // 等同于
  type T = "name" | "age" | "sex"

in

循環(huán)類型 一般循環(huán)的是 聯(lián)合類型,把聯(lián)合類型中每一個(gè)屬性名賦值給 P

// 使用上面的 T 類型
  type TObj =  {
    [P in keyof T]: any
  }

  // 等同于
  type TObj = {
    name: any;
    age: any;
    sex: any;
  }

typeof

ts 中 typeof 是獲取數(shù)據(jù)的類型,常用用于獲取 對(duì)象、數(shù)組、函數(shù)、class、枚舉等類型

const people = {
    name: 'liuyz',
    age: 18,
  }
  
  type INewPeople = typeof people
  // 等同于
  // type INewPeople = {
  //   name: number
  //   age: number
  // }
  
  const newPeople: INewPeople = {
    name: "zhi",
    age: 18,
  }
  
  type TKeys = keyof typeof newPeople
  // 等同于
  // type TKeys = "name" | "age"

Pick

從 T 類型中選取部分 K 類型,并返回新的類型,這里 T 常用于對(duì)象類型

 type Pick<T, K extends keyof T> = {
      [P in K]: T[P];
  };
// keyof T 獲取 T 中所有的 key 屬性
//K extends keyof T K 必須繼承于 keyof T ,如果 K 中的屬性有不屬于 keyof T 的則會(huì)報(bào)錯(cuò)
interface IPeople {
    name:string,
    age?: number,
    sex: string,
  }
  
  type TPick = Pick<IPeople, 'name' | 'age'>
  
  // 等同于
  type TPick = {
    name: string;
    age?: number | undefined;
  }

Partial

將T中的所有屬性設(shè)置為可選

type Partial<T> = {
      [P in keyof T]?: T[P];
  };
interface IPeople {
    name:string,
    age?: number,
    sex: string,
  }
  type TPartial = Partial<IPeople>
  
  // 等同于
  type TPartial = {
    name?: string | undefined;
    age?: number | undefined;
    sex?: string | undefined;
  }

Required

使 T 中的所有屬性都變成必需的

interface IPeople {
    name:string,
    age?: number,
    sex: string,
  }
  type TRequired = Required<IPeople>

  // 等同于
  type TRequired = {
    name: string;
    age: number;
    sex: string;
  }

Readonly

將 T 中的所有屬性設(shè)為只讀

<!-- 源碼 -->
  type Readonly<T> = {
    readonly [P in keyof T]: T[P];
  }

 interface IPeople {
    name:string,
    age?: number,
    sex: string,
  }
  type TReadonly = Readonly<IPeople>

  // 等同于
  type TReadonly = {
     readonly name: string;
     readonly age?: number | undefined;
     readonly sex: string;
  }

Exclude

從T中剔除可以賦值給U的類型

Extract

提取T中可以賦值給U的類型

Omit

// 就是在 User 的基礎(chǔ)上,去掉 id 屬性
type EditUser = Omit<User,"id">; 

Pick

從類型定義的屬性中,選取指定一組屬性,返回一個(gè)新的類型定義。

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

NonNullable

去除 null 和 undefined 后的新類型

type TType= number | null | undefined
  type TNonNullable = NonNullable<TType>
  // 等同于
  // type TNonNullable = number

typeof

  • 自動(dòng)生成對(duì)象的類型,如果對(duì)象上有類型則使用定義的類型
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • TypeScript 是一種類型化的語(yǔ)言,允許你指定變量的類型,函數(shù)參數(shù),返回的值和對(duì)象屬性。 你可以把本文看做一...
    路條編程閱讀 641評(píng)論 0 2
  • # 類型別名 type 類型別名就是給已有的類型取一個(gè)新名字,并不會(huì)新建類型 類型別名:可以用于原始值,聯(lián)合類型,...
    woow_wu7閱讀 21,115評(píng)論 0 8
  • 類型保護(hù)(Type Guards) 可空類型(Nullable types) 類型別名(Type Aliases)...
    Wan神閱讀 1,313評(píng)論 0 0
  • 學(xué)習(xí)TypeScript的過(guò)程中發(fā)現(xiàn)對(duì)某些UtilityTypes不是很理解,就重新在文檔上系統(tǒng)學(xué)習(xí)了一遍,Typ...
    _stan閱讀 2,106評(píng)論 0 1
  • 主要:class類、類型兼容性、交叉類型、泛型和keyof、索引簽名類型和索引查詢類型、映射類型 1、class類...
    今天也是一個(gè)小透明閱讀 3,599評(píng)論 0 1

友情鏈接更多精彩內(nèi)容