Updated April 3, 2023
Introduction to TypeScript keyof object
In typescript, keyof is defined as indexed type query operator for any object type this keyof the object type would be the union of properties of object names and this also works with object type for user properties which produces the type literal union of its keys and the type here may be string or number literal. In general, we can define it with the keyword as “keyof” before the type declared in the typescript program which works similar to that of object.keys in javascript where in typescript it would be the type of the object instead of taking the literal values which this operator returns the union type of all the properties of the object and to do this pipe operator ( | ) is used.
Syntax:
In typescript, the keyof operator can be declared using the below syntax:
Keyof A
A = TypeOr
type A = var_name
type B = keyof AThe above two syntaxes are used when we are using the keyof operator for combining type properties of the indexed type query of the type. In the above syntax, it produces an indexed type query of type A or in simple words, it will produce a union of property names for type B so whenever any type is queried then it produces the union of properties of the object type.
How keyof object operator works in typescript?
In typescript, the keyof operator works similarly to object.keys method in javascript where it returns the array of object enumerable properties which are mostly in string format so it is possible that it can accept only key arguments which may throw an error at runtime and therefore this is where keyof operator comes into where it will take a type instead of literal values which this operator produces in return as the union of properties of object names and hence it is known as index type query operator as it returns the literal types instead of user-defined types. Therefore the exact working of keyof is used whenever there is a need to reduce any repetitive type definition which helps for other type definitions, where as when a class object is created and declared using keyof so that this operator converts the type instead of literal values. In earlier versions of typescript, only string named properties were supported but in newer versions, it supports both numbers and symbols.
Examples of TypeScript keyof object
Here are the following examples mentioned below.
Example #1
Code:
console.log(" Demonstration of keyof operator in typescript")
class A
{
p: number = 9;
}
let q: keyof A;
q = "p";
console.log(" The string value is returned as property of class object such as: ")
console.log(q)Output:
In the above program, we have declared a class named “A” and in it, we have “p” of number type and we have assigned a value of “9” then we have declared another variable “q” where we are making the “q” that holds the type of class using the keyword “keyof” and then we are assigning the “p” as a string value to “q” therefore when we print the value of “q” it prints the string value as “p” but not as “9” where we can see how keyof operator is used for printing the property of an object with its type value but not literal value and if we want to print the value then we need to use getclass_nameprop() method which use “this” operator to refer to the value. The output of the above code is as shown in the screenshot. We should note that we cannot use any other property name other than “p” in the code else it will throw an error saying the other property name will not be assignable to the type ‘ “p” ’.
Example #2
Now let us consider another example where we can use keyof operator in function parameter :
Code:
console.log(" Demonstration of keyof operator used in function parameter")
class function_keyof{
p: string = "Educba";
}
function getProp(r: keyof function_keyof, res: function_keyof): any{
return res[r];
}
let n: function_keyof = new function_keyof();
let obj_prop1 = getProp("p",n);
console.log(" The property value of the class object that is passed as parameter is")
console.log(obj_prop1);Output:
In the above program, we have declared a class named “function_keyof” in which “p” is a class object with type string we can also use type number in the newer version of typescript and the “p” is assigned with value “Educba”. Then we are using the getprop() function in which we are passing the parameter with keyof operator and returning the array of the values of the property. In the above code, we then call the function getprop() where we are passing “p” and the object of the class which will display only the value of that class object “p” and if we pass any other than “p” as expected it will throw an error..
Rules and regulations in keyof operator
- It can have a subtype of some type declared with keyof operator and subtype can be either string | number | symbol.
- For any object type is a string then the union of string, number, and literal types can be there as union property which can also have symbol-properties in the keyof of that object type. Similarly, if the object type is a number then the union would have an only number and literal types which can represent a string and symbol-like properties.
- We should also note that for string-like properties of the object type of the given class must be declared using identifier or string literal, similarly for number-like properties we declare using numeric literal or property name for this numeric literal type, and for symbol-like properties, we declare using only the property name of that symbol type for the class object type.
Conclusion
In this article, we conclude that as object.keys in javascript and keyof operator in typescript have slightly different behaviors, and also we can say keyof operator is more recommended in complex typings in conjunction with conditional types or mapped types. In this article, we can see a few demonstrations with the example of the use of the keyof operator.
Recommended Articles
This is a guide to TypeScript keyof object. Here we discuss How keyof object operator works in typescript and Examples along with the codes and outputs. You may also have a look at the following articles to learn more –
