Difference Between valueof and keyof in TypeScript

In TypeScript, valueOf() retrieves the primitive value of an object, useful for accessing inherent data types. Conversely, keyof extracts keys as a union type, crucial for type-safe property referencing and dynamic type handling in TypeScript's type system.

ValueOf() method

The valueOf() method is a built-in method in JavaScript and TypeScript that retrieves the primitive value of a specific object. In TypeScript, this method is typically used with objects that have a defined valueOf() method, such as number objects.

Syntax

number.valueOf();

Example 1: In this example, we have used the ValueOf() method.

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

Output:

30

Example 2: In this example, we have used the valueOf() method.

// 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

The keyof operator in TypeScript is used to extract the keys of a type as a union type. It allows you to access the keys of an object type or an interface, which is useful for scenarios like generic programming and type-safe property accesses.

Syntax:

type KeysOfType = keyof ObjectType;

Example: This example defines an interface Person, a person variable, and a getProperty function. The function retrieves values from the person object using keys, demonstrating type-safe property access.

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

These distinctions highlight how valueOf() is used on object instances to retrieve their primitive values, while keyof is employed in TypeScript to manipulate types and ensure type safety in property accesses.