Tips on making a forced call to `super.ngOnDestroy`

Question

Tips on making a forced call to `super.ngOnDestroy`

I am utilizing an abstract class to prevent redundant code for unsubscribing observables. Here is what it looks like:

export abstract class SubscriptionManagmentDirective implements OnDestroy {
  componetDestroyed = new Subject<void>()

  constructor() {}

  ngOnDestroy(): void {
    this.componetDestroyed.next()
    this.componetDestroyed.unsubscribe()
  }
}

Occasionally, I forget to call super.ngOnDestroy() when overriding ngOnDestroy, causing the subscriptions to misbehave.

To ensure that un-subscriptions are properly called in extending components, I have added unit tests. However, remembering to add these tests can be a challenge.

Therefore, my query is,

Is there a way to mandate the calling of super.ngOnDestroy() whenever the component is extended?
Or is there a method to create a unit test for the abstract class that would automatically be applied to any component that extends it?

Your assistance on this matter would be greatly appreciated. Thank you.

angular typescript jasmine observable abstract-class

Answer 1

Answer №1

In my opinion, a useful approach would be to include

"noImplicitOverride": true

in your tsconfig file. While it may not directly remind you to call a super method, it will require you to be explicit about overriding methods. This means that if you try to override a method without using the override keyword, a compilation error will be thrown. Ultimately, it is left up to the developer to determine whether or not the super method should be called.

https://www.typescriptlang.org/tsconfig#noImplicitOverride

Answer 2

In my opinion, a useful approach would be to include

"noImplicitOverride": true

in your tsconfig file. While it may not directly remind you to call a super method, it will require you to be explicit about overriding methods. This means that if you try to override a method without using the override keyword, a compilation error will be thrown. Ultimately, it is left up to the developer to determine whether or not the super method should be called.

https://www.typescriptlang.org/tsconfig#noImplicitOverride

Answer 3

Answer №2

Unfortunately, there is no automated method to call a function from an abstract class.
The best approach is to conduct unit testing in isolation. You can achieve this by creating a test class that extends the abstract class and then focusing on testing the ngOnDestroy method. This method should suffice for your testing needs.

Answer 4

Unfortunately, there is no automated method to call a function from an abstract class.
The best approach is to conduct unit testing in isolation. You can achieve this by creating a test class that extends the abstract class and then focusing on testing the ngOnDestroy method. This method should suffice for your testing needs.

Answer 5

Answer №3

There's a somewhat unconventional and messy method that comes to mind. TypeScript itself enforces the super() call in the constructor, which could potentially be leveraged.

class Foo {
  constructor() {
    const oldNgOnDestroy = this.ngOnDestroy;

    this.ngOnDestroy = function() {
      console.log("decorated ngOnDestroy");
      return oldNgOnDestroy();
    }.bind(this);
  }

  ngOnDestroy() {
    console.log("original ngOnDestroy");
  }
}

class Bar extends Foo {
  constructor() {
    super();
  }
}

class Baz extends Foo {
  constructor() {
    super();
  }

  ngOnDestroy() {
    console.log("custom ngOnDestroy");
  }
}

const bar = new Bar();
bar.ngOnDestroy();
const baz = new Baz();
baz.ngOnDestroy();

This approach may not be elegant, but it gets the job done in a roundabout way.

Answer 6

There's a somewhat unconventional and messy method that comes to mind. TypeScript itself enforces the super() call in the constructor, which could potentially be leveraged.

class Foo {
  constructor() {
    const oldNgOnDestroy = this.ngOnDestroy;

    this.ngOnDestroy = function() {
      console.log("decorated ngOnDestroy");
      return oldNgOnDestroy();
    }.bind(this);
  }

  ngOnDestroy() {
    console.log("original ngOnDestroy");
  }
}

class Bar extends Foo {
  constructor() {
    super();
  }
}

class Baz extends Foo {
  constructor() {
    super();
  }

  ngOnDestroy() {
    console.log("custom ngOnDestroy");
  }
}

const bar = new Bar();
bar.ngOnDestroy();
const baz = new Baz();
baz.ngOnDestroy();

This approach may not be elegant, but it gets the job done in a roundabout way.

Tips on making a forced call to `super.ngOnDestroy`

Answer №1

Answer №2

Answer №3

Similar questions

showing pop-up notification in Angular

Having difficulty incorporating TypeScript into Vue

The filtering process of an array using the filter() method is effective, however, it does not result in any visible changes on

Why is this chip-list not functioning properly in my Angular 14 and Angular material application?

What is the best way to include a button at the bottom of a Material UI table?

SmartEdit functions properly when spartacus is running using yarn start --ssl, but does not work without SSL enabled

'Error: The type is missing the 'previous' property - Combining TypeScript with ReactJS'

Select information from an array and store it within an object

Value returned by Typescript

Tips for extracting a particular subset from an array containing JSON objects using Angular

Angular 7 throwing errors of undefined variables

What methods does VS Code use to display type errors in TypeScript given that TypeScript requires compilation?

Tips for efficiently handling state across various forms in separate components using only one save button within a React-Redux application

Can conditional content projection (transclusion) be achieved in Angular 2+?

'Unable to locate the identifier "system" in Angular 2' - troubleshoot this unique error

TypeScript does not properly validate the types of defaultProps

Error occurs in Azure Function Linux Nodejs when trying to use @azure/storage-blob as it cannot read the property 'startsWith' of undefined

Encountering a POST 504 error while attempting to proxy an Angular application to a Node server

Tips for setting up nextjs with typescript to utilize sass and nextjs font styles

What is the best way to integrate model classes within an Angular module?