TypeScript supports custom types, which can be defined using either “interface” or “type”. An interface can be implemented by a class or an object, whereas a type alias can only be utilized for creating a new name for an existing type or to define a union of types. Although types and interfaces are frequently interchangeable, there are certain differences in their functionality and syntax that make them more appropriate for particular scenarios.
This blog will describe the TypeScript interface and type and their difference.
What is TypeScript Interface vs Type?
“Interface” and “type” are used for defining custom types in TypeScript. But there are some distinctions in their functionality and syntax. The main difference between an interface and a type is that an interface defines a new type, while a type alias does not.
An interface can be implemented by a class or an object, while types can define more complex types using features like unions and intersections. In general, interfaces are more commonly used for defining object shapes and APIs, while types are more commonly used for defining complex data types and utility types. Let’s understand both of these separately.
What is a TypeScript Interface?
A TypeScript interface is a technique to define the shape of a TypeScript object. It is created using the keyword “interface” and it specifies a set of attributes and methods that an object requires in order to be classified as of that type. It is equivalent to a class in object-oriented programming; however, it does not define any implementation. Interfaces are mainly utilized for type checking and ensuring that an object conforms to a specific structure.
Before proceeding, keep in mind that in order to execute a TypeScript file, it must be transpile into a JavaScript file and then run the JavaScript code on the terminal using the given commands:
node filename.js
Example
Create an interface named “User” that defines three attributes and a method “getInfo()”:
firstName: string;
lastName: string;
age: number;
getInfo(): void;
}
Create a class “Student” that is inherited with an interface. The class defines its attributes, a constructor that will assign the values to the attributes, and a method “getInfo()” that will display the values relative to the attributes:
firstName: string;
lastName: string;
age: number;
constructor(firstName: string, lastName: string, age: number) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
getInfo(): void {
console.log("Student Information:")
console.log("- Name: " + this.firstName + ' ' + this.lastName);
console.log("- Age: " + this.age);
}
}
Create an object of “Student” named “std” of “User” type by calling the constructor with the “new” keyword and then, call the getInfo() method to print the data on the console:
std.getInfo();
Output
What is a TypeScript Type?
TypeScript types are mostly used for creating aliases for existing types as well as to create more complicated types. It represents a specific shape or structure of data. It can be defined/declared with the “type” keyword. TypeScript’s types can be used to make code more understandable and reduce repetition/duplication.
Example
First, define a type “User” using the “type” keyword specified with five properties one of them is an optional attribute that is “phone”:
firstName: string;
lastName: string;
age: number;
email: string;
phone?: string;
};
Define a function named “getFullName”, which takes a parameter of type “User” and prints the data consisting of the person’s information including “name”, “age”, “email” and “phone number”:
console.log("User Information:")
console.log("- Name: " + person.firstName + ' ' + person.lastName);
console.log("- Age: " + person.age);
console.log("- Email: " + person.email);
console.log("-Phone #: " + person.phone);
}
Now, create an object “person” of type “User” with key-value pairs:
firstName: 'Mily',
lastName: 'Micheal',
age: 28,
email: '[email protected]',
phone: "086-34581734"
};
Lastly, print the user information by calling the function getInfo():
Output
That was all about the TypeScript interface and type.
Conclusion
In TypeScript, “interface” and “type” are used for defining custom types. An interface can be implemented by a class or an object, while types can define more complex types using features like unions and intersections. These are the powerful features that can help to write more organized and scalable code. This blog described the TypeScript interface and type and their difference.
