釋放 TypeScript 中實用程式類型的力量-js教程-PHP中文網

Unleashing the Power of Utility Types in TypeScript

嘿，TypeScript 戰士！？所以，您已經深入了解 TypeScript，也許您想知道，「為什麼有這麼多程式碼只是用於管理類型？」別擔心 — 您並不孤單。我們都在這狂野的、靜態類型的旅程中。

今天，我們將深入研究 TypeScript 的一些最酷的工具：實用程式類型。這些就像視頻遊戲中的小作弊代碼一樣，可以幫助您加速和簡化代碼。因此，讓我們捲起袖子，有趣地瀏覽 TypeScript 中最有用的實用程式類型，以及它們如何讓您的程式碼不再那麼令人頭痛。

什麼？更多類型。

想像一下，您正在嘗試使用 TypeScript 類型，而無需從頭開始編寫所有內容（因為誰有時間這樣做？）。實用程式類型可讓您透過轉換或重複使用其他類型的部分來建立新類型。您可以將它們視為那些精美的廚房小工具，無需任何額外的努力即可進行切片和切塊。它們可以節省時間，減少冗餘，並使您的程式碼更易於管理。讓我們一一分解吧！

部分

它的作用：使類型中的所有屬性可選。是的，就是這麼簡單。

為什麼你會喜歡它：非常適合當你需要一些物體但不是全部的時候。

type User = {
  id: number;
  name: string;
  email: string;
};

function updateUser(id: number, newValues: Partial<User>) {
  // Update only the properties you need, no need to bring everything.
}

updateUser(1, { name: "Ash" }); // Only updating name, thanks to Partial!

登入後複製

必填

它的作用：使類型中的所有屬性成為必需。 TypeScript 的小意思是：「不能跳過任何欄位！」

為什麼你會喜歡它：有時，可選並不是一種選擇。您需要鎖定並載入所有內容，特別是如果某些屬性之前是可選的。

type UserWithOptionalFields = {
  id: number;
  name?: string;
  email?: string;
};

const user: Required<UserWithOptionalFields> = {
  id: 1,
  name: "John",
  email: "john@example.com",
}; // All properties are now required!

登入後複製

記錄

它的作用：使用鍵 Keys 和值 Type 建立一個物件類型。將其視為 TypeScript 的「建立您自己的字典」功能。

為什麼你會喜歡它t：當您想要一種快速簡單的方法來繪製數據時，這種類型是您最好的朋友，特別是如果您提前知道密鑰的話。

type Role = "admin" | "user" | "guest";

const rolePermissions: Record<Role, string[]> = {
  admin: ["read", "write", "delete"],
  user: ["read", "write"],
  guest: ["read"],
};

登入後複製

選擇

它的作用：採用現有類型並只選擇您指定的屬性。將其視為 TypeScript 的表達方式：「讓我們保持簡短而溫馨。」

為什麼你會喜歡它：非常適合創建現有類型的子集，而無需拖曳所有內容，因為它是我的最愛之一。

type User = {
  id: number;
  name: string;
  email: string;
  age: number;
};

type UserPreview = Pick<User, "id" | "name">;

登入後複製

省略

它的作用：與Pick相反。它允許您從類型中排除特定屬性。

為什麼你會喜歡它：當你有一種類型時很好，但只有一個討厭的字段你不想要。

type User = {
  id: number;
  name: string;
  email: string;
};

function updateUser(id: number, newValues: Partial<User>) {
  // Update only the properties you need, no need to bring everything.
}

updateUser(1, { name: "Ash" }); // Only updating name, thanks to Partial!

登入後複製

排除

它的作用：從聯合中刪除某些類型。這是 TypeScript 的「踢出群組聊天」。

為什麼你會喜歡它：當你有一個大工會但只需要處理一些案件時，它非常有用。

type UserWithOptionalFields = {
  id: number;
  name?: string;
  email?: string;
};

const user: Required<UserWithOptionalFields> = {
  id: 1,
  name: "John",
  email: "john@example.com",
}; // All properties are now required!

登入後複製

提取

它的作用：Extract 的孿生兄弟，Extract 只保留與給定聯合匹配的類型。

為什麼你會喜歡它：這種類型將聯合類型縮小為僅相關的部分。

type Role = "admin" | "user" | "guest";

const rolePermissions: Record<Role, string[]> = {
  admin: ["read", "write", "delete"],
  user: ["read", "write"],
  guest: ["read"],
};

登入後複製

就是這樣！？雖然 Extract 和 Pick 聽起來很相似，但它們獨特地適合不同的工作：Extract 是聯合類型的過濾器，而 Picklets 是您從物件類型中挑選屬性的過濾器。其對應項「排除」和「省略」也是如此。

這些實用程式類型雖小但功能強大！它們可以節省時間、減少程式碼冗餘並保持整潔。所以下次當你與類型較量時，請記住這些幫助者。他們將簡化您的 TypeScript 之旅並使其更加有趣。祝您程式設計愉快，願您的類型始終正是您所需要的！？

以上是釋放 TypeScript 中實用程式類型的力量的詳細內容。更多資訊請關注PHP中文網其他相關文章！