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

Posted on by

一、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操作符內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：