淺談typescript中keyof與typeof操作符用法

2022-06-22 14:01:30

一、keyof 簡介

TypeScript 允許我們遍歷某種型別的屬性，並通過 keyof 操作符提取其屬性的名稱。keyof 操作符是在 TypeScript 2.1 版本引入的，該操作符可以用於獲取某種型別的所有鍵，其返回型別是聯合型別。
下面我們來看個例子：

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

type K1 = keyof Person; // "name" | "age" | "location"
type K2 = keyof Person[];  // number | "length" | "push" | "concat" | ...
type K3 = keyof { [x: string]: Person };  // string | number

除了介面外，keyof 也可以用於操作類，比如：

class Person {
  name: string = "Semlinker";
}

let sname: keyof Person;
sname = "name";

若把 sname = “name” 改為 sname = “age” 的話，TypeScript 編譯器會提示以下錯誤資訊：

Type '"age"' is not assignable to type '"name"'.

keyof 操作符除了支援介面和類之外，它也支援基本資料型別：

let K1: keyof boolean; // let K1: "valueOf"
let K2: keyof number; // let K2: "toString" | "toFixed" | "toExponential" | ...
let K3: keyof symbol; // let K1: "valueOf"

此外 keyof 也稱為輸入索引型別查詢，與之相對應的是索引存取型別，也稱為查詢型別。在語法上，它們看起來像屬性或元素存取，但最終會被轉換為型別：

type P1 = Person["name"];  // string
type P2 = Person["name" | "age"];  // string | number
type P3 = string["charAt"];  // (pos: number) => string
type P4 = string[]["push"];  // (...items: string[]) => number
type P5 = string[][0];  // string

二、keyof 的作用

JavaScript 是一種高度動態的語言。有時在靜態型別系統中捕獲某些操作的語意可能會很棘手。以一個簡單的prop 函數為例：

function prop(obj, key) {
  return obj[key];
}

該函數接收 obj 和 key 兩個引數，並返回對應屬性的值。物件上的不同屬性，可以具有完全不同的型別，我們甚至不知道 obj 物件長什麼樣。

那麼在 TypeScript 中如何定義上面的 prop 函數呢？我們來嘗試一下：

function prop(obj: object, key: string) {
  return obj[key];
}

在上面程式碼中，為了避免呼叫 prop 函數時傳入錯誤的引數型別，我們為 obj 和 key 引數設定了型別，分別為 {} 和 string 型別。然而，事情並沒有那麼簡單。針對上述的程式碼，TypeScript 編譯器會輸出以下錯誤資訊：

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{}'

元素隱式地擁有 any 型別，因為 string 型別不能被用於索引 {} 型別。要解決這個問題，你可以使用以下非常暴力的方案：

function prop(obj: object, key: string) {
  return (obj as any)[key];
}

很明顯該方案並不是一個好的方案，我們來回顧一下 prop 函數的作用，該函數用於獲取某個物件中指定屬性的屬性值。因此我們期望使用者輸入的屬性是物件上已存在的屬性，那麼如何限制屬性名的範圍呢？這時我們可以利用本文的主角 keyof 操作符：

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

在以上程式碼中，我們使用了 TypeScript 的泛型和泛型約束。首先定義了 T 型別並使用 extends 關鍵字約束該型別必須是 object 型別的子型別，然後使用 keyof 操作符獲取 T 型別的所有鍵，其返回型別是聯合型別，最後利用 extends 關鍵字約束 K 型別必須為 keyof T 聯合型別的子型別。是騾子是馬拉出來遛遛就知道了，我們來實際測試一下：

type Todo = {
  id: number;
  text: string;
  done: boolean;
}

const todo: Todo = {
  id: 1,
  text: "Learn TypeScript keyof",
  done: false
}

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

const id = prop(todo, "id"); // const id: number
const text = prop(todo, "text"); // const text: string
const done = prop(todo, "done"); // const done: boolean

很明顯使用泛型，重新定義後的 prop<T extends object, K extends keyof T>(obj: T, key: K) 函數，已經可以正確地推匯出指定鍵對應的型別。那麼當存取 todo 物件上不存在的屬性時，會出現什麼情況？比如：

const date = prop(todo, "date");

對於上述程式碼，TypeScript 編譯器會提示以下錯誤：

Argument of type '"date"' is not assignable to parameter of type '"id" | "text" | "done"'.

這就阻止我們嘗試讀取不存在的屬性。

三、keyof 與物件的數值屬性

在使用物件的數值屬性時，我們也可以使用 keyof 關鍵字。請記住，如果我們定義一個帶有數值屬性的物件，那麼我們既需要定義該屬性，又需要使用陣列語法存取該屬性，如下所示：

class ClassWithNumericProperty {
  [1]: string = "Semlinker";
}

let classWithNumeric = new ClassWithNumericProperty();
console.log(`${classWithNumeric[1]} `);

下面我們來舉個範例，介紹一下在含有數值屬性的物件中，如何使用 keyof 操作符來安全地存取物件的屬性：

enum Currency {
  CNY = 6,
  EUR = 8,
  USD = 10
}

const CurrencyName = {
  [Currency.CNY]: "人民幣",
  [Currency.EUR]: "歐元",
  [Currency.USD]: "美元"
};

console.log(`CurrencyName[Currency.CNY] = ${CurrencyName[Currency.CNY]}`);
console.log(`CurrencyName[36] = ${CurrencyName[6]}`);

上面的程式碼中，首先定義了一個 Currency 列舉用於表示三種貨幣型別，接著定義一個 CurrencyName 物件，該物件使用數值屬性作為鍵，對應的值是該貨幣型別的名稱。該程式碼成功執行後，控制檯會輸出以下結果：

CurrencyName[Currency.CNY] = 人民幣
CurrencyName[36] = 人民幣

為了方便使用者能根據貨幣型別來獲取對應的貨幣名稱，我們來定義一個 getCurrencyName 函數，具體實現如下：

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

console.log(`name = ${getCurrencyName(Currency.CNY, CurrencyName)}`);

同樣，getCurrencyName 函數和前面介紹的 prop 函數一樣，使用了泛型和泛型約束，從而來保證屬性的安全存取。最後，我們來簡單介紹一下 keyof 與 typeof 操作符如何配合使用。

四、keyof 與 typeof 操作符

typeof 操作符用於獲取變數的型別。因此這個操作符的後面接的始終是一個變數，且需要運用到型別定義當中。為了方便大家理解，我們來舉一個具體的範例：

type Person = {
  name: string;
  age: number;
}

let man: Person = {
  name: "Semlinker",
  age: 30
}

type Human = typeof man;

瞭解完 typeof 和 keyof 操作符的作用，我們來舉個例子，介紹一下它們如何結合在一起使用：

const COLORS = {
  red: 'red',
  blue: 'blue'
}

// 首先通過typeof操作符獲取color變數的型別，然後通過keyof操作符獲取該型別的所有鍵，
// 即字串字面量聯合型別 'red' | 'blue'

type Colors = keyof typeof COLORS 
let color: Colors;
color = 'red' // Ok
color = 'blue' // Ok

// Type '"yellow"' is not assignable to type '"red" | "blue"'.
color = 'yellow' // Error

最後留到思考題，有興趣的小夥伴可以想一想：

interface StringIndexArray {
  [index: string]: string;
}

interface NumberIndexArray {
  [index: number]: string;
}

type K1 = keyof StringIndexArray // type K1 = string | number
type K2 = keyof NumberIndexArray // type K2 = number

到此這篇關於淺談typescript中keyof與typeof操作符用法的文章就介紹到這了,更多相關typescript中keyof與typeof操作符內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

淺談typescript中keyof與typeof操作符用法

目錄

一、keyof 簡介

二、keyof 的作用

三、keyof 與物件的數值屬性

四、keyof 與 typeof 操作符

熱門文章