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 😃!