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

一、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!

推薦閱讀: