Ensure the proper sequence of field initialization within a TypeScript class constructor

Question

Ensure the proper sequence of field initialization within a TypeScript class constructor

Is there a way to ensure the proper initialization order of class fields in TypeScript (4.0) constructors?

In this example (run), this.x is accessed in the method initY before it's initialized in the constructor:

class A  {
  readonly x: number
  readonly y: number

  constructor(x: number){
    this.y = this.initY() // this.x not initialized yet
    this.x = x
  }

  private initY(): number {
    return this.x + 1
  }
}

console.log(new A(1).y) // prints: NaN

The solution I found involved using a static method or top-level function for initialization.

Any other more concise ideas? Can the compiler (already in strict mode) or linter catch these issues?

typescript

Answer 1

Answer №1

To ensure type safety, one approach is to declare members as nullable types and implement typeguards to verify before using variables that can be null.

This method involves declaring x and y as a union of number | null

class A  {
  readonly x: number | null
  readonly y: number | null

  constructor(x: number){
    this.y = this.initY() // x is not initialized yet
    this.x = x
  }

  private initY(): number {
    // Will not compile unless you check for null first
    return this.x + 1
  }
}

https://i.stack.imgur.com/usDmy.png

Answer 2

To ensure type safety, one approach is to declare members as nullable types and implement typeguards to verify before using variables that can be null.

This method involves declaring x and y as a union of number | null

class A  {
  readonly x: number | null
  readonly y: number | null

  constructor(x: number){
    this.y = this.initY() // x is not initialized yet
    this.x = x
  }

  private initY(): number {
    // Will not compile unless you check for null first
    return this.x + 1
  }
}

https://i.stack.imgur.com/usDmy.png

Ensure the proper sequence of field initialization within a TypeScript class constructor

Answer №1

Similar questions

Retrieve type definitions for function parameters from an immutable array containing multiple arrays

Using command line arguments in a Tauri project with a Next.js frontend

Error encountered when using withRouter together with withStyles in Typescript on ComponentName

A peculiar quirk with Nuxt.js radio buttons: they appear clickable but are somehow not disabled

Another return payload failing to retrieve the return value

Check out the uploaded file preview on React Native Expo!

Attempting to create a universal logger factory using a functional approach

Injecting Dependencies with Angular 2 and the Ability to Include Optional Parameters

Sending geographic coordinates from a child component in a React application using Google Maps to its parent component within a functional

Setting up your Angular2-Typescript application to run smoothly in VS Code

Why isn't my Promise fulfilling its purpose?

WebStorm displays all imported items as unused in a TypeScript backend project

Is there a way to ensure that the observer.next(something) received the value before executing observer.complete()?

Sharing data between components in Angular 2 using the <router-outlet> technique

Oops! The program encountered an issue on the production environment, but it's running smoothly

I'm diving into the world of Typescript and trying to figure out how to use tooltips for my d3 stacked bar chart. Any guidance on implementing mouseover effects in Typescript would be greatly

Establishing a server in Node.js alongside an Angular 2 frontend by harnessing the power of Typescript

Jest.useFakeTimers() causing clearTimeout test to malfunction

Lazy loading in Angular allows you to navigate directly to a certain feature component

When renaming a Vuex module, the system mistakenly believes the old module is still present