How to reuse object types on variables in TypeScript?
Tags: typescript
Published: 2021-09-24 00:00:00

---
  title: How to reuse object types on variables in TypeScript?
  published: true
  tags: TypeScript
  date: Fri Sep 24 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/reuse-object-types-on-variables-typescript
  cover_image: https://melvingeorge.me/_next/static/images/main-ee45ccc275af3a5f39fb77e971dbc799.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/reuse-object-types-on-variables-typescript)
  
To reuse [object types](https://melvingeorge.me/blog/add-types-to-object-properties-in-typescript) 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

```ts
// 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,

```ts
// 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,

```ts
// 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,

```ts
// 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,

```ts
// 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,

```ts
// 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](https://codesandbox.io/s/reuse-object-types-on-variables-in-typescript-vnive?file=/src/index.ts).

That's all 😃!

### Feel free to share if you found this useful 😃.

---