Utilizing default signatures for function overloading

Question

Utilizing default signatures for function overloading

In my code, there is a function called myFunction that takes in two parameters:

key which can be either "mode", "foo", or "bar"
value of type any. However, if the key is "mode", then the value must be of type Mode

I attempted to implement function overloading for this, but unfortunately, it did not work as intended. My goal was to have one signature specifically for when key is equal to "mode", and another "catch-all" signature for all other cases.

export const KEYS = Object.freeze({   
  mode: "mode",
  foo: "foo",
  bar: "bar",
});
export type Key = (typeof KEYS)[keyof typeof KEYS];

export const MODES = Object.freeze({
  TABLE: "table",
  CARDS: "cards",
});
export type Mode = (typeof MODES)[keyof typeof MODES];

function myFunction(
  key: "mode",
  value: Mode
): void;
function myFunction(key: Key, value: any): void {
    console.log(key, value)
}

myFunction("mode", "cards"); // OK
myFunction("foo", 123); // Argument of type '"foo"' is not assignable to parameter of type '"mode"'.
myFunction("bar", "test"); // Argument of type '"bar"' is not assignable to parameter of type '"mode"'.

Playground

Why isn't my implementation working as expected? Should I provide more explicit signatures for each case?

typescript

Answer 1

Answer №1

After some clarification from @jcalz, I now understand that I had mixed up overload signatures with the implementation signature. For more information, you can check the documentation.

To resolve this confusion, I defined the desired "fallback" signature separately from the implementation signature. You can test it out in the Playground

export const KEYS = Object.freeze({
  mode: "mode",
  foo: "foo",
  bar: "bar",
});
export type Key = (typeof KEYS)[keyof typeof KEYS];

export const MODES = Object.freeze({
  TABLE: "table",
  CARDS: "cards",
});
export type Mode = (typeof MODES)[keyof typeof MODES];

// call signatures
function myFunction(key: "mode", value: Mode): void;
function myFunction(key: Exclude<Key, "mode">, value: any): void; // Note Exclude<>

// impl
function myFunction(key: Key, value: any): void {
  console.log(key, value)
}

myFunction("mode", "cards"); // OK
myFunction("mode", "should fail"); // 👍 No overload matches this call.
myFunction("foo", 123); // OK
myFunction("bar", "test"); // OK

Note

Exclude<Key, "mode">

. Without it

myFunction("mode", "should fail")

will not throw an error.

Answer 2

After some clarification from @jcalz, I now understand that I had mixed up overload signatures with the implementation signature. For more information, you can check the documentation.

To resolve this confusion, I defined the desired "fallback" signature separately from the implementation signature. You can test it out in the Playground

export const KEYS = Object.freeze({
  mode: "mode",
  foo: "foo",
  bar: "bar",
});
export type Key = (typeof KEYS)[keyof typeof KEYS];

export const MODES = Object.freeze({
  TABLE: "table",
  CARDS: "cards",
});
export type Mode = (typeof MODES)[keyof typeof MODES];

// call signatures
function myFunction(key: "mode", value: Mode): void;
function myFunction(key: Exclude<Key, "mode">, value: any): void; // Note Exclude<>

// impl
function myFunction(key: Key, value: any): void {
  console.log(key, value)
}

myFunction("mode", "cards"); // OK
myFunction("mode", "should fail"); // 👍 No overload matches this call.
myFunction("foo", 123); // OK
myFunction("bar", "test"); // OK

Note

Exclude<Key, "mode">

. Without it

myFunction("mode", "should fail")

will not throw an error.

Utilizing default signatures for function overloading

Answer №1

Similar questions

When the boolean in RxJS skipWhile remains true

Derived a key from an enum member to be used as an interface key

How can I retrieve List<T> from a Razor Page using TypeScript?

Bring in Event Types from React using TypeScript

What is the process for connecting custom transformers to a compiler host?

Enhancing the getDate function in JavaScript with additional days

What is the specific category of Mongoose.startSession in the realm of Typescript?

Implementing a video pause event trigger from a function in Angular2

Tips for selecting specific regions on an Angular SVG map

Exploring the concept of rest arrays within a destructured object

Automatically closing the AppDateTimePicker modal in Vuexy theme after selecting a date

The Azure GraphQL serverless function encountering an issue with the Cosmos DB connection, displaying an

Locate a specific element within a multi-dimensional array based on a partial match of one of its properties with a provided text

What's wrong with the current longitude and latitude bounding box algorithm used for geolocation searches?

The upload cannot be completed as the file upload is not in a multipart request format

typescript locate within the union type in the mapping expression

Getting News API and showcasing the information in Vuetify.js card components: A step-by-step guide

The Gulp task is stuck in an endless cycle

When merging interfaces and classes, Typescript does not verify property initialization

Issue encountered with Typescript and Request-Promise: Attempting to call a type that does not have a call signature available