How to reuse object types on variables in TypeScript?

Published September 24, 2021

To reuse object types for variables, you can use the Type Aliases feature in TypeScript. A Type Alias can be written by using the type keyword followed by the name of the type you choose, then the = symbol (equal), and finally the type you want to resue.

TL;DR

// Type alias for the object type
// with `name` and `salary` property having
// string and number types respectively
type Person = {
  name: string;
  salary: number;
};

// variable declaration with types
let employee: Person; // no type duplication here
let admin: Person; // no type duplication here too

employee = {
  name: "John Doe",
  salary: 20000,
}; // This is allowed ✅.

admin = {
  name: "Lily Roy"
  salary: 30000,
}; // This is also allowed ✅.

To understand it better, let's see a problem we might face while working with TypeScript.

For example, let's say we have a variable called employee which have properties like name and salary with string type value and number type value respectively like this,

// variable declaration with types
let employee: {
  name: string;
  salary: number;
};

Now we can assign a string type value to the name property and a number type value to the salary property like this,

// variable declaration with types
let employee: {
  name: string;
  salary: number;
};

employee = {
  name: "John Doe",
  salary: 20000,
}; // This is allowed ✅

Now, this is fine.

But what if have another variable called admin which also needs to have the same properties called name with string type value and salary with the number type value like this,

// variable declaration with types
let employee: {
  name: string;
  salary: number;
}; // duplication of type 🥺

let admin: {
  name: string;
  salary: number;
}; // duplication of type here too 🥺

employee = {
  name: "John Doe",
  salary: 20000,
}; // This is allowed ✅

As you can see that now we have a duplication of the same object type. So to avoid duplication of code in this scenario, we can use a TypeScript feature called Type Aliases.

In our case, we want to reuse the object type with name and salary properties.

It can be done like this,

// Type alias for the object type
// with `name` and `salary` property having
// string and number types respectively
type Person = {
  name: string;
  salary: number;
};

// variable declaration with types
let employee: {
  name: string;
  salary: number;
}; // duplication of type 🥺

let admin: {
  name: string;
  salary: number;
}; // duplication of type here too 🥺

Now we can replace the declaration of duplicate types from both the employee and admin variables with the new Type Alias of Person.

It can be done like this,

// Type alias for the object type
// with `name` and `salary` property having
// string and number types respectively
type Person = {
  name: string;
  salary: number;
};

// variable declaration with types
let employee: Person; // no type duplication here. Happiness 😍
let admin: Person; // no type duplication here too.

employee = {
  name: "John Doe",
  salary: 20000,
}; // This is allowed ✅.

admin = {
  name: "Lily Roy"
  salary: 30000,
}; // This is also allowed ✅.

As you can see from the above code that we have successfully removed the duplication of the object types and reused the new Type Alias in both the variables.

See the above code live in codesandbox.

That's all 😃!

Feel free to share if you found this useful 😃.


Share on: Facebook Twitter