Typescript 4.6 and Arrow Functions

Question

We recently updated to typescript 4.6 (from 4.5) and are experiencing some weird this issues.

for example we previously had a function defined at #handleUnsavedData = async (event: BeforeUnloadEvent): Promise<boolean> => { and passed to a service with this.workspaceService.handleUnsaved = this.#handleUnsavedData

it appears we now need to define it like async #handleUnsavedData(event: BeforeUnloadEvent): Promise<boolean> { and 'pass' it with the arrow instead this.workspaceService.handleUnsaved = event => this.#handleUnsavedData(event);

It also appears that we can no longer access constructor injected services before the constructor? Before:

export class HeaderComponent {
  @Input() close = this.workspaceService.close;

  constructor(private workspaceService: WorkspaceService) { }
}

After:

export class HeaderComponent {

  constructor(private workspaceService: WorkspaceService) { }

  close() {
    this.workspaceService.close();
  }
}

I feel like I'm missing something incredibly basic here, but i have read and re-read the TS 4.6 documentation and am struggling to find what is causing this.

Answer 1

I do not know what i did to resolve this, but somewhere down the line i changed something unrelated and this 'issue' went away.