Difference between interface and Type alias in interface with examples
- Admin
- Sep 20, 2023
- Javascript Typescript
This is a short tutorial about Interfaces and types, difference between them.
You can check another post on Fix for Object is possibly null Types and interfaces are used to describe the design of a custom type but, there are some differences.
What is an interface in typescript?:
Interfaces in typescript provide contracts and rules for classes to implement.
It is used to group the properties to create custom class types.
Let’s create an interface
class shape {
length: number;
width: number;
}
Interfaces in typescript help
- To create an object of classes
- Promotes object-oriented design
- Allows type safety
- Can be implemented by other classes
What is type in typescript?
Typescript has different primitive types like string, number, boolean etc.
If we want to create a custom type using these type, It is possible with type aliases.
Also, the Type alias does uses to create an new type using the type
keyword.
For example, Let’s declare a variable that is the union of multiple types like a number or boolean, string, null or undefined.
type CustomType = number | string | boolean | null | undefined;
CustomType is a new type that accepts any variable of declare types. You can create a instance of these types.
Type in typescript helps
- Create an alias for given existing multiple types as single
- if you have a custom object of multiple types which is difficult to read and simple
- Can create a tuple types
- Can create union types
Difference between interfaces and type aliases?
let’s see the difference between interface and types in typescript
Interfaces can be merged, but not aliases
For example, We have defined two interfaces with the same name Shape
with different members
interface Shape {
length: number;
breadth: number;
}
interface Shape {
color: string;
}
Typescript merges two interfaces member variables and accepts two properties as described below
const shape: Shape = {
length: 5,
breadth: 10,
color: "red",
};
With type aliases, the below code throws a duplicate identifier ‘Shape’ compilation error.
type Shape = {
length: number;
breadth: number;
};
type Shape = {
color: string;
};
Combining types as well as types
With interfaces, it is not possible to create a new interface by combining multiple interfaces.
interface Shape1 {
length: number;
breadth: number;
}
interface Shape2 {
color: string;
}
It is possible to create a type by combining multiple interfaces.
type Shape = Shape1 & Shape2; // valid
It is not possible with interfaces
interface Shape =Shape1 & Shape2 // not valid
With types, It is possible to combine different types using & operator.
type Shape1 = {
length: number;
breadth: number;
};
type Shape2 = {
color: string;
};
type Shape = Shape1 & Shape2;
Union with interface and types
Union
in typescript allows combining multiple types with OR conditions.
With interfaces, it is not possible to create a new interface with the union of multiple interfaces.
interface Shape1 {
length: number;
breadth: number;
}
interface Shape2 {
color: string;
}
It is possible to create a type by the union of multiple interfaces.
type Shape = Shape1 | Shape2; // valid
It is not possible with interfaces
interface Shape =Shape1 | Shape2 // not valid
With types, It is possible to combine different types using the | union operator.
type Shape1 = {
length: number;
breadth: number;
};
type Shape2 = {
color: string;
};
type Shape = Shape1 | Shape2;
Interfaces | Type alias |
---|---|
Interfaces allow to create a new name | It is not allowed to create a new name |
Interfaces can be extended or implemented | types are not extendable |
Interfaces can be merged | can not be merged |
Interfaces describe objects, primitive, and classes | types describe primitive types |
Interfaces are extendable by adding properties | Not possible to add new properties |
Interface has no union or intersection, tuples | Types work with unions, tuples, and intersection |
Conclusion
To Sum up, Learned a Comparison of type alias and interface in typescript with examples.