This content originally appeared on DEV Community and was authored by Raj Sekhar
Typescript, oh I love it. Take stackoverflow survey, or ask any developer, most of them do. All major UI libraries/frameworks are (following Angular way) adding Typescript support now. Need to write a little extra boilerplate (use json to ts extension), but the benefits of type checking, intellisense and instant visual feedback outweigh the extra work.
I had this confusion where both interface and class gets the work done, but which one to use and when?
TLDR
Use interface, avoid class unless there is any special requirement that cannot be done with interface.
Classes add to js file size, after compiling
.tsto.js, while interfaces do not
Classes take extra lines
Lets take scenario, where we want to give structure to a pizza object. I can use interface or an object.
Pizza Interface
pizza-interface.ts
interface Pizza {
variant: string;
size: string,
price: number;
extraCheese: boolean;
takeAway: boolean;
}
const myPizza: Pizza = {
variant: 'Maxican green wave', size: 'medium', price: 550, extraCheese: true, takeAway: false,
}
console.log(myPizza);
pizza-interface.js
var myPizza = {
variant: 'Maxican green wave', size: 'medium', price: 550, extraCheese: true, takeAway: false
};
console.log(myPizza);
Pizza Class
pizza-class.ts
class Pizza {
variant: string;
size: string;
price: number;
extraCheese: boolean;
takeAway: boolean;
constructor(variant: string, size: string, price: number, extraCheese: boolean, takeAway: boolean) {
this.variant = variant;
this.size = size;
this.price = price;
this.extraCheese = extraCheese;
this.takeAway = takeAway;
}
}
const myPizza = new Pizza('Maxican green wave', 'medium', 550, true, false);
console.log(myPizza);
pizza-class.js
var Pizza = /** @class */ (function () {
function Pizza(variant, size, price, extraCheese, takeAway) {
this.variant = variant;
this.size = size;
this.price = price;
this.extraCheese = extraCheese;
this.takeAway = takeAway;
}
return Pizza;
}());
var myPizza = new Pizza('Maxican green wave', 'medium', 550, true, false);
console.log(myPizza);
More the lines in your
.js, more is its size
Usecase for class
Lets take a scenario of employee salary, where HRA, PF contribution is dependent on the basic amount. So if I want to provide structure for salary object with least effort, I might go with class instead of interface here.
salary.ts
class SalaryComponents {
basic: number;
pf: number;
hra: number;
professionalTax: number;
constructor(basic: number, state: string) {
this.basic = basic;
this.hra = basic * 0.5;
this.pf = basic * 0.12;
this.professionalTax = this.getProfessionalTax(state);
}
getProfessionalTax(stateName: string): number {
return 2000; // dummy value
}
}
const emp1 = new SalaryComponents(1000, 'Tamil Nadu');
console.log(emp1);
/** Output
{
basic: 1000,
hra: 500,
pf: 120,
professionalTax: 2000
}
*/
With just 2 inputs, i could create an object. Pretty neat huh!!
This is the only scenario is could think of, where class is more effective. Hope it was helpful. I am open for any constructive criticism/feedback.
PS: I am looking for new opportunities in Angular. If you have any openings, I am just a message away. (krj2033@gmail.com) (linkedin)
This content originally appeared on DEV Community and was authored by Raj Sekhar
Raj Sekhar | Sciencx (2021-08-05T20:25:10+00:00) Typescript Interface vs Class With Practical Examples. Retrieved from https://www.scien.cx/2021/08/05/typescript-interface-vs-class-with-practical-examples/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.