What is the difference between interface and type in TypeScript ?

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.

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.

// 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

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.