Provide the remaining arguments in a specific callback function in TypeScript while abiding by strict mode regulations

Question

Provide the remaining arguments in a specific callback function in TypeScript while abiding by strict mode regulations

In my code, I have a function A that accepts another function as an argument. Within function A, I aim to run the given function with one specific parameter and the remaining parameters from the given function. Here's an example:

function t(g: number, p: any, b: any): void {
    console.log(g)
    console.log(p)
    console.log(b)
}

function execute(fn: (t: number, ...args: any[]) => void) {

    // However, I encountered an issue with this approach... I'm receiving the following error --- 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them 
    const ar = fn.arguments.slice(1)
    fn(3, ...ar)
}

execute(t)

Is there a way to effectively capture args and execute it with fn in strict mode?

javascript typescript

Answer 1

Answer №1

Using strict mode, it doesn't make sense to utilize fn.arguments in this scenario since fn is not receiving any arguments. A better approach would be to introduce an args parameter to the execute function and then pass them to fn.

function test(num: number, param1: any, param2: any): void {
    console.log(num);
    console.log(param1);
    console.log(param2);
}

function execute<TRestArgs extends any[]>(func: (num: number, ...args: TRestArgs) => void, ...args: TRestArgs) {
    func(3, ...args);
}

execute(test, "param1", "param2");

To ensure type safety, I've introduced the TRestArgs type parameter. Now, calling

execute(test, "param1", "param2", "param3")

will result in an error because test only accepts three parameters.

Answer 2

Using strict mode, it doesn't make sense to utilize fn.arguments in this scenario since fn is not receiving any arguments. A better approach would be to introduce an args parameter to the execute function and then pass them to fn.

function test(num: number, param1: any, param2: any): void {
    console.log(num);
    console.log(param1);
    console.log(param2);
}

function execute<TRestArgs extends any[]>(func: (num: number, ...args: TRestArgs) => void, ...args: TRestArgs) {
    func(3, ...args);
}

execute(test, "param1", "param2");

To ensure type safety, I've introduced the TRestArgs type parameter. Now, calling

execute(test, "param1", "param2", "param3")

will result in an error because test only accepts three parameters.

Provide the remaining arguments in a specific callback function in TypeScript while abiding by strict mode regulations

Answer №1

Similar questions

Error message: An uncaught promise was encountered, despite adding a catch function. I am unable to identify the issue causing this error

When accessing an Angular 7 page directly through the URL in the browser, it becomes unresponsive. However, the page works perfectly fine when navigating

Performance issues may arise in React styled-components when the state changes frequently during mousemove events

Error 404: "Headers already sent to the client cannot be modified"

RSS feed showing null xml data with jQuery

Explore vue3 components using vue-test-library and universal components

When the component mounts in React using firestore and Redux, the onClick event is triggered instantly

When attempting to display an identical image on two distinct canvas elements in Angular 6

Generate a dynamic JSON object using JavaScript and then deliver it back

Making the Select Tag function as an on-click event in JQuery

Effective techniques for unit testing in Vue.js

``There appears to be an issue with the functionality of the jQuery

Steps to generating a dynamic fabric canvas upon opening a new window

Tips for grouping radio buttons that span multiple rows within an ag-grid

Sending a JWT token to a middleware with a GET request in Express Node.js - the proper way

When the user clicks, show a designated search result in a separate container

The automated Login Pop Up button appears on its own and does not immediately redirect to the login form

What is the best way to trigger a refresh in Next.js React component?

Using props in React can be declared either as a `type` or an `interface`

the angular variable scope has not been defined