Category: 07. Type Manipulation

In TypeScript, the typeof is one of the most helpful operators and keywords to check the types of variables or identifiers. However, TypeScript is a type-strict language. So, we need to define the type of the variable or object while defining the identifier itself. Still, sometimes we need to check the type of the variable.

For example, we are taking the data from the user via forms and handling it via TypeScript. Then we have to validate the data and perform some database operations. Also, the identifier can have multiple types in TypeScript. So, using the typeof operator, we can check the identifier type after initializing it.

Syntax

The below syntax demonstrates the use of typeof operator with the identifiers.

let type = typeof <variable>

Where,

• variable is an identifier, for which we need to check the type.

Return Value

It returns a string according to the data type of the operand of the typeof operator.

Examples

Let’s understand the typeof operator with the help of examples in TypeScript −

Example 1

In this example, we have used the typeof operator with the string, number, boolean, and undefined variables. Also, we used the typeof operator with the variable containing the null as a value.

In the output, we can see that It returns the string representing the type of the identifier. For the null_value1 identifier, the typeof operator returns the object.

// Defining the variables of particular type and checking its type.let str1: string ="TutorialsPoint";
console.log(typeof str1);let num1: number =32;
console.log(typeof num1);let bool1: boolean =true;
console.log(typeof bool1);let un_defined;
console.log(typeof un_defined);let null_value1 =null;
console.log(typeof null_value1);

On compiling, it will generate the following JavaScript code

// Defining the variables of particular type and checking its type.var str1 ="TutorialsPoint";
console.log(typeof str1);var num1 =32;
console.log(typeof num1);var bool1 =true;
console.log(typeof bool1);var un_defined;
console.log(typeof un_defined);var null_value1 =null;
console.log(typeof null_value1);

Output

The above code will produce the following output

string
number
boolean
undefined
object

Example 2

In the example below, we have created the objection containing some key-value pairs, a function returning the number value, and an array of numbers that contains different values.

Also, we used the typeof operator to check the type of all. The typeof operator returns the “object” string for the object, the “function” string for the Function, and the “object” string for the array, as the array is the instance of the object.

// using the typeof operator with object, function, and array.let demo_obj ={
   prop:"value",};
console.log(typeof demo_obj);functionfunc(){let a =10+20;return a;}
console.log(typeof func);let array: Array<number>=[4,23,212,2123,323,3];
console.log(typeof array);

On compiling, it will generate the following JavaScript code

// using the typeof operator with object, function, and array.var demo_obj ={
   prop:"value"};
console.log(typeof demo_obj);functionfunc(){var a =10+20;return a;}
console.log(typeof func);var array =[4,23,212,2123,323,3];
console.log(typeof array);

Output

The above code will produce the following output

object
function
object

Example 3

In this example, we checked the type of the NaN keyword using the typeof operator, which returns the “number” string. The type of negative Infinity is also a number. The PI is the property of the Math class, which contains the number value. Thats why the typeof operator returns “number” for the Math.PI property.

The pow() is the Math library function to get the power of any numbers. So, the typeof operator returns the “function” for the Math.pow() method.

// using the typeof operator with NaN, infinity, library methods, and members.let NaN_type =NaN;
console.log(typeof NaN_type);let infi =-Infinity;
console.log(typeof infi);let pI = Math.PI;
console.log(typeof pI);let pow = Math.pow;
console.log(typeof pow);

On compiling, it will generate the following JavaScript code

// using the typeof operator with NaN, infinity, library methods, and members.var NaN_type =NaN;
console.log(typeof NaN_type);var infi =-Infinity;
console.log(typeof infi);var pI = Math.PI;
console.log(typeof pI);var pow = Math.pow;
console.log(typeof pow);

Output

The above code will produce the following output

number
number
number
function

Example 4

In this example, we used the typeof operator to get the type of variable1 and defined variable2 of the same type as variable1. Also, we used the type alias to store the type of variable3. The type named type1 contains the type of variable3, which is a string.

After that, we used type1 to define the type of variable4. In the output, users can observe that the type of variable4 is the same as variable3.

// defining the variable1 of type numbervar variable1: number =10;// To define the variable2 as of same type variable1let variable2:typeof variable1 =20;
console.log(typeof variable2);// variable3 of string typevar variable3: string ="Hello!";// using the type alias to define the type of same type as variable3
type type1 =typeof variable3;// defining the variable4 of type named type1let variable4: type1 ="Hi";
console.log(typeof variable4);

On compiling, it will generate the following JavaScript code

// defining the variable1 of type numbervar variable1 =10;// To define the variable2 as of same type variable1var variable2 =20;
console.log(typeof variable2);// variable3 of string typevar variable3 ="Hello!";// defining the variable4 of type named type1var variable4 ="Hi";
console.log(typeof variable4);

Output

The above code will produce the following output

number
string

In TypeScript, the keyof type operator allows you to obtain the keys of an object and use them to perform various operations. It plays a significant role when working with objects and their properties.

Syntax

The syntax of the keyof type operator in TypeScript is as follows

keyof Type

The keyof keyword is followed by the name of a type, referred to as “Type.” It returns a union type consisting of all the keys (property names) of the specified type. This allows you to access and manipulate an object’s keys dynamically.

Examples

Let’s understand the keyof operator with the help of some examples in TypeScript.

Example 1: Accessing Object Property Names

The keyof keyword helps us retrieve the names of properties defined within an object type.

In this example, we define an interface called “Person” with two properties: “name” of type string and “age” of type number.

Then we create a type alias “PersonKeys” using keyof to extract the keys from the Person interface.

Finally, we assign the value ‘name’ to a constant named “keys” of type PersonKeys and log its value.

interfacePerson{
   name: string;
   age: number;}

type PersonKeys = keyof Person;const keys: PersonKeys ='name';
console.log(keys);

On compiling, it will generate the following JavaScript code

var keys ='name';
console.log(keys);

Output

The above code will produce the following output

name

Example: Type-Safe Property Access

The keyof keyword enables us to access object properties in a type-safe manner.

In this example, we define an interface “Car” with properties representing a car’s brand, year, and price. We declare a generic function called “getProperty” that takes two arguments: “obj” of type T and “key” of type K, where K extends keyof T. The function returns the value corresponding to the given key in the object. We then create a car object and use the “getProperty” function to retrieve the car’s brand property and assign it to the “carBrand” variable. Finally, we log the value of “carBrand.

interfaceCar{
   brand: string;
   year: number;
   price: number;}function getProperty<T,KextendskeyofT>(obj:T, key:K):T[K]{return obj[key];}const car: Car ={
   brand:'Toyota',
   year:2022,
   price:25000,};const carBrand: string =getProperty(car,'brand');
console.log(carBrand);

On compiling, it will generate the following JavaScript code

functiongetProperty(obj, key){return obj[key];}var car ={
   brand:'Toyota',
   year:2022,
   price:25000};var carBrand =getProperty(car,'brand');
console.log(carBrand);

Output

The above code will produce the following output

Toyota

Example 3: Mapping Object Properties

The keyof keyword is also useful for mapping properties from one object to another. In this example, we define an interface “Fruit” with properties representing the name and color of the fruit. We then create a new type, “FruitMapped” using the keyof within a mapped type. It maps each key in keyof Fruit to the type “string”. Finally, we create a “fruit” object using the FruitMapped type and log its value.

interfaceFruit{
   name: string;
   color: string;}

type FruitMapped ={[Kin keyof Fruit]: string;};const fruit: FruitMapped ={
   name:'Apple',
   color:'Red',};

console.log(fruit);

On compiling, it will generate the following JavaScript code

var fruit ={
   name:'Apple',
   color:'Red'};
console.log(fruit);

Output

The above code will produce the following output

{ name: 'Apple', color: 'Red' }

Example 4: Conditional Type Mapping

Another powerful application of the keyof keyword is in conditional type mapping. This allows us to selectively map properties based on certain conditions. In this example, we have an interface “Product” representing a product’s name, price, and availability. We define a type “DiscountedProducts” that utilizes conditional mapping using keyof. It checks if the property’s value extends the “number” type and maps it to the union type of the original value and “null”. For all other property types, it keeps the original value type unchanged. Finally, we create a “product” object using the DiscountedProducts type.

interfaceProduct{
   name: string;
   price: number;
   inStock: boolean;}

type DiscountedProducts<T>={[Kin keyof T]:T[K]extendsnumber?T[K]|null:T[K];};const product: DiscountedProducts<Product>={
   name:'Widget',
   price:10,
   inStock:true,};

console.log(product);

On compiling, it will generate the following JavaScript code

var product ={
   name:'Widget',
   price:10,
   inStock:true};
console.log(product);

Output

The above code will produce the following output

{ name: 'Widget', price: 10, inStock: true }

TypeScript allows you to create custom types from the existing or built-in types. Creating types from existing types helps you to make code more maintainable and error-resistant.

TypeScript is a statically typed language. This means that ideally, each variable, function parameter, and object property should be explicitly assigned a type.

Here we will discuss different ways to create custom types from the existing types.

Union Types

If you want to define a single variable that can store the value of multiple data types, you can use the union operator to combine multiple operators. The union operator is ‘|’, and using that you can combine multiple types.

Syntax

You can follow the syntax below to create custom types by using the union operator.

typeunionTypes= type1 | type2 | type3 |...;

In the above syntax, type1, type2, type3, etc. are data types.

Example

In the code below, we have defined the ‘StringOrNumber’ custom type which is a union of the string and number data type.

The processValue() function takes the single parameter of the type ‘StringOrNumber’. In the function body, we check the type of the parameter using the ‘typeof’ operator, and based on the string or numeric type, we print the value in the output console.

// Defining a union typetypeStringOrNumber=string|number;// Function that accepts a union type as an argumentfunctionprocessValue(value: StringOrNumber){// Check if the value is a string or number typeif(typeof value ==="string"){console.log(String: ${value});}else{console.log(Number: ${value});}}processValue("hello");// Output: String: helloprocessValue(123);// Output: Number: 123

On compiling, it will generate the following JavaScript code.

// Function that accepts a union type as an argumentfunctionprocessValue(value){// Check if the value is a string or number typeif(typeof value ==="string"){console.log(String: ${value});}else{console.log(Number: ${value});}}processValue("hello");// Output: String: helloprocessValue(123);// Output: Number: 123

The output of the above example code is as follows

String: hello
Number: 123

Intersection Types

The intersection operator (&) allows you to combine the multiple types in the single types. For example, if you have two interfaces or types for Business and contactDetails, and want to combine both types, you can use the intersection operator.

Syntax

You can follow the syntax below to create custom types by using the intersection operator.

typeintersectionTypes= type1 & type2 & type3 &...;

In the above syntax, we have combined multiple types using the intersection operator.

Example

In the code below, we have defined the ‘Business’ interface containing the name and turnover properties. We have also defined the contactDetails interface containing the email and phone properties.

After that, we combined both types using the intersection operator and stored them in the ‘BusinessContact’ type. Next, we have defined the object of the type ‘BusinessContact’, and logged it in the console.

// Defining a business typeinterfaceBusiness{
name:string;
turnover:number;}// Defining a contact details typeinterface ContactDetails {
email:string;
phone:string;}// Intersection of two typestypeBusinessContact= Business & ContactDetails;// Creating an object of the type BusinessContactlet contact: BusinessContact ={
name:"EnviroFront",
turnover:5000000,
email:"[email protected]",
phone:"1234567890"};console.log(contact);</code></pre>


On compiling, it will generate the following JavaScript code.



// Creating an object of the type BusinessContactlet contact ={
name:"EnviroFront",
turnover:5000000,
email:"[email protected]",
phone:"1234567890"};console.log(contact);</code></pre>


The output of the above example code is as follows



{
  name: 'EnviroFront',
  turnover: 5000000,
  email: '[email protected]',
  phone: '1234567890'
}




Utility types



TypeScript contains multiple utility types, which makes it easy to transform the particular types and create new types. Let's look at some of the utility types with examples.



Syntax



You can follow the syntax below to use any utility type.



Utility_type_name<typeorinterface>



In the above syntax, 'utility_type_name' can be replaced with 'Partial', 'Pick', 'Record', etc. based on which utility type you are using. Here, 'type' or 'interface' is the name of the interface from which you want to create a new custom type.



Partial Utility Type



The partial utility type makes all properties of the interface or type option. So, you can create a new type having all properties optional from the existing type.



Example



In the code below, we have defined the 'Todo' interface. After that, we used the Partial utility type to create a new type using the Todo interface by making all properties of it optional.



Next, we have defined the object of the 'OptionalTodo' type, which contains only the 'title' property, as the 'description' property is optional.



// Defining an interface for Todo list interfaceTodo{
title:string;
description:string;}// Defining a custom type using the Partial utility typetypeOptionalTodo= Partial&lt;Todo&gt;;// Creating an object of type OptionalTodolet todo: OptionalTodo ={ title:"Buy milk"};// 'description' is optionalconsole.log(todo);</code></pre>


On compiling, it will generate the following JavaScript code.



// Creating an object of type OptionalTodolet todo ={ title:"Buy milk"};// 'description' is optionalconsole.log(todo);



The output of the above example code is as follows



{ title: 'Buy milk' }




Pick Utility Type



The Pick utility type allows one to pick a subset of properties from the existing types. Let's understand it via the example below.



Example



In the code below, we have defined the 'ToDo' interface and used the Pick utility type to create a new type with only the 'title' property from the 'ToDo' interface. Here, the 'ToDoPick' type contains only the 'title' property.



// Defining an interface for Todo list interfaceTodo{
title:string;
description:string;}// Defining a custom type using the Pick utility typetypeTodoPick= Pick&lt;Todo,"title"&gt;;let myTodo: TodoPick ={ title:"Write a code"};console.log(myTodo.title);</code></pre>


On compiling, it will generate the following JavaScript code.



let myTodo ={ title:"Write a code"};console.log(myTodo.title);



The output of the above example code is as follows



Write a code




Typeof Type Operator



The typeof operator is used to get the type of the particular variable. You can use the typeOf variable to extract the data type of the particular variable, object, function, etc., and use the data type for other variables.



Syntax



You can follow the syntax below to create custom types by using the typeof type operator.



Typeof variable;



In the above syntax, 'variable' can be an object, function, etc.



Example



In the code below, we have defined the person object containing the name and gender properties. After that, we used the 'typeof' operator to get the type of the person object and stored it in the 'employee' type variable.



After that, we have defined the 'employee1' object of the 'employee' type, which contains the name and gender properties.



// Defining a person objectconst person ={
name:"John",
gender:"male"};// Defining a type employeetypeemployee=typeof person;// Type is { url: string; timeout: number; }// Defining an employee objectlet employee1: employee ={
name:"Sbv",
gender:"male"};console.log(employee1);</code></pre>


On compiling, it will generate the following JavaScript code.



// Defining a person objectconst person ={
name:"John",
gender:"male"};// Defining an employee objectlet employee1 ={
name:"Sak",
gender:"male"};console.log(employee1);</code></pre>


The output is as follows



{ name: 'Sak', gender: 'male' }




Creating a custom type allows you to reuse the existing types and write maintainable code. You may use the union or intersection operator if you want to provide an optional type or combine multiple types. Furthermore, you can use the utility types and typeof operator to create custom types from the existing types.