Function overloading proving to be ineffective in dealing with this issue

Question

Function overloading proving to be ineffective in dealing with this issue

Consider the code snippet below:

interface ToArraySignature {
  (nodeList: NodeList): Array<Node>
  (collection: HTMLCollection): Array<Element>
}

const toArray: ToArraySignature = <ToArraySignature>(arrayLike: any) => {
  return [].slice.call(arrayLike)
}


toArray(document.body.children).forEach(element => {
  console.log(element.scrollTop)
})

The issue here is that toArray always infers the first signature in the interface, causing a compilation error when attempting to access element.scrollTop as it only exists on the Element type.

To address this, considering an argument of NodeList | HTMLCollection would compromise the strict relation between input and output.

One solution might be that forcing the signature was not the correct approach. However, how can overloaded functions be implemented without doing so?

Note: This scenario is based on typescript 1.8.10

typescript

Answer 1

Answer №1

It's interesting that it always defaults to using the first signature in this scenario, but all that complexity is unnecessary.

Instead of all that, why not simplify it like this:

function convertToArray<T>(arrayLike: ArrayLike<T>): T[] {
    return [].slice.call(arrayLike);
}

convertToArray(document.body.children).forEach(element => {
    console.log(element.scrollTop)
});

convertToArray(document.getElementById("some_id").childNodes).forEach(node => {
    console.log(node.nodeName);
});

(Try out the code here.)

Answer 2

It's interesting that it always defaults to using the first signature in this scenario, but all that complexity is unnecessary.

Instead of all that, why not simplify it like this:

function convertToArray<T>(arrayLike: ArrayLike<T>): T[] {
    return [].slice.call(arrayLike);
}

convertToArray(document.body.children).forEach(element => {
    console.log(element.scrollTop)
});

convertToArray(document.getElementById("some_id").childNodes).forEach(node => {
    console.log(node.nodeName);
});

(Try out the code here.)

Function overloading proving to be ineffective in dealing with this issue

Answer №1

Similar questions

Sequelize is not giving the expected model even after utilizing `include: [{ model: this.buildModel, required: true }]`

Error message stating: "The 'MktoForms2' property is not recognized within the scope of 'Window & typeof globalThis'."

Using Dropbox for seamless navigation

Observing fluctuations in variable values within Angular2

The type of Object.values() is not determined by a union or Records

Leveraging ZOD's discriminatedUnion() method to differentiate among three different forms

Passing a custom data type from a parent component to a child component in React

The element is implicitly assigned to an 'any' type due to the inability to use a 'string' type expression to index the 'Breakpoints' type

Managing plain text and server responses in Angular 2: What you need to know

Unlocking the Power of Passing Props to {children} in React Components

Error message: Typescript class unable to access methods because of undefined properties (TypeError: Cannot read properties of undefined (reading 'method_name'))

Exploring the concept of kleisli composition in TypeScript by combining Promise monad with functional programming techniques using fp-ts

Angular version 8.2 combined with Firebase can result in errors such as those found in the `./src/app/app.module.ngfactory.js` file towards the end of the process when attempting to build with

Displaying a list of items in a dropdown menu that includes both the item's ID and name using angular

Tips for sorting through the properties of the Record<K, T>:

The contents table remains fixed in the top right corner as you scroll

Issue: Unable to load the file named 'script.ts' while employing chrome.scripting.executeScript

Ways to Halt observable.timer in Angular 2

`Upkeeping service variable upon route alteration in Angular 2`

Exploring Angular's Subcomponents