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: "kgowda@gmail.com"
};
console.log(gfg);
Output:
{"name": "kgowda","age": 20,"email": "kgowda@gmail.com"}
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: "kgowda@gmail.com"
};
console.log(gfg);
Output
name: " kgowda", age: 20, email: " kgowda@gmail.com"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.
