Steps to create an instance method that only accepts the name of another instance method

Question

Steps to create an instance method that only accepts the name of another instance method

I am looking to enhance an object by adding a method that specifically accepts the name of another method within the object. How can I achieve this in a way that dynamically narrows down the accepted names of methods, without hardcoding them?

Let's take the command method in the User class as an example. We want the command method to only accept the name of another method within the User class. How can we use keyof this to narrow down the acceptable types to only method names, excluding properties?

class User {
    nameFirst: string;
    nameLast: string;

    command(commandName: keyof this) {
        this[commandName].call(this);
    }

    sink() {}

    swim() {}
}

const alice = new User();
alice.command(`swim`); // Currently accepts `nameFirst` | `nameLast` | `command` | `sink` | `swim`, but we want it to accept only `sink` and `swim`

javascript typescript

Answer 1

Answer №1

If you want to limit the acceptable types of the command function to only User method names without hardcoding them, you can achieve this by combining conditional and mapped types.

type FunctionPropertyNames<T> = {
  [K in keyof T]: T[K] extends (...args: any[]) => any ? K : never;
}[keyof T];

class User {
  nameFirst: string;
  nameLast: string;

  command(commandName: FunctionPropertyNames<User>) {
    this[commandName].call(this);
  }

  sink() {
    console.log('Sink');
  }

  swim() {
    console.log('Swim');
  }
}

const alice = new User();
alice.command('swim'); // Now, only 'sink' and 'swim' can be passed as arguments

Answer 2

If you want to limit the acceptable types of the command function to only User method names without hardcoding them, you can achieve this by combining conditional and mapped types.

type FunctionPropertyNames<T> = {
  [K in keyof T]: T[K] extends (...args: any[]) => any ? K : never;
}[keyof T];

class User {
  nameFirst: string;
  nameLast: string;

  command(commandName: FunctionPropertyNames<User>) {
    this[commandName].call(this);
  }

  sink() {
    console.log('Sink');
  }

  swim() {
    console.log('Swim');
  }
}

const alice = new User();
alice.command('swim'); // Now, only 'sink' and 'swim' can be passed as arguments

Answer 3

Answer №2

While TypeScript does not come with a predefined KeysMatching<T, V> type operator to extract keys of a type T whose values match another type V, there is a workaround that can be implemented to achieve this functionality for specific scenarios. Here is an example of how you can create your own KeysMatching<T, V> type:

type KeysMatching<T, V> = 
  { [K in keyof T]: T[K] extends V ? K : never }[keyof T];

Using this, you can define commandName as

KeysMatching<User, ()=>void>

to restrict it to zero-argument methods. However, be cautious of circularity warnings due to interdependency between types. To avoid this, omit "command" from the allowed keys using the Omit utility type:

class User {
  nameFirst: string = "";
  nameLast: string = "";

  command(commandName: KeysMatching<Omit<User, "command">, () => void>) {
    this[commandName].call(this);
  }

  sink() { }

  swim() { }

  needsParam(x: string) { console.log(x.toUpperCase()) }
}

const alice = new User();
alice.command("swim")
alice.command("sink");
alice.command("nameFirst"); // error, not accepted
alice.command("needsParam"); // error, not accepted

Visit the Playground link to test the code.

Answer 4

While TypeScript does not come with a predefined KeysMatching<T, V> type operator to extract keys of a type T whose values match another type V, there is a workaround that can be implemented to achieve this functionality for specific scenarios. Here is an example of how you can create your own KeysMatching<T, V> type:

type KeysMatching<T, V> = 
  { [K in keyof T]: T[K] extends V ? K : never }[keyof T];

Using this, you can define commandName as

KeysMatching<User, ()=>void>

to restrict it to zero-argument methods. However, be cautious of circularity warnings due to interdependency between types. To avoid this, omit "command" from the allowed keys using the Omit utility type:

class User {
  nameFirst: string = "";
  nameLast: string = "";

  command(commandName: KeysMatching<Omit<User, "command">, () => void>) {
    this[commandName].call(this);
  }

  sink() { }

  swim() { }

  needsParam(x: string) { console.log(x.toUpperCase()) }
}

const alice = new User();
alice.command("swim")
alice.command("sink");
alice.command("nameFirst"); // error, not accepted
alice.command("needsParam"); // error, not accepted

Visit the Playground link to test the code.

Answer 5

Answer №3

Are you looking for a solution to a specific problem? Maybe you could consider using this approach:

class Person {
    firstName: string;
    lastName: string;

    execute(action: keyof this) {
      if (typeof this[action] === 'function') {
            this[action].call(this);
      } 
      else {
        return
      }
    }

    eat() {}

    sleep() {}
}

const john = new Person();
john.execute(`eat`);

Answer 6

Are you looking for a solution to a specific problem? Maybe you could consider using this approach:

class Person {
    firstName: string;
    lastName: string;

    execute(action: keyof this) {
      if (typeof this[action] === 'function') {
            this[action].call(this);
      } 
      else {
        return
      }
    }

    eat() {}

    sleep() {}
}

const john = new Person();
john.execute(`eat`);

Steps to create an instance method that only accepts the name of another instance method

Answer №1

Answer №2

Answer №3

Similar questions

Tips for setting a default value in a Multi Select component with reactjs and Material UI

What is the process for adding an item to an object?

I am puzzled as to why my ajax script is giving me a 404 error even though the URL appears to be correct

"Exploring the symbiotic relationship between Node.js and Express.js: an

Initiate the input change event manually

Are multiple .then(..) clauses in Javascript promises better than just using one .then(..) clause?

Whenever the user hits the "Enter" key, a new element will be generated and added to the bottom of an existing element

Avoid triggering a second event: click versus changing the URL hash

What occurs when an npm module is removed from the repository?

If I type too quickly in the input field, it ends up displaying the incorrect div

How to implement a self-invoking function in React JS like you would in regular JavaScript?

Attempting to access a variable without wrapping it in a setTimeout function will

Deselect the DOM element

Issue with AjaxComplete function failing to work

ways to retrieve script template variable in angularjs application

Perform a function on Angular 5

Is there a way to implement hover behavior for a Material-UI Button within a ButtonGroup component?

In order to emphasize the chosen list item following a component refresh

Having trouble populating the container with page content using AJAX, PHP, and JS?

Running complex operations within a sorting function just once