What is the process of declaring a method within a subclass and then retrieving it from a method within the parent class using Typescript?

Question

What is the process of declaring a method within a subclass and then retrieving it from a method within the parent class using Typescript?

I am currently working with this TypeScript code snippet:

abstract class Base {
   static actions:Record<string,unknown>

   static getActions () {
      return this.actions
   }
}

class Sub extends Base {
   static actions = {
      bar:(bar:string) => {
         return 'bar ' + bar
      }
   }
}

const sample = Sub.getActions()
sample.bar('baz')  //=> 'bar baz'

The code functions as expected when executed, but I encounter an error in VSCode regarding the sample.bar('baz') method

unknown
This expression is not callable. Type '{}' has no call signatures.'.

Additionally, there is no Intellisense support for the return of Sub.getActions(). It seems that the issue may stem from how I have typed the actions property in the base class. How can I correctly type this scenario so that VSCode recognizes it? Are there alternative approaches to achieve similar functionality?

typescript class visual-studio-code inheritance intellisense

Answer 1

Answer №1

Typescript does not assume that the methods property only contains functions. By defining the type as unknown, it can be any type and may not necessarily be callable.

To ensure all values in methods are of type function, you can explicitly type them:

 static methods: Record < string, Function >

With this updated code, there should be no TypeScript errors:


abstract class Parent {
  static methods: Record < string, Function >

      static returnMethods() {
          return this.methods
      }
}

class Child extends Parent {
  static methods = {
      hello (hello: string) {
          return 'hello ' + hello
      }
  }
}

const test = Child.returnMethods()
test.hello('world') //=> 'hello world'

What is the purpose of having a method property containing all class functions? Would it be more effective to remove the class entirely and just create a methods object instead?

Answer 2

Typescript does not assume that the methods property only contains functions. By defining the type as unknown, it can be any type and may not necessarily be callable.

To ensure all values in methods are of type function, you can explicitly type them:

 static methods: Record < string, Function >

With this updated code, there should be no TypeScript errors:


abstract class Parent {
  static methods: Record < string, Function >

      static returnMethods() {
          return this.methods
      }
}

class Child extends Parent {
  static methods = {
      hello (hello: string) {
          return 'hello ' + hello
      }
  }
}

const test = Child.returnMethods()
test.hello('world') //=> 'hello world'

What is the purpose of having a method property containing all class functions? Would it be more effective to remove the class entirely and just create a methods object instead?

Answer 3

Answer №2

The issue arises from defining the properties in methods with the type unknown, which is not callable.

To address this problem specifically, you can specify methods as Record<string, (foo: string) => string>

to ensure TypeScript recognizes that the properties on

methods` are callable:

abstract class Parent {
   static methods: Record<string, (foo: string) => string>
   // ...
}

Playground example

This maintains type safety by enforcing that the method cannot be called without arguments or with a number, it must be a string.

You could opt for using Record<string, Function> instead, but this would compromise type safety:

abstract class Parent {
   static methods: Record<string, Function>
   // ...
}
// ...
test.foo()       //=> 'undefined bar' -- no type safety!

Playground example

Answer 4

The issue arises from defining the properties in methods with the type unknown, which is not callable.

To address this problem specifically, you can specify methods as Record<string, (foo: string) => string>

to ensure TypeScript recognizes that the properties on

methods` are callable:

abstract class Parent {
   static methods: Record<string, (foo: string) => string>
   // ...
}

Playground example

This maintains type safety by enforcing that the method cannot be called without arguments or with a number, it must be a string.

You could opt for using Record<string, Function> instead, but this would compromise type safety:

abstract class Parent {
   static methods: Record<string, Function>
   // ...
}
// ...
test.foo()       //=> 'undefined bar' -- no type safety!

Playground example

What is the process of declaring a method within a subclass and then retrieving it from a method within the parent class using Typescript?

Answer №1

Answer №2

Similar questions

Leveraging TypeScript enums in conjunction with React to anticipate a string prop

Is there a way to effectively eliminate an array of objects in JavaScript or TypeScript and alter the object structure simultaneously?

Error in IONIC 3: The code is unable to read the 'nativeElement' property due to an undefined value, resulting in a TypeError

Angular Owl Carousel doesn't slide horizontally, it slides vertically

The functionality of Angular 4's ngStyle sum operates as a string instead of a number

Compiling Typescript tasks in Visual Studio Code - ensuring output encoding is set correctly

Retrieving text content from a file using React

Having an issue with my code in angular 12 where I am unable to successfully call an API to retrieve a token, and then pass that token to another API for further processing

Displaying a checkmark button highlighted when the form value is toggled to true

Tips for implementing multiple yield generators in redux-saga

Angular expands the HTML of the parent component

Get the @types definition installed from a forked repository

The Google Maps feature encountered an error (ReferenceError: google is not defined)

What is the procedure to prevent Angular CLI from including a specific typings file in my project configuration?

Is it possible to regulate the type of a class that has not yet been instantiated?

The entire React component is not rendering as expected when calling res.render in PugJS within Express

Is it possible to retrieve the selected DataList object in Angular 10?

Assembly of Components

Utilizing React Testing Library for conducting unit tests on components

Angular directive to delete the last character when a change is made via ngModel