Giving the function parameter dynamic type depending on the first parameter

Question

Giving the function parameter dynamic type depending on the first parameter

Currently, I have a basic function that my client uses to communicate with my server. In order to maintain flexibility, I have implemented the following:

public call(method: string, ...parameters: any[]) {}

On the server side, I organize all methods together like this:

MethodManager.methods({
    findOne: {
        function: function(collection: string, query: Object) {
            return model(collection).findOne(query).exec();
        }
    },
    find: {
        function: function(collection: string, query: Object, sortQuery: Object = {}) {
            return model(collection).find(query).sort(sortQuery).exec();
        }
    }
}

Each method has different parameters. Unfortunately, using 'any' as parameter type limits the use of Typescript in the client-side code.

Is there a way to configure Visual Studio Code to provide suggestions based on the specific method being called? For example, when typing:

this.socketManager.call('findOne',

I would like it to suggest the following:

(method: 'findOne', collection: string, query: Object)

And for:

this.socketManager.call('find',

The suggestion should be:

(method: 'find', collection: string, query: Object, sortQuery: Object = {})

Instead of the generic:

(method: string, ...parameters: any[])

This enhancement would greatly improve the development process.

function typescript visual-studio-code

Answer 1

Answer №1

Dealing with a similar scenario, I encountered the need to trigger an event upon user login and logout. In my case, I aimed to create a function called sendEvent which required the userId payload object as mandatory if the login type was 'LOG_IN'. Conversely, this payload could be optional for 'LOG_OUT' events.

export type Event = { type: 'LOG_IN'; payload: { userId: string } } | { type: 'LOG_OUT' };

const sendEvent = <Type extends Event['type']>(
  ...args: Extract<Event, { type: Type }> extends { payload: infer TPayload } ? [type: Type,payload: TPayload] : [Type]
) => {
  // Send event stuff

};

sendEvent('LOG_IN', {userId: 'id1'})
sendEvent('LOG_OUT');

Answer 2

Dealing with a similar scenario, I encountered the need to trigger an event upon user login and logout. In my case, I aimed to create a function called sendEvent which required the userId payload object as mandatory if the login type was 'LOG_IN'. Conversely, this payload could be optional for 'LOG_OUT' events.

export type Event = { type: 'LOG_IN'; payload: { userId: string } } | { type: 'LOG_OUT' };

const sendEvent = <Type extends Event['type']>(
  ...args: Extract<Event, { type: Type }> extends { payload: infer TPayload } ? [type: Type,payload: TPayload] : [Type]
) => {
  // Send event stuff

};

sendEvent('LOG_IN', {userId: 'id1'})
sendEvent('LOG_OUT');

Answer 3

Answer №2

To implement function overloads in Typescript, you can structure your code like this: https://www.typescriptlang.org/docs/handbook/functions.html

For a more practical example, check out an illustrative instance:

function call(method: "find", collection: string, query: object): object;
function call(method: "findOne", collection: string, query: object, sortQuery: object): object[];
function call(method: "find" | "findOne", ...parameters: any[]): any {
    switch (method) {
        case "find": {
            const [collection, query] = parameters
            return {}
        }
        case "findOne": {
            const [collection, query, sortQuery] = parameters
            return [{}]
        }

    }
}

call("find", "collection", {})
call("findOne", "collection", {}, {})

call("find", "collection", {}, {}) // Error
call("findOne", "collection", {}) // Error

Answer 4

To implement function overloads in Typescript, you can structure your code like this: https://www.typescriptlang.org/docs/handbook/functions.html

For a more practical example, check out an illustrative instance:

function call(method: "find", collection: string, query: object): object;
function call(method: "findOne", collection: string, query: object, sortQuery: object): object[];
function call(method: "find" | "findOne", ...parameters: any[]): any {
    switch (method) {
        case "find": {
            const [collection, query] = parameters
            return {}
        }
        case "findOne": {
            const [collection, query, sortQuery] = parameters
            return [{}]
        }

    }
}

call("find", "collection", {})
call("findOne", "collection", {}, {})

call("find", "collection", {}, {}) // Error
call("findOne", "collection", {}) // Error

Answer 5

Answer №3

Through the use of a customized script, I successfully implemented a method to inspect all method files, extract functions and parameters, and regenerate a methods.ts file on the client side upon server code compilation. This script is designed to detect changes in the server code and update the client accordingly.

export function SERVER_METHODS(socketManager) {
    return {
        findOne: (collection: string, query: Object, cb?: Function)  => {
            socketManager.call('findOne', collection, query, cb);
        },
        find: (collection: string, query: Object, sortQuery: Object = {}, cb?: Function)  => {
            socketManager.call('find', collection, query, sortQuery, cb);
        },
        ...
    };
}

Subsequently, I leverage this approach by referencing it as follows:

public methods = SERVER_METHODS(this);

This enables me to streamline my code from conventional calls like:

this.socketManager.call('findOne', ...)

to more structured calls such as:

this.socketManager.methods.findOne(

With this setup, I am able to easily extract the required parameters for each function, despite the manual nature of the solution initially, the process has now been automated and proves effective.

Answer 6

Through the use of a customized script, I successfully implemented a method to inspect all method files, extract functions and parameters, and regenerate a methods.ts file on the client side upon server code compilation. This script is designed to detect changes in the server code and update the client accordingly.

export function SERVER_METHODS(socketManager) {
    return {
        findOne: (collection: string, query: Object, cb?: Function)  => {
            socketManager.call('findOne', collection, query, cb);
        },
        find: (collection: string, query: Object, sortQuery: Object = {}, cb?: Function)  => {
            socketManager.call('find', collection, query, sortQuery, cb);
        },
        ...
    };
}

Subsequently, I leverage this approach by referencing it as follows:

public methods = SERVER_METHODS(this);

This enables me to streamline my code from conventional calls like:

this.socketManager.call('findOne', ...)

to more structured calls such as:

this.socketManager.methods.findOne(

With this setup, I am able to easily extract the required parameters for each function, despite the manual nature of the solution initially, the process has now been automated and proves effective.

Giving the function parameter dynamic type depending on the first parameter

Answer №1

Answer №2

Answer №3

Similar questions

What are some effective ways to create a flexible framework in Typescript for Node.js applications utilizing the native MongoDB driver?

Establishing a default value as undefined for a numeric data type in Typescript

How to use Angular template syntax to assign an async array to multiple variables

Understanding the basics of reading a JSON object in TypeScript

Retrieve the specific object's methods based on a specified return type criteria

The Jest test is experiencing a failure as a result of an imported service from a .ts file

Trigger an Angular2 component function from an HTML element by simply clicking a button

Discover the most effective method for identifying duplicate items within an array

Exploring the world of typed props in Vue.js 3 using TypeScript

Can a generic type be utilized to instantiate an object?

Encountering a TypeScript issue with bracket notation in template literals

Is Typescript compatible with the AWS Amplify Express API?

Converting the information retrieved from Firebase into a different format

Generating a collection of objects using arrays of deeply nested objects

What is the best way to incorporate a string value from an external file into a variable in TypeScript without compromising the integrity of special characters?

Utilizing ternary operators in Angular 6 tables

Specify the dependencies in the package.json file to ensure that the React package designed for React v17 is compatible with React v18 as well

In TypeScript, is it possible to indicate that a function will explicitly define a variable?

The package import path varies between dynamic code generation and static code generation

Issue with Stenciljs custom event not triggering using @Listen decorator