Is there a way to stop typescript from automatically assigning a generic as a literal number value?

Question

Is there a way to stop typescript from automatically assigning a generic as a literal number value?

Trying to develop a class that allows for both hex and rgb color options has presented a challenge. When using hex values, the generic is forced to be a literal number instead of just a number. For example, specifying 0xff00ff results in it being defined as 16711935, which creates an issue when attempting to redefine it.

This limitation leads to a TypeScript error when setting the color to 0xff0000:

Type '16711680' is not assignable to type '16711935'

An example demonstrating this problem can be found on this playground

To address this issue, forcing a cast to the class like so: new MyClass<number>({...}), resolves the problem. However, finding a way to avoid the need for forced literals would be preferable over requiring users to directly cast the type during class instantiation.

typescript types casting type-conversion typeerror

Answer 1

Answer №1

One approach that comes to mind is to save the entire complete MyClassOptions as T, not just the color type.

class MyClass<T extends MyClassOptions<ColorLike>> {
    static readonly DEFAULT_OPTIONS: MyClassOptions<number> = { color: 0x000000 };

    private _realColor!: T["color"];

    constructor(options: T) {
        options = { ...MyClass.DEFAULT_OPTIONS as T, ...options };
    }

    get color(): T["color"] { return this._realColor; }
    set color(value: T["color"]) { this._realColor = value; }
}

const a = new MyClass({ color: [1, 0, 1] });
//    ^? const a: MyClass<{ color: number[]; }>
a.color = [1, 0, 0]

const b = new MyClass({ color: 0xff00ff });
//    ^? const b: MyClass<{ color: number; }>
b.color = 0xff0000

Since the value of color provided is nested within the generic type, TypeScript will not deduce the exact type.

Playground

Answer 2

One approach that comes to mind is to save the entire complete MyClassOptions as T, not just the color type.

class MyClass<T extends MyClassOptions<ColorLike>> {
    static readonly DEFAULT_OPTIONS: MyClassOptions<number> = { color: 0x000000 };

    private _realColor!: T["color"];

    constructor(options: T) {
        options = { ...MyClass.DEFAULT_OPTIONS as T, ...options };
    }

    get color(): T["color"] { return this._realColor; }
    set color(value: T["color"]) { this._realColor = value; }
}

const a = new MyClass({ color: [1, 0, 1] });
//    ^? const a: MyClass<{ color: number[]; }>
a.color = [1, 0, 0]

const b = new MyClass({ color: 0xff00ff });
//    ^? const b: MyClass<{ color: number; }>
b.color = 0xff0000

Since the value of color provided is nested within the generic type, TypeScript will not deduce the exact type.

Playground

Answer 3

Answer №2

The main issue here lies in submitting an object without clearly defining its type within the content, causing it to be "immutable" in nature.

To illustrate, if you explicitly mention the type of the color within the object, it should function properly:

const b = new MyClass({ color: 0xff00ff as number});

Answer 4

The main issue here lies in submitting an object without clearly defining its type within the content, causing it to be "immutable" in nature.

To illustrate, if you explicitly mention the type of the color within the object, it should function properly:

const b = new MyClass({ color: 0xff00ff as number});

Is there a way to stop typescript from automatically assigning a generic as a literal number value?

Answer №1

Answer №2

Similar questions

Using NextJS: Adding a fresh query string value to an existing asPath or modifying the current query string

Jest encounters issues while attempting to execute TypeScript test cases

NgZone is no longer functioning properly

Displaying a div component in React and Typescript upon clicking an element

Issues arise when upgrading from Angular 8 to 9, which can be attributed to IVY

How can I showcase array elements using checkboxes in an Ionic framework?

Enhance your React Typescript High Order Component by incorporating additional properties and implementing them

Angular unable to retrieve data using Angularfire2

Error: The property 'children' is not found in type '{ children?: ReactNode; }'

Sort columns in a MUI datatable

Encountered a React 16 error: Unexpected TypeError stating that this.state.userInput.map is not a valid

What is the best way to move between components within the same parent class using UI router in Angular 6?

Creating an object with mapped properties from enumeration values using Typescript

It is not possible to access the Angular component using routing capabilities

Extracting values from an *ngFor loop in Angular 8 - Here's how to do

passportjs Error: User.authenticate method is undefined

how can a loop be used to continuously call a function that returns a stream?

How can I toggle the visibility of a div after the DOM has finished loading?

I am looking to make changes to a user's profile

What could be causing the malfunction of my button's event handlers?