Guide for exporting and overloading function argument lists with tuples of varying lengths in Typescript

Question

Guide for exporting and overloading function argument lists with tuples of varying lengths in Typescript

Unfortunately, I am facing an issue with Typescript 4.5.4 where the following overload with different tuples of varying lengths does not seem to work for me:

export function f<T1>    (t: [T1])   : any { ... }
export function f<T1,T2> (t: [T1,T2]): any { ... }

When trying to use it in another file, like this:

f(["hello"])
f(["hello", "world"])

I receive the following error message from Typescript:

TS2323: Cannot redeclare exported variable 'f'.

Do you have any suggestions for a workaround without having to introduce multiple function names at the top level?

This question is somewhat similar, but the provided answer no longer seems to be effective (EDIT: it works, I misused) and may not address my specific situation (where Tuple type is involved, possibly affecting the solution).

typescript types tuples

Answer 1

Answer №1

Using overloads may introduce unnecessary overhead, but the linked answer explains that overloads should define multiple type signatures while implementing the function only once.

For a deeper understanding, you can also check out this example in the TS playground

export function f<T1>(t: [T1]): T1
export function f<T1, T2>(t: [T1, T2]): T2
export function f(t: [unknown] | [unknown, unknown]) {
  if (t.length === 2) {
    return t[1]
  }
  return t[0]
}


  f([true]) // function f<boolean>(t: [boolean]): boolean (+1 overload)

  f([1, 'red']) // function f<number, string>(t: [number, string]): string (+1 overload)

  f([1, 'red', 2])
//  ^^^^^^^^^^^^^
//  No overload matches this call.
//    Overload 1 of 2, '(t: [unknown]): unknown', gave the following error.
//      Argument of type '[number, string, number]' is not assignable to parameter of type '[unknown]'.
//        Source has 3 element(s) but target allows only 1.
//      Overload 2 of 2, '(t: [unknown, unknown]): unknown', gave the following error.
//        Argument of type '[number, string, number]' is not assignable to parameter of type '[unknown, unknown]'.
//          Source has 3 element(s) but target allows only 2.

Answer 2

Using overloads may introduce unnecessary overhead, but the linked answer explains that overloads should define multiple type signatures while implementing the function only once.

For a deeper understanding, you can also check out this example in the TS playground

export function f<T1>(t: [T1]): T1
export function f<T1, T2>(t: [T1, T2]): T2
export function f(t: [unknown] | [unknown, unknown]) {
  if (t.length === 2) {
    return t[1]
  }
  return t[0]
}


  f([true]) // function f<boolean>(t: [boolean]): boolean (+1 overload)

  f([1, 'red']) // function f<number, string>(t: [number, string]): string (+1 overload)

  f([1, 'red', 2])
//  ^^^^^^^^^^^^^
//  No overload matches this call.
//    Overload 1 of 2, '(t: [unknown]): unknown', gave the following error.
//      Argument of type '[number, string, number]' is not assignable to parameter of type '[unknown]'.
//        Source has 3 element(s) but target allows only 1.
//      Overload 2 of 2, '(t: [unknown, unknown]): unknown', gave the following error.
//        Argument of type '[number, string, number]' is not assignable to parameter of type '[unknown, unknown]'.
//          Source has 3 element(s) but target allows only 2.

Guide for exporting and overloading function argument lists with tuples of varying lengths in Typescript

Answer №1

Similar questions

The Typescript SyntaxError occurs when attempting to use an import statement outside of a module, typically within a separate file that contains

Declare a new variable with a specific data type in TypeScript

How to Define Intersection Type with Symbol in TypeScript?

Effortlessly adding custom classes in Angular 2 with a breeze

Typescript: Add a new variable preceding a specified string

Utilizing custom types in React with TypeScript and Prop-Types

Discovering the data type from its textual representation

Angular 7 error: Form control with name property does not have a valid value accessor

Steps for incorporating a toggle feature for displaying all or hiding all products on the list

Enhancing Material UI v4 Themes using TypeScript

Leveraging FormControlName in Typescript to Interact with HTML Components in Angular 4

Typescript's async function failing to execute properly

There are no HTTP methods available in the specified file path. Make sure to export a distinct named export for each HTTP method

Pause the execution at specific points within Typescript files by utilizing breakpoints when debugging with an attached debugger in VsCode

Creating variables in Typescript

The PKIJS digital signature does not align with the verification process

What is the best way to create a React text box that exclusively accepts numeric values or remains empty, and automatically displays the number keypad on mobile devices?

What causes TypeScript to narrow the type when a return statement is present, but not when it is absent?

Guide to incorporating @types/module with the corresponding npm module that has type definitions available

Building AngularJS directives using CSS classes