Make sure to call super.onDestroy() in the child component before overriding it

Question

Make sure to call super.onDestroy() in the child component before overriding it

I find myself with a collection of components that share similar lifecycle logic, so I decided to create a base component that implements the OnDestroy interface.

abstract class BaseComponent implements OnDestroy {
   subscriptions = new Array<Subscription>();
   get model() { return … }

   ngOnDestroy() {
      for (let s of subscriptions) s.unsubscribe();
   }
}

The issue arises when a developer writes a custom onDestroy method in a concrete Component that extends ComponentBase, as there is no clear indication that they need to call super.ngOnDestroy();

Is there a way in TypeScript to provide a warning for this? Or is there another design pattern besides component inheritance? perhaps a unit test could be written to verify ngOnDestroy on all components extending from BaseComponent?

EDIT I have come to realize that the BaseComponent with an array of subscriptions mentioned above is not a good practice and should be avoided. It would be better to use auto-unsubscribing observables.

Take a look at the takeUntil(destroy$) pattern:

class MyComponent implements OnInit, OnDestroy {    
    destroy$ = new Subject();    
  
    constructor(http: HttpService) { }

    ngOnInit() {
        http.get(...).pipe(
          takeUntil(this.destroy$)
        ).subscribe(...);  
    }
    

    ngOnDestroy() {
      destroy$.next();
   }
}

angular typescript inheritance

Answer 1

Answer №1

To ensure proper execution, it is recommended to establish a return type for ngOnDestroy that the child component must also adhere to.

class REQUIRED_SUPER {} //important to not export it, only we should be able to create it.

class Base implements OnDestroy {
    ngOnDestroy(): REQUIRED_SUPER {
        return new REQUIRED_SUPER;
    }
}

If the child component fails to return the specified type, it indicates that the method has not been invoked.

export class Child extends Base implements OnDestroy {
    ngOnDestroy(): REQUIRED_SUPER {
    }
}

This results in

TS2355: A function whose declared type is neither 'void' nor 'any' must return a value.

To rectify this issue, the user must follow these guidelines:

ngOnDestroy(): REQUIRED_SUPER {
    return super.ngOnDestroy();
}

or

ngOnDestroy(): REQUIRED_SUPER {
    const superCalled = super.ngOnDestroy();
    //perform additional tasks
    return superCalled;
}

Answer 2

To ensure proper execution, it is recommended to establish a return type for ngOnDestroy that the child component must also adhere to.

class REQUIRED_SUPER {} //important to not export it, only we should be able to create it.

class Base implements OnDestroy {
    ngOnDestroy(): REQUIRED_SUPER {
        return new REQUIRED_SUPER;
    }
}

If the child component fails to return the specified type, it indicates that the method has not been invoked.

export class Child extends Base implements OnDestroy {
    ngOnDestroy(): REQUIRED_SUPER {
    }
}

This results in

TS2355: A function whose declared type is neither 'void' nor 'any' must return a value.

To rectify this issue, the user must follow these guidelines:

ngOnDestroy(): REQUIRED_SUPER {
    return super.ngOnDestroy();
}

or

ngOnDestroy(): REQUIRED_SUPER {
    const superCalled = super.ngOnDestroy();
    //perform additional tasks
    return superCalled;
}

Answer 3

Answer №2

It might be the eleventh hour, but for those who are in need of it!!!

declare abstract class BaseClass implements OnDestroy {

ngOnDestroy(): void { }

constructor() {
    const refOnDestroy = this.ngOnDestroy;
    this.ngOnDestroy = () => {
        refOnDestroy();
       // implement unsubscriptions here
       // e.g. for (let s of subscriptions) s.unsubscribe();
    };
 }
}

For more information, click here

Answer 4

It might be the eleventh hour, but for those who are in need of it!!!

declare abstract class BaseClass implements OnDestroy {

ngOnDestroy(): void { }

constructor() {
    const refOnDestroy = this.ngOnDestroy;
    this.ngOnDestroy = () => {
        refOnDestroy();
       // implement unsubscriptions here
       // e.g. for (let s of subscriptions) s.unsubscribe();
    };
 }
}

For more information, click here

Answer 5

Answer №3

In most object-oriented programming languages, the feature you are searching for is not readily available. Once a method is overridden by a child class, there is no built-in way to ensure that the child class invokes the parent's implementation. In TypeScript, there is an ongoing discussion regarding this functionality in an open issue.

One alternative approach could involve marking the implementation of `ngOnDestroy` in the base class as `final`, and providing base classes with a hook-up method to enable them to delegate tear-down logic. For example:

abstract class BaseComponent implements OnDestroy {
   readonly subscriptions = new Array<Subscription>();
   get model() { return … }

   ngOnDestroy() {
      for (let s of subscriptions) s.unsubscribe();
      this.destroyHook();
   }

   // Depending on your requirements, you may consider having a default NOOP implementation
   // and allowing child classes to override it. This way, you can avoid scattering NOOP 
   // implementations throughout your codebase.
   abstract protected destroyHook(): void;
}


class ChildClass extends BaseComponent {
   protected destroyHook(){//NOOP}
}

Unfortunately, TypeScript does not currently support an equivalent of the `final` keyword at the moment, as discussed in this GitHub issue.

Another noteworthy aspect is that the challenge you are facing stems from how you plan to manage subscriptions on component instances. There are more effective ways to handle this, such as unsubscribing from source observables when the component is destroyed. You can achieve this using something like:

readonly observable$: Observable<string> = ....;
ngOnInit(){
   observable$.pipe(takeUntil(/*this instance is destroyed*/)).subscribe(...)
}

This can be easily accomplished with libraries like this one.

Answer 6

In most object-oriented programming languages, the feature you are searching for is not readily available. Once a method is overridden by a child class, there is no built-in way to ensure that the child class invokes the parent's implementation. In TypeScript, there is an ongoing discussion regarding this functionality in an open issue.

One alternative approach could involve marking the implementation of `ngOnDestroy` in the base class as `final`, and providing base classes with a hook-up method to enable them to delegate tear-down logic. For example:

abstract class BaseComponent implements OnDestroy {
   readonly subscriptions = new Array<Subscription>();
   get model() { return … }

   ngOnDestroy() {
      for (let s of subscriptions) s.unsubscribe();
      this.destroyHook();
   }

   // Depending on your requirements, you may consider having a default NOOP implementation
   // and allowing child classes to override it. This way, you can avoid scattering NOOP 
   // implementations throughout your codebase.
   abstract protected destroyHook(): void;
}


class ChildClass extends BaseComponent {
   protected destroyHook(){//NOOP}
}

Unfortunately, TypeScript does not currently support an equivalent of the `final` keyword at the moment, as discussed in this GitHub issue.

Another noteworthy aspect is that the challenge you are facing stems from how you plan to manage subscriptions on component instances. There are more effective ways to handle this, such as unsubscribing from source observables when the component is destroyed. You can achieve this using something like:

readonly observable$: Observable<string> = ....;
ngOnInit(){
   observable$.pipe(takeUntil(/*this instance is destroyed*/)).subscribe(...)
}

This can be easily accomplished with libraries like this one.

Answer 7

Answer №4

To prevent developers from including a subscribe in components and avoid the need to unsubscribe, consider leveraging reactive programming with rxjs operators and async pipes.

An alternative approach would be to implement a custom class decorator that evaluates all class members to identify instances of subscriptions.

Another option is to utilize a custom rxjs operator that automatically unsubscribes when a component is being destroyed.

While there are several choices available, I recommend utilizing the first method for cleaner code and compatibility with onPush change detection strategy.

Answer 8

To prevent developers from including a subscribe in components and avoid the need to unsubscribe, consider leveraging reactive programming with rxjs operators and async pipes.

An alternative approach would be to implement a custom class decorator that evaluates all class members to identify instances of subscriptions.

Another option is to utilize a custom rxjs operator that automatically unsubscribes when a component is being destroyed.

While there are several choices available, I recommend utilizing the first method for cleaner code and compatibility with onPush change detection strategy.

Make sure to call super.onDestroy() in the child component before overriding it

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

typescript tips for incorporating nested types in inheritance

The page does not appear to be updating after the onClick event when using the useState hook

Is it impossible to use type as a generic in TypeScript?

Utilizing Angular 2's *ngFor to conditionally wrap elements can be compared to organizing a layout with three columns in a Bootstrap row, then starting a

Struggling to successfully pass a function as an argument to the setTimeout method within an array in node.js using TypeScript

The 'this' context setting function is not functioning as expected

Is there a way to implement an extra placeholder attribute with Angular4?

Struggling with creating a generic TypeScript structure?

Utilizing a variable string name for a method in Typescript Vue

Angular observable will only receive data once during initialization

Having trouble invoking the "done" function in JQuery following a POST request

A TypeScript utility type that conditionally assigns props based on the values of other properties within the type

I haven't encountered any type warnings in the places where I anticipated them

Sharing packages within nested scopes

What is the procedure for implementing a RoleGuard in Angular 6?

incapable of altering the function of individual parts within ionic 3

When deciding between StoreModule.forRoot and StoreModule.forFeature, consider the specific needs of your application

How to trigger a component programmatically in Angular 6

Utilize JavaScript libraries in a TypeScript project

The React Nested Loop Query: Maximizing Efficiency in Data