[Typescript] Class - Param properties

For the following class:

class Car {
  make: string
  model: string
  year: number
  constructor(make: string, model: string, year: number) {
    this.make = make
    this.model = model
    this.year = year
  }
}

We can write like this:

class Car {
  constructor(
    public make: string,
    public model: string,
    public year: number
  ) {}
}
 
const myCar = new Car("Honda", "Accord", 2017)

 

The first argument passed to the constructor should be a string, and should be available within the scope of the constructor as make. This also creates a public class field on Car called make and pass it the value that was given to the constructor

 

It is important to understand the order in which “constructor-stuff” runs.

class Base {}
 
class Car extends Base {
  foo = console.log("class field initializer")
  constructor(public make: string) {
    super()
    console.log("custom constructor stuff")
  }
}
 
const c = new Car("honda")

The order of execution:

"use strict";
class Base {
}
class Car extends Base {
    constructor(make) {
        super();
        this.make = make;
        this.foo = console.log("class field initializer");
        console.log("custom constructor stuff");
    }
}
const c = new Car("honda");
 

 

Note the following order of what ends up in the class constructor:

1. super()
2. param property initialization
3. other class field initialization
4. anything else that was in your constructor after super()

 

Before V4.6, the follow code is not possible:

class Base {}
 
class Car extends Base {
  foo = console.log("class field initializer")
  constructor(public make: string) {
    console.log("before super")
    super()
    console.log("custom constructor stuff")
  }
}
 
const c = new Car("honda")

A 'super' call must be the first statement in the constructor when a class contains initialized properties, parameter properties, or private identifiers.

To fix it:

class Base {}

class Car extends Base {
  private make: string;
  constructor(make: string) {
    console.log("before super")
    super()
    this.make = make;
    console.log("custom constructor stuff")
  }
}

const c = new Car("honda")

 

But after Typescript v4.6, it is possible to have some other code before super() call.