Using a generic type that is a subclass of Number will trigger error TS2362 in TypeScript

Question

Using a generic type that is a subclass of Number will trigger error TS2362 in TypeScript

Here is a code snippet that I am working on:

function reverse<T extends Number, D extends Number>(items: T[], m: D): T[] {
    var toreturn = [];
    for (var i = items.length - 1; i >= 0; i--) {
        (()=>{
            toreturn.push(items[i] * m);
        })();
    }
    return toreturn;
}

var sample = [1, 2, 3];
var reversed = reverse(sample, 10);
console.log(reversed);

My development environment has flagged 2 errors in this code:

Error:(5, 27) TS2362: The left-hand side of an arithmetic operation must be of type 'any', 'number' or an enum type.

Error:(5, 38) TS2363: The right-hand side of an arithmetic operation must be of type 'any', 'number' or an enum type.

The issue stems from the fact that the entities being multiplied are not recognized as numbers or other valid types. I attempted to resolve this by specifying extends in the generic definition.

How can this issue be resolved?

You can find the relevant TypeScript Playground version here

generics typescript arrow-functions

Answer 1

Answer №1

It can be a bit bothersome, but due to the constraint on Number with a capital N, you must perform a type assertion to convert to both Number and then number:

(items[i] as Number as number) * (m as Number as number)

If this approach aligns with how the function is used, consider changing the generic constraint to just number instead of Number, making it simpler to assert to number. Perhaps generics aren't necessary at all for your use case? In that scenario, eliminate generics and replace types T and D with number.

The second generic constraint might not be needed since the type of m can simply be the base type without impacting the return type. Optimizing it could look like this:

function reverseAndMultiplyBy<T extends number>(items: T[], m: number): T[] {
    const toReturn = [];
    for (let i = items.length - 1; i >= 0; i--) {
        toReturn.push((items[i] as number) * m);
    }
    return toReturn;
}

Answer 2

It can be a bit bothersome, but due to the constraint on Number with a capital N, you must perform a type assertion to convert to both Number and then number:

(items[i] as Number as number) * (m as Number as number)

If this approach aligns with how the function is used, consider changing the generic constraint to just number instead of Number, making it simpler to assert to number. Perhaps generics aren't necessary at all for your use case? In that scenario, eliminate generics and replace types T and D with number.

The second generic constraint might not be needed since the type of m can simply be the base type without impacting the return type. Optimizing it could look like this:

function reverseAndMultiplyBy<T extends number>(items: T[], m: number): T[] {
    const toReturn = [];
    for (let i = items.length - 1; i >= 0; i--) {
        toReturn.push((items[i] as number) * m);
    }
    return toReturn;
}

Answer 3

Answer №2

By using type assertion, you can inform the compiler that you are certain these values will be numbers.

function invert<T extends number, D extends number>(elements: T[], factor: D): T[] {
    var result = [];
    for (var i = elements.length - 1; i >= 0; i--) {
        (()=>{
            result.push(<number>elements[i] * <number>factor);
        })();
    }
    return result;
}

var numbers = [4, 5, 6];
var invertedNumbers = invert(numbers, 7);
console.log(invertedNumbers);

Answer 4

By using type assertion, you can inform the compiler that you are certain these values will be numbers.

function invert<T extends number, D extends number>(elements: T[], factor: D): T[] {
    var result = [];
    for (var i = elements.length - 1; i >= 0; i--) {
        (()=>{
            result.push(<number>elements[i] * <number>factor);
        })();
    }
    return result;
}

var numbers = [4, 5, 6];
var invertedNumbers = invert(numbers, 7);
console.log(invertedNumbers);

Answer 5

Answer №3

if you utilized casting or assertion, check out the following Type assertions:

http://www.typescriptlang.org/docs/handbook/basic-types.html

information extracted from the provided link (basic-types.html):

Type assertions can be done in two ways. One is using the “angle-bracket” syntax:

let someValue: any = "this is a string";

let strLength: number = (<string>someValue).length;

And another way is through as-syntax:

let someValue: any = "this is a string";

let strLength: number = (someValue as string).length;

function reverse<T extends number, D extends number>(items: T[], m: D): T[] {
    var toreturn = [];

    for (var i = items.length - 1; i >= 0; i--) {
        (()=>{
            toreturn.push(<number>items[i] * <number>m);
        })();
    }
    return toreturn;
}

var sample = [1, 2, 3];
var reversed = reverse(sample, 10);
console.log(reversed);

here

Update:

If using number on extend does not work, consider this solution:

toreturn.push( (<Number>items[i] as number) * (<Number>m as number) );

function reverse(items: T[], m: D): T[] {
    var toreturn = [];

    for (var i = items.length - 1; i >= 0; i--) {
        (()=>{
            toreturn.push( (<Number>items[i] as number) * (<Number>m as number) );
        })();
    }
    return toreturn;
}

var sample = [1, 2, 3];
var reversed = reverse(sample, 10);
console.log(reversed);

here

Answer 6

if you utilized casting or assertion, check out the following Type assertions:

http://www.typescriptlang.org/docs/handbook/basic-types.html

information extracted from the provided link (basic-types.html):

Type assertions can be done in two ways. One is using the “angle-bracket” syntax:

let someValue: any = "this is a string";

let strLength: number = (<string>someValue).length;

And another way is through as-syntax:

let someValue: any = "this is a string";

let strLength: number = (someValue as string).length;

function reverse<T extends number, D extends number>(items: T[], m: D): T[] {
    var toreturn = [];

    for (var i = items.length - 1; i >= 0; i--) {
        (()=>{
            toreturn.push(<number>items[i] * <number>m);
        })();
    }
    return toreturn;
}

var sample = [1, 2, 3];
var reversed = reverse(sample, 10);
console.log(reversed);

here

Update:

If using number on extend does not work, consider this solution:

toreturn.push( (<Number>items[i] as number) * (<Number>m as number) );

function reverse(items: T[], m: D): T[] {
    var toreturn = [];

    for (var i = items.length - 1; i >= 0; i--) {
        (()=>{
            toreturn.push( (<Number>items[i] as number) * (<Number>m as number) );
        })();
    }
    return toreturn;
}

var sample = [1, 2, 3];
var reversed = reverse(sample, 10);
console.log(reversed);

here

Using a generic type that is a subclass of Number will trigger error TS2362 in TypeScript

Answer №1

Answer №2

Answer №3

Update:

Similar questions

Issue with Typescript: The 'remove' property is not found on the 'EventTarget' type

'map' is not defined in the current Typescript scope

Modifying the state of one React component using another

Encountering an issue with top-level await in Angular 17 when utilizing pdfjs-dist module

The resource in CosmosDB cannot be found

Scrolling the mouse wheel on Angular 2 Typescript Highcharts Highmap

Struggling to transmit data to material dialog in Angular2+

Compilation issues in node-modules arise following the Vue package and i18next updates

Using the typescript infer feature does not function properly when dealing with arrays

React together with TypeScript presents a challenge where the scroll event type is not compatible with window.addEventListener

Creating a Typescript enum that implements interfaces can be achieved by first defining the enum

Executing Dynamic SQL Queries in SQL Server

Generating an Object Using HttpClient

Having trouble with the Typescript validator in my Angular IDE Eclipse Plugin - it doesn't seem

Using HttpClient to retrieve data in formats other than JSON

Customize the header text in PrimeNG

Having difficulty generating a new object and implementing the export class feature in Angular 2

Header Express does not contain any cookies, which may vary based on the specific path

Tips for adjusting the width of columns automatically in exceljs

How to retrieve an object of type T from a collection of classes that extend a common base type in Typescript