Implementing an external abstract class in Typescript without inheriting from it

Question

Implementing an external abstract class in Typescript without inheriting from it

In my code, there is a module named utils.tsx defined as follows:

interface IUtils {
    toUri: (route: string) => string
}

export default abstract class Utils implements IUtils {
    public toUri = (route: string) => {
        return route
    }
}

Now, in another file where I want to utilize this utils module:

 import Utils from '../helpers/utils'

 class Router  {
     private getBuilder = (search: string) => {
       const path = Utils.toUri(search)
     }
 }

However, using Utils.toUri gives me a TS error:

[ts] Property 'toUri' does not exist on type 'typeof Utils'.

I aim to call the external abstract class function without extending or inheriting from the Router class since there will be multiple external modules in the main file. Can someone assist me in finding a solution and understanding this issue?

PS: I also attempted with public abstract toUri(). It's possible that I have confused the usage of static and abstract due to routines from other programming languages...

typescript oop typescript-typings

Answer 1

Answer №1

It is not advisable for Utils to implement IUtils, as Utils represents the instance type of the class. It seems that you intend for the constructor of Utils (with the type typeof Utils) to implement IUtils. This implies that toUri should be a static method in the Utils class, like so:

abstract class Utils {
  public static toUri = (route: string) => {
    return route
  }
}

There is no direct way to specify that the static part of the class implements IUtils in the class Utils declaration. However, due to structural typing, the Utils constructor will inherently be recognized as implementing IUtils without explicit annotation.

declare function takeIUtils(iUtils: IUtils): void;
takeIUtils(Utils); // works as expected

This approach should achieve the desired functionality for your Router class.

On a side note, consider whether having Utils as a class is necessary. If instances of Utils are unnecessary (e.g.,

class X extends Utils {...}; new X()

), it might be beneficial to treat Utils as a value:

export const Utils : IUtils = {
  toUri(route: string) {
    return route
  }
}

Alternatively, you could utilize a namespace structure:

export namespace Utils {
  export function toUri(route: string) {
    return route
  }
}

Consider these options or explore module-based solutions based on your requirements.

Hopefully, this information proves helpful. Best of luck with your implementation!

Answer 2

It is not advisable for Utils to implement IUtils, as Utils represents the instance type of the class. It seems that you intend for the constructor of Utils (with the type typeof Utils) to implement IUtils. This implies that toUri should be a static method in the Utils class, like so:

abstract class Utils {
  public static toUri = (route: string) => {
    return route
  }
}

There is no direct way to specify that the static part of the class implements IUtils in the class Utils declaration. However, due to structural typing, the Utils constructor will inherently be recognized as implementing IUtils without explicit annotation.

declare function takeIUtils(iUtils: IUtils): void;
takeIUtils(Utils); // works as expected

This approach should achieve the desired functionality for your Router class.

On a side note, consider whether having Utils as a class is necessary. If instances of Utils are unnecessary (e.g.,

class X extends Utils {...}; new X()

), it might be beneficial to treat Utils as a value:

export const Utils : IUtils = {
  toUri(route: string) {
    return route
  }
}

Alternatively, you could utilize a namespace structure:

export namespace Utils {
  export function toUri(route: string) {
    return route
  }
}

Consider these options or explore module-based solutions based on your requirements.

Hopefully, this information proves helpful. Best of luck with your implementation!

Implementing an external abstract class in Typescript without inheriting from it

Answer №1

Similar questions

Angular 7 compile error NG8002: Unable to bind object as it is not recognized as a valid property

Can you explain the distinction between "parser" and "parserOptions.parser" in an ESLint configuration?

Function that returns a lookup map for TypeScript enums

Troubleshooting: Unable to Open Page with Google Material Button in Angular 5

Discussing recursive types A <--> B with generics in TypeScript

The Mui datepicker displays the day and month in reverse order

Ways to retrieve a value from outside the Angular subscribe block

What is the best way to update the color of a label in a Mantine component?

The type '{ status: boolean; image: null; price: number; }[]' does not include all the properties required by the 'SelectedCustomImageType' type

Tips for creating a versatile function in TypeScript that accepts either a single value or an array of values for two parameters

Combine array elements in Angular/Javascript based on a certain condition

Angular - Showing validation messages post successful execution of two functions

The diameter of the pie chart in HighCharts adjusts dynamically based on the values specified within the series

I am perplexed by the CommonJS pattern, TypeScript modules, and how to effectively utilize ES6

Is it possible in TypeScript to change a string literal type into a number type?

Encountered an issue with a module not being found while trying to install a published React component library that is built using Rollup. The error message states:

Create a fresh instance of an object in node.js by utilizing the require/new method

Running JavaScript code when the route changes in Angular 6

The issue with Angular's Array.push method arises when only the last object in the array is being pushed after a mat-checkbox

The error message "TypeError: Attempting to access the 'map' property of an undefined value (React JS)" was displayed