TypeScript Differences Between Type Aliases and Interfaces Type (original) (raw)

Last Updated : 23 Jan, 2025

In TypeScript, both type aliases and interfaces are used to define custom types, but they have distinct differences and use cases.

**Type Aliases: Allow the definition of types with a custom name, applicable to primitives, unions, tuples, and more complex types.
**Interfaces: Primarily used for defining object types and specifying property names and their types. They can be extended or merged.

Type Aliases

Type aliases in TypeScript allow you to create custom names for types, enhancing code readability and reusability.

JavaScript ``

type Point = { x: number; y: number; };

function printPoint(point: Point): void { console.log(x: <math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mrow><mi>p</mi><mi>o</mi><mi>i</mi><mi>n</mi><mi>t</mi><mi mathvariant="normal">.</mi><mi>x</mi></mrow><mo separator="true">,</mo><mi>y</mi><mo>:</mo></mrow><annotation encoding="application/x-tex">{point.x}, y: </annotation></semantics></math>point.x,y:{point.y}); }

const myPoint: Point = { x: 10, y: 20 }; printPoint(myPoint);

The type Point = { x: number; y: number; }; line defines a type alias named Point representing an object with x and y properties, both of which are numbers.
The printPoint function accepts a parameter of type Point and logs its properties to the console.
The myPoint constant is declared with the Point type and initialized with appropriate x and y values.

**Output:

x: 10, y: 20

TypeScript Interfaces

Interfaces in TypeScript define the structure of an object, specifying the required property types and method signatures. They ensure type safety and enhance code clarity.

JavaScript ``

interface Point { x: number; y: number; }

function displayPoint(point: Point): void { console.log(x: <math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mrow><mi>p</mi><mi>o</mi><mi>i</mi><mi>n</mi><mi>t</mi><mi mathvariant="normal">.</mi><mi>x</mi></mrow><mo separator="true">,</mo><mi>y</mi><mo>:</mo></mrow><annotation encoding="application/x-tex">{point.x}, y: </annotation></semantics></math>point.x,y:{point.y}); }

const myPoint: Point = { x: 15, y: 25 }; displayPoint(myPoint);

**interface Point { x: number; y: number; }: Defines an interface named Point that describes an object with x and y properties, both of type number.
**Function displayPoint(point: Point): void: Accepts an object adhering to the Point interface and logs its x and y values.

**Output:

x: 15, y: 25

Type Aliases vs Interfaces in TypeScript

Type Aliases	Interfaces Type
Type Aliases use the type keyword to define a new type.	Interface Type use the interface keyword to define a new type.
Type aliases support extending other type aliases by intersection type. The & symbol is used to create an intersection type. Type aliases also extends interface types.	Interface Type also supports extending other interfaces by using the `extends` keyword. Interface type also extends type aliases.
Type Aliases can be implemented by class with the use of the `implements` keyword. but they cannot be extended or implemented.	Interface Type can also be implemented by class with the use of the implements keyword.
Type Aliases don't support declaration merging where declaring the same type of aliases again a second time with another type gives an error.	Interface type does support declaration merging where declaring the same interface again a second time merges with previous attributes of the last type interface.