Typescript Interface vs Class With Practical Examples
Tags: typescript, javascript, angular, react
Published: 2021-08-05 20:25:10

Typescript, oh I love it. Take [stackoverflow survey](https://insights.stackoverflow.com/survey/2020#technology-most-loved-dreaded-and-wanted-languages), 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](https://marketplace.visualstudio.com/items?itemName=MariusAlchimavicius.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 `.ts` to `.js`, while interfaces do not

<image>

## 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**
```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**
```js
var myPizza = {
    variant: 'Maxican green wave', size: 'medium', price: 550, extraCheese: true, takeAway: false
};
console.log(myPizza);

```

### Pizza Class

**pizza-class.ts**
```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**
```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**
```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](https://www.linkedin.com/in/raj-sekhar-3b437782))