TypeScript: Dynamically declared methods in class

Question

I've some code like:

const methodsList = [
  'foo',
  'bar',
  // ... 20 other items ...
]

export class Relayer {
  constructor() {
    for (const methodName of methodsList) {
      this[methodName] = (...args) => {
        // console.log('relaying call to', methodName, args)
        // this is same for all methods
      }
    }
  }
}

const relayer = new Relayer()

relayer.foo('asd') // TS error
relayer.bar('jkl', 123) // TS error

Now when I use the class instance, TypeScript complains when I call relayer.foo() or relayer.bar(). To make the code compile, I've to cast it as any or similar.

I've an interface that declares foo, bar and the other methods:

interface MyInterface {
  foo: (a: string) => Promise<string>
  bar: (b: string, c: number) => Promise<string>
  // ... 20 other methods
}

How do I get TypeScript to learn the dynamically declared foo and bar class methods? Can the declare syntax be useful here?

Artyer · Accepted Answer · 2020-04-09 23:43:01Z

First step is to create a type or interface where when indexed by a value in methodsList, the result will be a function:

// The cast to const changes the type from `string[]` to
// `['foo', 'bar']` (An array of literal string types)
const methodsList = [
    'foo',
    'bar'
] as const

type HasMethods = { [k in typeof methodsList[number]]: (...args: any[]) => any }

// Or
type MethodNames = typeof methodsList[number]  // "foo" | "bar"
                   // k is either "foo" or "bar", and obj[k] is any function
type HasMethods = { [k in MethodNames]: (...args: any[]) => any }

Then, in the constructor, to be able to assign the keys of methodsList, you can add a type assertion that this is HasMethods:

// General purpose assert function
// If before this, value had type `U`,
// afterwards the type will be `U & T`
declare function assertIs<T>(value: unknown): asserts value is T

class Relayer {
    constructor() {
        assertIs<HasMethods>(this)
        for (const methodName of methodsList) {
            // `methodName` has type `"foo" | "bar"`, since
            // it's the value of an array with literal type,
            // so can index `this` in a type-safe way
            this[methodName] = (...args) => {
                // ...
            }
        }
    }
}

Now after constructing, you have to cast the type still:

const relayer = new Relayer() as Relayer & HasMethods

relayer.foo('asd')
relayer.bar('jkl', 123)

You can also get rid of the casts when constructed using a factory function:

export class Relayer {
    constructor() {
        // As above
    }

    static construct(): Relayer & HasMethods {
        return new Relayer() as Relayer & HasMethods
    }
}

const relayer = Relayer.construct()

Another way around it is to create a new class and type-assert that new results in a HasMethods object:

class _Relayer {
    constructor() {
        assertIs<HasMethods>(this)
        for (const methodName of methodsList) {
            this[methodName] = (...args) => {
                // ...
            }
        }
    }
}

export const Relayer = _Relayer as _Relayer & { new (): _Relayer & HasMethods }

const relayer = new Relayer();

relayer.foo('asd')
relayer.bar('jkl', 123)

Or if you are only using new and then methods in methodsList, you can do:

export const Relayer = class Relayer {
    constructor() {
        assertIs<HasMethods>(this)
        for (const methodName of methodsList) {
            this[methodName] = (...args) => {
                // ...
            }
        }
    }
} as { new (): HasMethods };

You can also use your MyInterface interface instead of HasMethods, skipping the first step. This also gives type-safety in your calls.

Benjamin Collignon · Accepted Answer · 2020-03-31 14:28:11Z

1

Use the following syntax:

export class Relayer { 
  constructor() {}
  public foo(){
    // your foo method
    this.executedOnEachFunction();
  }
  public bar(){
    // your bar method
    this.executedOnEachFunction();
  }
  executedOnEachFunction(){
    // what you want to do everytime
  }
}

https://repl.it/repls/LawfulSurprisedMineral

edited Mar 31, 2020 at 14:28

answered Mar 31, 2020 at 13:55

Benjamin Collignon

1309 bronze badges

4 Comments

Elmo Over a year ago

Thanks for the answer. That does work. But I can't use it because I'll have to define the same function ~20 times with different names.

Benjamin Collignon Over a year ago

You can declare it once in your class and call it on every function of your class.

Benjamin Collignon Over a year ago

@Elmo When you implement an interface you need at least to declare each method, this is the contract. It's like in Java and C#. Take a look at typescriptlang.org/docs/handbook/interfaces.html#class-types

Elmo Over a year ago

I'm declaring each method in the interface but dynamically. It's almost the same thing but with different syntax. If only type script allowed me to override the types arbitrarily...

Andrew Nolan · Accepted Answer · 2020-03-31 14:06:05Z

0

To me, this sounds like a need for an interface.

interface MyInterface {
 foo(): void; // or whatever signature/return type you need
 bar(): void;
  // ... 20 other items ...
}

export class Relayer implements MyInterface {
  constructor() {}

  foo(): void {
    // whatever you want foo to do
  }

  // ... the rest of your interface implementation
}

What it looks like you are doing is implementing some interface of sorts. In your constructor you are defining what the method implementations are instead of defining them in the class body. Might help to read Class Type Interfaces

answered Mar 31, 2020 at 14:06

Andrew Nolan

2,1272 gold badges22 silver badges25 bronze badges

1 Comment

Elmo Over a year ago

I tried implements Interface but TypeScript fails to compile and asks me to define the dynamically declared methods statically.

Collectives™ on Stack Overflow

TypeScript: Dynamically declared methods in class

3 Answers 3

Comments

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related