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

The editor is locked and choices are displayed in a vertical orientation

Difficulties with managing button events in a Vue project

What is the best way to prevent updating the state before the selection of the end date in a date range using react-datepicker?

Transitioning from Webpack to Vite: Resolving Path Alias and Ensuring Proper Imports

Transforming Angular 4's folder structure for improved architecture simplicity

I am puzzled by this error in Typescript: "Why does the element have an 'any' type when the Object type lacks an index signature?"

What could be the rationale behind the optional chaining operator not being fully compatible with a union of classes in TypeScript?

Utilize puppeteer and web-vitals in NextJS to retrieve the web performance metrics of a website

Definition of generic with recursive immutability

Creating a model for a different user involves several steps that can be easily

Guide to encapsulating a container within a map function using a condition in JSX and TypeScript

When using Jest + Enzyme to test a stateful class component, encountering problems with Material-UI's withStyles functionality is a common issue

Images with spaces in their names are failing to load in React Native

Encountering the error "Unable to access the 'user' property of an undefined object when working with Angular and Firebase

Moment.js is stating that there is no property called 'toISOString' on the type '{}'

Evaluating function declaration - comparing interface to type alias

Learn how to efficiently disable or enable a button in Angular depending on the selected radio button

Is it possible to execute user-defined functions dynamically in a Node.js application without having to restart the server

It appears that Typescript mistakenly interprets a class or type as a value, indicating that "'Classname' is being referred to as a value but used as a type here."

When using Styled Components with TypeScript, you may encounter the error message "No overload matches