This content originally appeared on DEV Community and was authored by Moustafa25MM
The difference between types and interfaces in TypeScript used to be more clear, but with the latest versions of TypeScript, they’re becoming more similar.
Interfaces are basically a way to describe data shapes, for example, an object.
Type is a definition of a type of data, for example, a union, primitive, intersection, tuple, or any other type.
some Differences in some topics:
1-Functions:
Both can be used to describe the shape of an object or a function signature. But the syntax differs.
Interface
interface Point {
x: number;
y: number;
}
interface SetPoint {
(x: number, y: number): void;
}
Type
type Point = {
x: number;
y: number;
};
type SetPoint = (x: number, y: number) => void;
2-Declaration merging
Unlike a type alias, an interface can be defined multiple times, and will be treated as a single interface (with members of all declarations being merged).
3-Extends and Implements:
In TypeScript, we can easily extend and implement interfaces. This is not possible with types though.
Interfaces in TypeScript can extend classes, this is a very awesome concept that helps a lot in a more object-oriented way of programming. We can also create classes implementing interfaces.
4-Intersection (&):
Intersection allows us to combine multiple types into a single one type. To create an intersection type, we have to use the (&) keyword,
type Name = {
name: “string”
};
type Age = {
age: number
};
type Person = Name & Age;
The nice thing here is that we can create a new intersection type combining two interfaces, for example, but not the other way around. We cannot create an interface combining two types, because it doesn’t work,
interface Name {
name: “string”
};
interface Age {
age: number
};
type Person = Name & Age;
5-Union (|):
Union types allow us to create a new type that can have a value of one or a few more types. To create a union type, we have to use the | keyword,
type Man = {
name: “string”
};
type Woman = {
name: “string”
};
type Person = Man | Woman;
Similar to intersections, we can create a new union type combining two interfaces, for example, but not the other way around:
interface Man {
name: "string"
};
interface Woman {
name: "string"
};
type Person = Man | Woman;
**Summary of Type Aliases vs Interfaces
Your mileage may differ, but wherever possible, I stick to type aliases for their flexibility and simpler syntax. That is, I pick type aliases except I specifically need features from an interface.
For the most part, you can also decide based on your personal preference, but stay consistent with your choice — at least in a single given project.
For completeness, I must add that in performance critical types, interface comparison checks can be faster than type aliases. I’m yet to find this to be an issue.
This content originally appeared on DEV Community and was authored by Moustafa25MM
Moustafa25MM | Sciencx (2023-03-28T00:43:11+00:00) What is the difference between Interfaces vs Types in TypeScript?. Retrieved from https://www.scien.cx/2023/03/28/what-is-the-difference-between-interfaces-vs-types-in-typescript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.