Initializing variables inline during declaration vs in the constructor in Angular with TS

Question

I have been working for a while with Angular but can't find a definitive recommendation on :

Initializing member variables inline vs in the constructor

I had a couple of times my code reviewed to move initialization of simple types (boolean, number, etc.) in the constructor, but still wonder whether this is the better practice or a matter of taste? For me inline initialization results in more localized and concise code, that's why I prefer it, but am I right or not ?

Example:

@Component({
  selector: 'app-elem',
  templateUrl: './app-elem.component.html',
  styleUrls: ['./app-elem.component.scss'],
})
export class AppElemComponent {

  public isHidden = true;    // <-- initialization inline
  public isVisible: boolean;

  constructor() {
    this.isVisible = true;  // <-- vs initialization in the constructor
  }
}

Answer 1

It's a personal style preference.

Initializing a property in the constructor allows you to leverage constructor parameters when you're initializing the property.

Initializing a property inline is more concise, and keeps the default value of the property more in context with its declaration.

TypeScript compiler just brings values initialized inline inside the constructor https://www.typescriptlang.org/play/

Answer 2

There is no difference basically, its just the convenience. Only difference for using constructor initialization is you can pass the value dynamically and then assign to it.

constructor(visible) {
    this.isVisible = visible;  // <-- vs initialization in the constructor
}