Difference Between valueof and keyof in TypeScript
In this article, we are going to learn the difference between valueOf() and keyof in TypeScript.
ValueOf() method
The valueOf() method in TypeScript is used to return the primitive value of the specified number object.
Syntax:
number.valueOf();
Example 1: In this example, we have used the ValueOf() method.
Javascript
// valueOf() let num = new Number(30); console.log(num.valueOf()); |
Output:
30
Example 2: In this example, we have used the valueOf() method.
Javascript
// valueOf() method let num4 = new Number(563); console.log( "Number Method: tovalueOf()" ); console.log( typeof num4 ) console.log(num4 ) console.log(num4 .valueOf()) |
Output:
Number Method: tovalueOf()
number
[Number: 563]
563
Keyof Operator
In TypeScript, the keyof operator is used to extract the keys of a type as a union type. It is a type operator that allows you to access the keys of an object type or an interface.
Syntax:
type KeysOfType = keyof ObjectType;
Example: In this example, we define an interface Person with three properties: name, age, and gender. We also define a variable person of type Person with some values. Next, we define a function getProperty that takes an object obj of type T and a key of type K, where K extends keyof T. It means that key must be one of the keys of the object obj. Inside the getProperty function, we simply return the value of obj[key]. Finally, we test the getProperty function by calling it with the person object and various keys such as “name”, “age”, and, “gender”. All three calls are successful as we can see in the output.
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" |
Output:
John
25
male
Difference between valueof and keyof in TypeScript
Feature | valueOf |
keyof |
---|---|---|
Purpose | Obtains the primitive value of an object | Obtains a union type of property names |
Usage | Object instance method | TypeScript operator in type definitions |
Example | typescript class MyObject { valueOf() { return this.value; } } |
typescript type MyType = { name: string; age: number; city: string; }; type MyKeys = keyof MyType; |
Applicability | General JavaScript usage, not specific to TypeScript | TypeScript-specific, particularly useful in generic programming scenarios |
Return Type | Typically returns a primitive value (e.g., number, string) | Returns a union type of all property names |
Contact Us