TypeScript - keyof 型別運算子

在 TypeScript 中，keyof 型別運算子允許您獲取物件的鍵並使用它們執行各種操作。在處理物件及其屬性時，它起著重要作用。

語法

TypeScript 中 keyof 型別運算子的語法如下：

keyof Type

keyof 關鍵字後跟型別的名稱，稱為“Type”。它返回一個聯合型別，其中包含指定型別的所有鍵（屬性名稱）。這允許您動態訪問和操作物件的鍵。

示例

讓我們藉助 TypeScript 中的一些示例來理解 keyof 運算子。

示例 1：訪問物件屬性名稱

keyof 關鍵字幫助我們檢索在物件型別中定義的屬性的名稱。

在此示例中，我們定義了一個名為“Person”的介面，它有兩個屬性：“name”型別為字串，“age”型別為數字。

然後我們使用 keyof 建立一個類型別名“PersonKeys”以從 Person 介面中提取鍵。

最後，我們將值 'name' 分配給名為“keys”的常量，其型別為 PersonKeys，並記錄其值。

interface Person {
   name: string;
   age: number;
}

type PersonKeys = keyof Person;
const keys: PersonKeys = 'name';
console.log(keys);

編譯後，它將生成以下 JavaScript 程式碼：

var keys = 'name';
console.log(keys);

輸出

以上程式碼將產生以下輸出：

name

示例：型別安全的屬性訪問

keyof 關鍵字使我們能夠以型別安全的方式訪問物件屬性。

在此示例中，我們定義了一個名為“Car”的介面，其屬性表示汽車的品牌、年份和價格。我們聲明瞭一個名為“getProperty”的泛型函式，它接受兩個引數：“obj”型別為 T，“key”型別為 K，其中 K 擴充套件 keyof T。該函式返回物件中給定鍵對應的值。然後我們建立一個汽車物件，並使用“getProperty”函式檢索汽車的品牌屬性並將其分配給“carBrand”變數。最後，我們記錄“carBrand”的值。

interface Car {
   brand: string;
   year: number;
   price: number;
}

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
   return obj[key];
}

const car: Car = {
   brand: 'Toyota',
   year: 2022,
   price: 25000,
};

const carBrand: string = getProperty(car, 'brand');
console.log(carBrand);

編譯後，它將生成以下 JavaScript 程式碼：

function getProperty(obj, key) {
   return obj[key];
}
var car = {
   brand: 'Toyota',
   year: 2022,
   price: 25000
};
var carBrand = getProperty(car, 'brand');
console.log(carBrand);

輸出

以上程式碼將產生以下輸出：

Toyota

示例 3：對映物件屬性

keyof 關鍵字也可用於將屬性從一個物件對映到另一個物件。在此示例中，我們定義了一個名為“Fruit”的介面，其屬性表示水果的名稱和顏色。然後我們使用對映型別中的 keyof 建立一個新的型別“FruitMapped”。它將 keyof Fruit 中的每個鍵對映到型別“string”。最後，我們使用 FruitMapped 型別建立一個“fruit”物件並記錄其值。

interface Fruit {
   name: string;
   color: string;
}

type FruitMapped = {
   [K in keyof Fruit]: string;
};

const fruit: FruitMapped = {
   name: 'Apple',
   color: 'Red',
};

console.log(fruit);

編譯後，它將生成以下 JavaScript 程式碼：

var fruit = {
   name: 'Apple',
   color: 'Red'
};
console.log(fruit);

輸出

以上程式碼將產生以下輸出：

{ name: 'Apple', color: 'Red' }

示例 4：條件型別對映

keyof 關鍵字的另一個強大應用是在條件型別對映中。這允許我們根據某些條件選擇性地對映屬性。在此示例中，我們有一個名為“Product”的介面，它表示產品的名稱、價格和可用性。我們定義了一個型別“DiscountedProducts”，它使用 keyof 利用條件對映。它檢查屬性的值是否擴充套件了“number”型別，並將其對映到原始值和“null”的聯合型別。對於所有其他屬性型別，它保持原始值型別不變。最後，我們使用 DiscountedProducts 型別建立一個“product”物件。

interface Product {
   name: string;
   price: number;
   inStock: boolean;
}

type DiscountedProducts<T> = {
   [K in keyof T]: T[K] extends number ? T[K] | null : T[K];
};

const product: DiscountedProducts<Product> = {
   name: 'Widget',
   price: 10,
   inStock: true,
};

console.log(product);

編譯後，它將生成以下 JavaScript 程式碼：

var product = {
   name: 'Widget',
   price: 10,
   inStock: true
};
console.log(product);

輸出

以上程式碼將產生以下輸出：

{ name: 'Widget', price: 10, inStock: true }

列印頁面