TypeScript 是一種類(lèi)型化的語(yǔ)言，允許你指定變量、函數(shù)參數(shù)、返回的值和對(duì)象屬性的類(lèi)型。

下面介紹Typescript高級(jí)類(lèi)型Record,Partial,Readonly等知識(shí)。

聯(lián)合類(lèi)型

/* 首先是聯(lián)合類(lèi)型的介紹 */
let a: string | number = '123' // 變量a的類(lèi)型既可以是string，也可以是number
a = 123

keyof

將一個(gè)類(lèi)型的屬性名全部提取出來(lái)當(dāng)做聯(lián)合類(lèi)型

// 1. 定義一個(gè)接口
interface Person {
  name: string
  age: number
}

type PersonKeys = keyof Person // 等同于 type PersonKeys = 'name' | 'age'

const p1: PersonKeys = 'name' // 可以
const p2: PersonKeys = 'age' // 可以
const p3: PersonKeys = 'height' // 不能將類(lèi)型“"height"”分配給“name | age”

Record

Record用于屬性映射，聽(tīng)不懂？直接上案例

定義一個(gè)普通的對(duì)象類(lèi)型

搭配聯(lián)合類(lèi)型用法

同樣可以映射對(duì)象,讓對(duì)象的每個(gè)屬性都是一個(gè)擁有特定鍵值對(duì)的類(lèi)型

Record的實(shí)現(xiàn)原理
Record的內(nèi)部定義，接收兩個(gè)泛型參數(shù)

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

逐步解析

• 泛型K即為第一次參數(shù)
• p in xx 又是什么意思呢？
  in的意思就是遍歷，如上就是將 類(lèi)型string進(jìn)行遍歷，也就是string
• 每個(gè)屬性都是傳入的T類(lèi)型，如 string: PersonModel

Partial (部分的; 不完全的)

ts中就是讓一個(gè)定義中的所有屬性都變成可選參數(shù)

// 定義一個(gè)Person接口
interface Person {
  name: string
  age: number
}

// 但是我們有可能數(shù)據(jù)是請(qǐng)求過(guò)來(lái)的，剛開(kāi)始我們需要定義一個(gè)空對(duì)象，如下。
const person1: Person = {}
/**
  但是這樣就加粗樣式會(huì)出現(xiàn)報(bào)錯(cuò)，類(lèi)型“{}”缺少類(lèi)型“Person”中的以下屬性: name, age。
  可能我們可以更改定義方式如下，但是有的時(shí)候我們不想破壞事先的定義，或者不能破壞
  interface Person {
    name?: string
    age?: number
  }
*/

/**
  那這個(gè)時(shí)候我們就可以用到typescript自帶的高級(jí)類(lèi)型 Partial，就相當(dāng)于將上方接口所有屬性變成可選的
  將我們需要定義的類(lèi)型當(dāng)做泛型傳入Partial中，那么就相當(dāng)于當(dāng)前的類(lèi)型里面的所有屬性都是可選的
 */
const person2: Partial<Person> = {} // 可以
const person3: Partial<Person> = { name: 'xiaodu' } // 可以
const person4: Partial<Person> = { height: 1.88 } // 報(bào)錯(cuò) “height”不在類(lèi)型“Partial<Person>”中

Partial的實(shí)現(xiàn)原理
Partial的內(nèi)部定義

type Partial<T> = {
  [P in keyof T]?: T[P]
}

逐步解析

• 將一個(gè)類(lèi)型的屬性名全部提取出來(lái)當(dāng)做聯(lián)合類(lèi)型
• 將 age和name進(jìn)行遍歷
• [P in keyof T]? 的冒號(hào)就代表 可選 的參數(shù)
• T[P] 就代表 如 Person[name]代表的是 string 類(lèi)型

Required（必須的）

和Partial剛好相反，將一個(gè)定義中的屬性全部變成必選參數(shù)

Required的實(shí)現(xiàn)原理
Required的內(nèi)部定義

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

逐步解析

• 將一個(gè)類(lèi)型的屬性名全部提取出來(lái)當(dāng)做聯(lián)合類(lèi)型
• 將 age和name進(jìn)行遍歷
• 在?之前加個(gè)-，代表著這個(gè)屬性是必須的。
• T[P] 就代表 如 Person[name]代表的是 string 類(lèi)型

Pick（選擇）

ts中可以選擇一個(gè)原來(lái)的接口中一部分的屬性定義

如果想要選擇多個(gè)屬性定義呢？

pick的實(shí)現(xiàn)原理

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

pick接收兩個(gè)泛型

• 第一個(gè)泛型 T 便是 interface 或者 type 定義
• 第二個(gè)就是第一個(gè)定義中的屬性， extends就代表繼承

K extends keyof T 等同于 k extends ‘name’ | ‘age’,意思就是k只能是age或者name Readonly (意思是只讀的)

Readonly (意思是只讀的)

ts中就是讓一個(gè)定義中的所有屬性都變成只讀參數(shù)

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

可以看到Readonly可以將接口所有屬性變?yōu)橹蛔x的不可修改的，但是是淺層的。
Readonly的實(shí)現(xiàn)原理
Readonly的內(nèi)部定義

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

逐步解析

• 將一個(gè)類(lèi)型的屬性名全部提取出來(lái)當(dāng)做聯(lián)合類(lèi)型
• 將 age和name進(jìn)行遍歷
• readonly 修飾符代表屬性是只讀的
• T[P] 就代表 如 Person[name]代表的是 string 類(lèi)型

Exclude(排除)

ts中可以排除 聯(lián)合類(lèi)型 中一部分的內(nèi)容
注意Exclude是操作聯(lián)合類(lèi)型的

Exclude的原理

type Exclude<T, U> = T extends U ? never : T

傳入兩個(gè)泛型

• 我們這里用 MyTypes 也就是 ‘name’ | ‘age’ | ‘height’ 去代表 T
• 用 name 屬性去代表第二個(gè)泛型 U
• T extends U 就判斷是否’name’ | ‘age’ | ‘height’ 有 name， 有name就返回never,就代表將其排除

Omit (省略的)

ts中就是將接口或者類(lèi)型的鍵值對(duì)刪除一部分

Omit原理
也就是上面所講解的知識(shí)點(diǎn)拼湊起來(lái)的

type Omit<T, K extends string | number | symbol> = {
  [P in Exclude<keyof T, K>]: T[P]
}

ReadonlyArray（只讀數(shù)組）

創(chuàng)建一個(gè)數(shù)組，數(shù)組中的索引不允許被修改

我們知道當(dāng)我們使用const創(chuàng)建對(duì)象或者數(shù)組時(shí)，其實(shí)是可以修改其內(nèi)部屬性的，但是有的時(shí)候我們可能不需要其內(nèi)部能夠被修改

const arr: number[] = [1, 2, 3, 4, 5]
arr[0] = 3 

方法1：通過(guò)類(lèi)型斷言的方式

方法2：使用ReadonlyArray，需要傳入一個(gè)泛型來(lái)約束數(shù)組中的索引類(lèi)型

這個(gè)時(shí)候你是不是就想知道as const 和 ReadonlyArray這兩者的區(qū)別在哪里？

區(qū)別在于as const是深層次的，盡管數(shù)組內(nèi)放的對(duì)象，對(duì)象內(nèi)部數(shù)據(jù)也是不能被修改的。ReadonlyArray則是‘淺層’的。

as const

ReadonlyArray

可以看到修改ReadonlyArray數(shù)組內(nèi)的第二層其實(shí)是可以的

到此這篇關(guān)于Typescript高級(jí)類(lèi)型Record,Partial,Readonly等介紹的文章就介紹到這了,更多相關(guān)Typescript高級(jí)類(lèi)型Record內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論