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

下面介紹Typescript高級類型Record,Partial,Readonly等知識。

聯(lián)合類型

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

keyof

將一個類型的屬性名全部提取出來當做聯(lián)合類型

// 1. 定義一個接口
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' // 不能將類型“"height"”分配給“name | age”

Record

Record用于屬性映射，聽不懂？直接上案例

定義一個普通的對象類型

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

同樣可以映射對象,讓對象的每個屬性都是一個擁有特定鍵值對的類型

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

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

逐步解析

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

Partial (部分的; 不完全的)

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

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

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

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

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

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

逐步解析

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

Required（必須的）

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

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

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

逐步解析

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

Pick（選擇）

ts中可以選擇一個原來的接口中一部分的屬性定義

如果想要選擇多個屬性定義呢？

pick的實現(xiàn)原理

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

pick接收兩個泛型

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

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

Readonly (意思是只讀的)

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

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

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

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

逐步解析

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

Exclude(排除)

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

Exclude的原理

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

傳入兩個泛型

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

Omit (省略的)

ts中就是將接口或者類型的鍵值對刪除一部分

Omit原理
也就是上面所講解的知識點拼湊起來的

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

ReadonlyArray（只讀數(shù)組）

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

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

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

方法1：通過類型斷言的方式

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

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

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

as const

ReadonlyArray

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

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

最新評論