In this article, we will see what are interfaces and types and the difference between them with few important points.
Interfaces are the way to type-check custom data types. For example, Typescript provides primitive data types that can be used for type-check.
But in some situation, you may need to check the type of an object or function.
1function loginUser({ username,email,password }){2 // Login Functionality comes Here3}
How can we check the type of object which contains username
, email
and password
. Well, we can use Interface to check the type of it.
1interface IUserArg {2 username : string,3 email : string,4 password : string5}67function loginUser({ username,email,password } :IUserArg) {8 // Login Functionality comes Here910 console.log(username)11}1213loginUser({ username: 'ganesh',email : 'ganesh@gmail.com',password: '12345' });
this is one of the use-cases of Interfaces in Typescript. Similarly, we can use it for function type-check and class implementation.
Types are similar to interfaces. let's see the implementation first and see the difference between both of them.
1type IUserArg = {2 username : string,3 email : string,4 password : string5}67function loginUser({ username,email,password } :IUserArg) {8 // Login Functionality comes Here910 console.log(username)11}1213loginUser({ username: 'ganesh',email : 'ganesh@gmail.com',password: '12345' });
Let's see the difference between interfaces and types in typescript.
First and foremost, the syntax between types and interfaces are different to implement them in typescript.
we use type
to declare a type and interface
to declare interfaces in typescript.
1interface Point {2 x: number;3 y: number;4}56interface SetPoint {7 (x: number, y: number): void;8}
1type Point = {2 x: number;3 y: number;4};56type SetPoint = (x: number, y: number) => void;
Interfaces can be used mainly for data types that are object or custom data types whereas types alias can be used for all the data types such as primitives,unions and tuples.
1//declare the type for string2type UserName = string34//object with single number data type5type point = { xCord : number }67//union8type Xdata = point | UserName910//tuple11type Value = [point,UserName];
unfortunately, we can't do that in interfaces.
Before getting into the difference, let's recap what are extend
and implements
.
extends
is used in child classes. when we want to inherit some properties from the parent class. we should use extends
.
implements
is used to use some methods from a class which is not a parent class. it is same as the implements
class. a good example would be,
1class Person {2 name: string;3 age: number;4}5class Child extends Person {}67class Man implements Person {}
Both Interface
and type
can extends
and implements
except in one case.
Extends
1interface IUser {2 name : string;3 email : string;4}56class Admin extends IUser {7 //Admin Class8}910type UserType = {11 name : string,12 email : string13}1415class AdminRole extends UserType {16 //logic17}
Implements
1interface IUser {2 name : string;3 email : string;4}56class Admin implements IUser {7 //Admin Class8}910type UserType = {11 name : string,12 email : string13}1415class AdminRole implements UserType {16 //logic17}
One scenario where Type Alias implements
won't work. i.e, when you can type with union
1type TaskType {2 name : string,3 assigneeId: string4}56type ProjectType = TaskType | { projectId : string };78// ERROR: can not implement a union type9class Project implements ProjectType {10}
Unlike a type alias, an interface can be defined multiple times and it will be considered as a single interface.
1interface IUser {2 name : string;3 role : string;4}56interface IUser {7 email : string8}910// interface IUser { name: string;email: string;role: string }1112const user: IUser = { name: 'John',email : 'john@gmail.com',role: 'ADMIN'}
Choosing an interface and type alias depends on the requirement that we have. Though, it won't be a critical problem. it helps you to make your code readable and maintainable. So, it's important to make it maintainable.
would be factor which differs between interface
and types
.
No spam, ever. Unsubscribe anytime.