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

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

How can you manage state with ContextAPI and Typescript in a React application?

Utilizing getServerSideProps and getInitialProps in Next.js to optimize page loading times

The variable is accessed prior to being assigned with the use of the hasOwnProperty method

Tribal Code Typescript Compiler

What is the best way to execute an Nx executor function using Node.js?

Is there a way to go back to the previous URL in Angular 14?

To continue receiving rxjs updates, kindly subscribe if the specified condition is met

Exploring the concept of data sharing in the latest version of Next.JS - Server

Is it considered poor practice in TypeScript to manually set the type when the type inference is already accurate?

Angular 14 captures typed form data as `<any>` instead of the actual data types

Undefined output in Typescript recursion function

Aurelia TypeScript app experiencing compatibility issues with Safari version 7.1, runs smoothly on versions 8 onwards

Error: The AppModule is missing a provider for the Function in the RouterModule, causing a NullInjectorError

The malfunctioning collapse feature in Bootstrap 4 sidebar within an Angular 6 application

Using a Typescript variable prior to its assignment

Having trouble reading properties of undefined (specifically 'listen') during testing with Jest, Supertest, Express, Typescript

TS: A shared function for objects sharing a consistent structure but with varied potential values for a specific property

I am encountering an issue trying to create a Docker image featuring TypeScript

An issue occurred during the construction of an angular project: The Tuple type '[]' with a length of '0' does not contain any elements at index '0'