What is the difference between interface and type in TypeScript ?

Last Updated : 23 Sep, 2024

In TypeScript, both interface and type are used to define the structure of objects, but they differ in flexibility and usage. While interface is extendable and primarily for object shapes, type is more versatile, allowing unions, intersections, and more complex type definitions.

Type in TypeScript

The Type System in TypeScript describes the various data types supported by the language. It is divided into three major sections: Any Type, Built-In Type, and User-Defined Type. The Type System in TypeScript is responsible for ensuring the correctness of the data types before they are used in a program.

Example: In this example we defines two TypeScript types, Geeks and MoreGeeks, and combines them using the intersection & operator. The gfg constant implements both types, storing and logging the combined object.

javascript

type Geeks = {
  name: string;
  age: number;
};

type MoreGeeks = {
  email: string;
};

type CombinedGeeks = Geeks & MoreGeeks;

const gfg: CombinedGeeks = {
  name: "kgowda",
  age: 20,
  email: "[email protected]"
};

console.log(gfg);

Output:

{"name": "kgowda","age": 20,"email": "[email protected]"}

Interface in TypeScript

An Interface in TypeScript is a syntactical contract that entities must adhere to. It can only contain the declaration of properties, methods, and events, without any implementation. Interfaces define a standard structure that implementing classes must follow.

Example: In this example we demonstrates interface merging in TypeScript. Two Geeks interfaces are combined automatically, allowing the gfg object to implement all properties (name, age, email) and log the merged result.

javascript

// Creating a interface
interface Geeks {
  name: string;
  age: number
}

interface Geeks {
  email: string;
}

// Using the merged interface
const gfg: Geeks = {
  name: "kgowda",
  age: 20,
  email: "[email protected]"
};

console.log(gfg);

Output

name: " kgowda", age: 20, email: " [email protected]"

Differences Between Type and Interface in TypeScript

Feature	Type	Interface
Definition	A collection of data types.	A syntactical contract.
Flexibility	More flexible.	Less flexible compared to type.
Keyw	Uses the type keyword	Uses the interface keyword.
Naming	Supports creating a new name for a type.	Provides a way to define entities.
Capabilities	Has fewer capabilities.	Has more capabilities.
Object Usage	Does not inherently support the use of an object.	Supports the use of an object.
Merged Declarations	Does not support multiple merged declarations.	Supports multiple merged declarations.
Name Conflicts	Two types with the same name raise an exception.	Two interfaces with the same name get merged.
Implementation	Does not have implementation purposes.	Used for implementation and extending in classes.
Union Types	Does not support implementing or extending union types.	Supports implementing and extending union types.
Intersection Types	Can create intersection types by combining multiple types.	Cannot create intersection interfaces.
Usage with Primitives, Unions, and Tuples	Can be used for types like primitives, unions, and tuples.	Cannot be used with other types of declaration.

Though TypeScript's type and interface differ in certain features, they are similar in many ways, and one does not entirely replace the other. Developers can choose which one to use based on the specific requirements of their project. The flexibility and specific use cases of both type and interface make them valuable tools in TypeScript development.