這是一個關于 TypeScript 中的對象類型轉換的系列。在本系列中，我們首先將了解什么是對象類型轉換、需要轉換的情況以及它們與對象接口擴展的區(qū)別。然后，我們將仔細研究 TypeScript 提供的各種促進對象類型轉換的工具類型，比如：Pick<>、Omit<>和 Partial<>。

我們將在本系列的每一篇文章中分別深入研究常用工具類型的詳細信息。在本部分中，我們將介紹如何使用 Pick<Type, Keys> 從基類型或接口中挑選一些屬性，從而從現(xiàn)有類型生成新類型。

1. 什么是對象類型轉換？

對象類型轉換是指從表示對象的現(xiàn)有類型或接口生成修改的類型。這樣的轉換與一個或多個屬性相關。

TypeScript 有各種實用工具，允許我們實現(xiàn)不同類型的對象類型轉換，比如從已有的類型中選擇或省略屬性。

當我們需要一堆相似的對象類型時，對象類型轉換變得非常方便，否則必須單獨定義它們。我們不需要單獨定義每個類型，而是可以利用 TypeScript 的轉換實用工具，通過要求進行小的調整，從現(xiàn)有類型生成新類型。通過這種方式，我們能夠使我們的類型可重用，并在模塊系統(tǒng)的任何地方隨時生成它們。

對象類型轉換不同于使用 extends 關鍵字的對象接口繼承，特別是因為繼承只能在對象接口上使用，而不能用于類型。盡管轉換也可以使用相同的實用工具應用于對象接口，但它們通常用于創(chuàng)建新的對象類型。

我們將基于下面的場景構建本系列中的示例，該場景涉及幾種不同類型的用戶。雖然重點將放在對象類型上，但我們也將把接口納入討論。

假設我們有一堆用戶實體，它們與博客的交互方式各不相同?；旧?，不管他們是訪客用戶、訂閱者、編輯器還是管理員等等。上面的 ERD 顯示了它們在后臺的類型。

現(xiàn)在，如果我們想為前端 API 調用建模這些類型，我們可以為每個用戶類型手動編寫 TypeScript 類型——這顯然違反了 DRY（不要寫重復的代碼）原則，因為我們?yōu)槊總€用戶類型重復了幾個公共屬性。我們也可以使用接口繼承，但這不在本系列的討論范圍之內。

所以，我們要做的是使用 TypeScript 的轉換實用工具從基類型中生成我們需要的類型。為了進行正確的轉換，我們需要方便地設置正確的基類型，然后將其與生成目標類型的實用工具配對。

例如，在本文中，我們將考慮 Pick<Type, Keys> 的用例。

2. 什么是 TypeScript Pick？

2.1 用 Pick<Type, Keys> 選擇項

對于圖中的上述實體，將 SuperbUser 作為基類型是有意義的，因為它包含了存在于所有其他用戶類型上的所有屬性。

我們將首先定義 SuperbUser 的接口：

interface SuperbUser {
  userId: number;
  macAddress: string;
  username: string;
  email: string;
  password: string;
  firstName: string;
  lastName: string;
  roles: ('Admin' | 'Editor' | 'Author')[]
};

現(xiàn)在，如果我們想從 SuperbUser 生成一個 GuestUser 類型，我們只需要選擇 userId, macAddress 和 username 屬性：

type GuestUser = Pick<SuperbUser, 'userId' | 'macAddress' | 'username'>;

TypeScript Pick 將基類型作為第一個參數(shù)，將我們想要從基類型中選取的鍵的并集作為第二個參數(shù)。使用這兩種類型來聲明實際對象會給我們提供具有各自屬性的對象：

const me: SuperbUser = {
  userId: 1,
  macAddress: '1.2.3.4',
  username: '夏安',
  email: 'xiaan@163.com',
  password: '12345678',
  firstName: 'an',
  lastName: 'xia',
  roles: ['Admin', 'Editor', 'Author']
};

const guest: GuestUser = {
  userId: 2,
  macAddress: '4.3.2.1',
  username: 'xxx'
};

console.log(me.roles); // ["Admin", "Editor", "Author"]
console.log(guest.username); // "xxx"
console.log(guest.roles); // undefined

guest.roles 在運行時未定義，在此之前 TypeScript 就會拋出一個錯誤：

// Property 'roles' does not exist on type 'GuestUser'.

2.2 只能用來生成類型

注意，我們將 GuestUser 定義為具有 type 關鍵字的類型，盡管我們使用接口作為基。這是因為 TypeScript Pick<Type, Keys> 只能用來生成類型而不是接口。如果我們試圖用 interface 來定義它，TypeScript 會拋出一個錯誤：

interface GuestUser = Pick<SuperbUser, 'userId' | 'macAddress' | 'username'>;
// 'Pick' only refers to a type, but is being used as a value here.

2.3 從類型中選擇

轉換對于類型比接口更有用，因為我們不能繼承類型。如果我們將 SuperbUser 接口轉換為一種類型，我們會得到相同的結果：

type SuperbUser = {
  userId: number,
  macAddress: string,
  username: string,
  email: string,
  password: string,
  firstName: string,
  lastName: string,
  roles: ('Admin' | 'Editor' | 'Author')[]
};

type GuestUser = Pick<SuperbUser, 'userId' | 'macAddress' | 'username'>;

const me: SuperbUser = {
  userId: 1,
  macAddress: '1.2.3.4',
  username: '夏安',
  email: 'xiaan@163.com',
  password: '12345678',
  firstName: 'an',
  lastName: 'xia',
  roles: ['Admin', 'Editor', 'Author']
};

const guest: GuestUser = {
  userId: 2,
  macAddress: '4.3.2.1',
  username: 'xxx'
};

console.log(me.roles); // ["Admin", "Editor", "Author"]
console.log(guest.username); // "xxx"
console.log(guest.roles); // undefined

2.4 謹慎使用

現(xiàn)在，如果希望為 Subscriber 實體派生一個類型，則需要選擇除 roles 之外的所有屬性。但是，列出作為第二個參數(shù)傳遞的 union 類型中的所有屬性是沒有意義的：

// 工具類型的選擇不當
type Subscriber = Pick<SuperbUser, 'userId' | 'macAddress' | 'username' | 'email' | ... >;

相反，我們可以直接忽略實用程序類型中傳遞的角色。正如我們將在下一篇文章中看到的，我們可以用 Omit<Type, Keys> 來實現(xiàn)這一點。

3. 小結

在這篇文章中，我們發(fā)現(xiàn)當我們有共享屬性的對象時，對象類型轉換允許我們從基類型派生出類似的類型。我們看了一個例子，它使用 TypeScript Pick<> 從一個更大的類型中選擇一些屬性來創(chuàng)建一個新類型。我們發(fā)現(xiàn)，類型轉換可以同時接受接口和類型作為其基礎，但是生成的類型不能聲明為接口。

到此這篇關于TypeScript 實用工具類型之 Pick 類型實現(xiàn)的文章就介紹到這了,更多相關TypeScript Pick類型內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論