Typescript Interface vs Class With Practical Examples

In this context class is a waste i.e. it isn't carrying its weight. On a personal level I'm not fond of classes as they tend to conflate type space and value space (just like TypeScript does with regular function declarations and expressions)

On introduction I'd go with

// Type definition in the type (TypeScript) space
type Pizza = {
    variant: string;
    size: string;
    price: number;
    extraCheese: boolean;
    takeAway: boolean;
};

// Value creation in value (JavaScript) space
const myPizza: Pizza = {
    variant: "Maxican green wave",
    size: "medium",
    price: 550,
    extraCheese: true,
    takeAway: false
};
console.log(myPizza);

By going with an object literal TypeScript can verify that myPizza conforms with the Pizza type and as a bonus the object properties act as "named parameters". For example variant and size are both string but there is no confusing them as you have to refer to them by name.

Creating Pizza's all over the place I'd move to:

// Type definition in the type (TypeScript) space
type Pizza = {
  variant: string;
  size: string;
  price: number;
  extraCheese: boolean;
  takeAway: boolean;
};

type MakePizza = (
  variant: string,
  size: string,
  price: number,
  extraCheese: boolean,
  takeAway: boolean
) => Pizza;

// Value creation in value (JavaScript) space
const makePizza: MakePizza = (
  variant = '',
  size = '',
  price = 0,
  extraCheese = false,
  takeAway = false
) => {
  return {
    variant,
    size,
    price,
    extraCheese,
    takeAway,
  };
};

const myPizza = makePizza('Mexican green wave', 'medium', 550, true, false);
console.log(myPizza);

Now I can mass produce Pizza objects - yet don't have to bother with either new or this (not that they'll slow me down if it came to it).

However there is a trade off by going with a factory function (or a for that matter a constructor) - TypeScript won't be able to detect whether you swapped variant with size or extraCheese with takeAway.

Bottom line: I don't go "class-oriented" until there is a clear benefit - until then I'll stay function-oriented.

As to the issue of not using parameter properties - one could simply write:

class Pizza {
  constructor(
    public variant: string = '',
    public size: string = '',
    public price: number = 0,
    public extraCheese: boolean = false,
    public takeAway: boolean = false
  ) {}
}

const myPizza = new Pizza('Mexican green wave', 'medium', 550, true, false);
console.log(myPizza);

Is it convenient? Perhaps.
Is it correct? Not in my book.

A type is a specification that a value has to conform to, to be considered a member of that type. It's a "target" that should be spelled out in explicit detail separately and prominently - not be buried inside the code that is responsible for creating the value.

I personally stick to type aliases. interface comes in handy when it is necessary to augment existing classes with an interface merge:

class MyClass {
  readonly #value: number;

  constructor(value: number) {
    this.#value = value;
  }

  get value(): number {
    return this.#value;
  }
}

interface MyClass {
  square(): number;
}

function square(this: MyClass): number {
  const value = this.value;
  return value * value;
}

MyClass.prototype.square = square;

const container = new MyClass(42);
console.assert(container.square() === 1764, "Square isn't 1764");

Type actually looks better than interface.. so for api response and request object structure, I'll be using type. And interface only to implement any class. Thanks for your time and explaining everything.

You can use public keyword in your constructor to avoid boilerplate code

Have you considered dependency injection as a scenario? For example, what if I have a service class I depend on? If I inject that into my class constructor, I can easily test it.

There is no need to add the properties on a ts class if they match the constructor. Simply add an access modifier (public for example):
"constructor(public xyz:string) {}"
And it will be automatically added as a property of the class and assigned the value.

Actually I did not define any target in tsconfig and by default it compiled to ES5 probably.
Let me check this one again. Thanks for pointing out.

Good point, and my thoughts too.