TavaScript中的keyof

雪旭發表於2024-03-12

在 TypeScript 中，keyof 是一個用於獲取物件型別的鍵集合的運算子。它返回一個字串或數字的聯合型別，包含物件型別的所有可用鍵。keyof 主要用於在編譯時進行型別檢查，以確保你訪問的屬性是物件實際擁有的鍵。

interface Person {
  name: string;
  age: number;
  address: {
    city: string;
    postalCode: string;
  };
}

type PersonKeys = keyof Person;
// PersonKeys 的型別是 "name" | "age" | "address"

在上述示例中，PersonKeys 是 Person 介面的所有鍵的聯合型別。這意味著 PersonKeys 可以是 "name"、"age" 或 "address" 中的任意一個。

一、基本使用

用keyof組成一個聯合型別，來定義函式，以確保傳入的引數是物件的合法鍵。

function getProperty(obj: Person, key: keyof Person) {
  return obj[key];
}

const person: Person = {
  name: "John",
  age: 30,
  address: {
    city: "New York",
    postalCode: "10001",
  },
};

console.log(getProperty(person, "name")); // 輸出: "John"
console.log(getProperty(person, "age")); // 輸出: 30
console.log(getProperty(person, "address")); // 輸出: { city: "New York", postalCode: "10001" }

二、keyof和Typeof一起使用 ：

在 TypeScript 中，typeof 與 keyof 通常一起使用，用於獲取物件的屬性名（鍵）的聯合型別。這在建立通用函式或操作物件屬性時非常有用。

const person = {
  name: "John",
  age: 30,
  address: {
    city: "New York",
    postalCode: "10001",
  },
};

type PersonKeyType = keyof typeof person;

// PersonKeyType 的型別是 "name" | "age" | "address"

在上面的例子中，我們先用typeof把物件的所有屬性和屬性型別都獲取到了，再用keyof把物件屬性組成了一個聯合型別，它包括了頂層屬性 "name" 和 "age"，以及巢狀物件 address 的屬性 "city" 和 "postalCode"。

使用 keyof 限制函式引數

function getProperty(obj: typeof person, key: keyof typeof person) {
  return obj[key];
}

const personName = getProperty(person, "name"); // 型別是 string
const personAge = getProperty(person, "age");   // 型別是 number
const city = getProperty(person.address, "city"); // 型別是 string

這個函式 getProperty 接受一個物件和一個屬性名，利用 keyof typeof 來限制屬性名的合法性，並返回屬性對應的值。

keyof 與 typeof 的結合使用提供了更好的型別安全，因為它們反映了物件的實際結構。

相關文章