TypeScript valueof和keyof的區別用法及代碼示例

在這篇文章中，我們將學習之間的區別valueOf()和 key 在TypeScript.

ValueOf()方法

這valueOf()TypeScript中的方法用於返回指定數字對象的原始值。

用法:

number.valueOf();

示例 1：在這個例子中，我們使用了ValueOf()方法.

Javascript


// valueOf() 
let num = new Number(30); 
console.log(num.valueOf());

輸出：

示例 2：在這個例子中，我們使用了 valueOf() 方法.

Javascript


// valueOf() method 
let num4 = new Number(563); 
console.log("Number Method: tovalueOf()"); 
console.log(typeof num4 ) 
console.log(num4 ) 
console.log(num4 .valueOf())

輸出：

Number Method: tovalueOf()
number
[Number: 563]
563

操作符鍵

在 TypeScript 中，keyof 運算符用於將類型的鍵提取為聯合類型。它是一個類型運算符，允許您訪問對象類型或接口的鍵。

用法:

type KeysOfType = keyof ObjectType;

例子：在這個例子中，我們定義了一個接口人具有三個屬性：姓名年齡，和性別。我們還定義了一個變量人類型的人具有一些值。接下來我們定義一個函數獲取屬性它采用 T 類型的對象 obj 和 K 類型的鍵，其中 K 擴展 keyof T。這意味著 key 必須是對象 obj 的鍵之一。在 getProperty 函數中，我們隻是返回 obj[key] 的值。最後，我們通過使用 person 對象和各種鍵(例如 “name”, “age” 和 “gender” )調用 getProperty 函數來測試它。正如我們在輸出中看到的那樣，所有三個調用都成功。

Javascript


interface Person { 
    name: string; 
    age: number; 
    gender: string; 
} 
const person: Person = { 
    name: "John", 
    age: 25, 
    gender: "male", 
}; 
function getProperty<T, K extends keyof T>(obj: T, key: K) { 
    return obj[key]; 
} 
console.log(getProperty(person, "name")); // "John" 
console.log(getProperty(person, "age")); // 25 
console.log(getProperty(person, "gender")); // "male"

輸出：

John
25
male

TypeScript中valueof和keyof的區別

特征	`valueOf`	`keyof`
目的	獲取對象的原始值	獲取屬性名稱的聯合類型
用法	對象實例方法	類型定義中的 TypeScript 運算符
示例	`typescript class MyObject { valueOf() { return this.value; } }`	`typescript type MyType = { name: string; age: number; city: string; }; type MyKeys = keyof MyType;`
適用性	一般 JavaScript 用法，不特定於 TypeScript	TypeScript-specific，在通用編程場景中特別有用
返回類型	通常返回原始值(例如數字、字符串)	返回所有屬性名稱的聯合類型

相關用法

注：本文由純淨天空篩選整理自amanv09大神的英文原創作品 Difference Between valueof and keyof in TypeScript。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。