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

Hiding the header on a specific route in Angular 6

Having difficulty authenticating Slack requests

Arranging a list of objects in Angular 6

Comparing plain objects and class instances for modeling data objects

The 'Event' type is lacking the specified properties when compared to the 'CdkDragDrop<string[], string[]>' type

Module logo.svg not found? Error in Typescript

Guide to accessing a newly opened window from a different domain originating from the current window

Extract keys from a list of interface keys to create a sub-list based on the type of value

Bar chart in Chart.js becomes crowded and illegible on smaller screens due to overlapping bars

Leveraging NPM workspaces in combination with Expo and Typescript

What is the best way to incorporate ControlContainer in an Angular component's unit test?

How do I condense nested keys in TypeScript?

I'm confused by the function: "sort((a: Article, b: Article) => b.votes - a.votes);"

A guide to effectively converting and parsing a class object that includes Uint8Array elements

Combining arrays using Observables in Typescript with RxJS

What causes the error message saying 'undefined' cannot be assigned to the specified type ...?

What is the proper method for utilizing a conditional header in an rtk query?

Authentic property does not reveal its contents

Retrieve all items that match the ids in the array from the database

The Static Interface Binding in TypeScript