Developing a hidden entity that adopts an interface with multiple functions that have been overloaded

Question

Developing a hidden entity that adopts an interface with multiple functions that have been overloaded

My TypeScript interface includes a single function named "send" with two different allowed signatures.

export interface ConnectionContext {
    send(data: ConnectionData): void;
    send(data: ConnectionData, timeout: number): Promise<ConnectionData>;
}

I am attempting to create an unnamed object that adheres to this interface:

const context: ConnectionContext = {
    send: (data: ConnectionData, timeout?: number): void | Promise<ConnectionData> => {
        // 
    }
};

However, I am encountering errors in TypeScript 2.4.1:

Error:(58, 15) TS2322:Type '{ send: (data: ConnectionData, timeout?: number | undefined) => void | Promise<ConnectionData>; }' is not assignable to type 'ConnectionContext'.

Types of property 'send' are incompatible.

Type '(data: ConnectionData, timeout?: number | undefined) => void | Promise<ConnectionData>' is not assignable to type '{ (data: ConnectionData): void; (data: ConnectionData, timeout: number): Promise<ConnectionData>; }'.

Type 'void | Promise<ConnectionData>' is not assignable to type 'Promise<ConnectionData>'.

Type 'void' is not assignable to type 'Promise<ConnectionData>'.

Although I know this can be achieved using a class, I prefer to avoid creating a complete class if possible.

typescript interface anonymous-types overloading

Answer 1

Answer №1

Discovered the solution - when dealing with function overload signatures in TypeScript, indicate the base function as any. While this may seem counterintuitive, it is how TypeScript currently operates.

Revised code:

export interface ConnectionContext {
  send(data: ConnectionData): void;
  send(data: ConnectionData, timeout: number): Promise<ConnectionData>;
}

const context: ConnectionContext = {
  send: (data: ConnectionData, timeout?: number): any => {}
};

let a = context.send(1)     // void
let b = context.send(1, 2)  // Promise<ConnectionData>

TypeScript playground link

Referencing the closing paragraph of the functions section in the TypeScript Handbook:

Take note that the function pickCard(x): any declaration is not included in the overload list, resulting in only two overloads: one for objects and another for numbers. Attempting to call pickCard with any other parameter types will lead to an error.

Answer 2

Discovered the solution - when dealing with function overload signatures in TypeScript, indicate the base function as any. While this may seem counterintuitive, it is how TypeScript currently operates.

Revised code:

export interface ConnectionContext {
  send(data: ConnectionData): void;
  send(data: ConnectionData, timeout: number): Promise<ConnectionData>;
}

const context: ConnectionContext = {
  send: (data: ConnectionData, timeout?: number): any => {}
};

let a = context.send(1)     // void
let b = context.send(1, 2)  // Promise<ConnectionData>

TypeScript playground link

Referencing the closing paragraph of the functions section in the TypeScript Handbook:

Take note that the function pickCard(x): any declaration is not included in the overload list, resulting in only two overloads: one for objects and another for numbers. Attempting to call pickCard with any other parameter types will lead to an error.

Developing a hidden entity that adopts an interface with multiple functions that have been overloaded

Answer №1

Similar questions

Exploring date formatting in NestJs with Javascript

insert information into a fixed-size array using JavaScript

Angular 6: Issues with API Get Method not executing when an integer value is passed with an empty string

Each time the website refreshes, Object.entries() rearranges the orders

The styles from bootstrap.css are not displaying in the browser

Error TS2322: The function expecting a type of 'FormEventHandler<HTMLFormElement>' cannot be assigned the type '(data: TicketFullDTO) => Promise<void>'

Sending a parameter to a route guard

Issue with React hook forms and shadcn/ui element's forwardRef functionality

Retrieving information stored in a FormBuilder through the HTML

Vercel deployment encountered an AxiosError with a status code of 404

Having difficulties incorporating a selected custom repository into a module

"Creating a sleek and efficient AI chess game using chess.js with Angular's

Issue: The keyword in React/React-Native is returning a boolean value instead of the expected element object

Instead of displaying the name, HTML reveals the ID

Buffer Overflow - Security Audit - Node JS TypeScript Microservice Vulnerability Scan Report

Using Node.js to inject dependencies into the app.js file

Steps to show the chosen index value in an alert pop-up using Ionic 2 framework

Retrieving child elements from parent identifiers using Typescript

Prevent clicking outside the bootstrap modal in Angular 4 from closing the modal

Incorporating type declarations for a basic function that returns a wrapper function for other functions