In Functions, Typescript has inherited and overloaded string literal parameters

Question

In Functions, Typescript has inherited and overloaded string literal parameters

Currently, I am working on incorporating typings into a library that heavily utilizes inheritance. The hierarchy typically follows this structure:

BaseWidget --> TextBox --> ValidationTextBox

In the BaseWidget class, there is a JavaScript function called getObj(name), which translates to getObj(name: string): any in TypeScript. This function essentially searches for a method named _get<name> within the current object, executes it, and returns the result.

These 'properties' are exposed in the individual classes and inherited across classes, allowing ValidationTextBox to access all the properties present in TextBox. My question revolves around whether it is possible to add typings similar to my attempt below without having to redefine the overloads in each class.

interface BaseWidget {
    getObj(name: string): any
}

interface TextBox extends BaseWidget {
    getObj(name: "B"): string
}

interface ValidationTextBox extends TextBox {
    getObj(name: "C"): boolean
    // getObj(name: "B"): string; // Adding this line would make it compile, but it's not the best solution.
    // getObj(name: string): any // Adding this also compiles, but it results in losing type information for 'getObj("B")'
}

declare const obj: ValidationTextBox;
console.log(obj.getObj("B")); // Error: Argument of type '"B"' is not assignable to parameter of type '"C"'

TS Playground link

The current issue with this approach is the error message stating

Interface 'ValidationTextBox' incorrectly extends interface 'TextBox'

, due to the fact that "B" cannot be assigned to "C" in the context of getObj(...).

I appreciate any assistance provided!

typescript

Answer 1

Answer №1

There are multiple ways to tackle this issue. One approach is to satisfy the compiler by adding extra overloads without rewriting them using type queries:

interface ValidationTextBox extends TextBox {
    // Add the extra overload with 'C', along with any base class overloads (TextBox['getObj'])
    getObj: ((name: "C") => boolean) & TextBox['getObj'];
}

Another solution involves making the types generic, enabling us to enhance the type of the name parameter without directly overriding the method:

interface BaseWidget<TName = string> {
    getObj(name: TName): any
}


// Utilize TName to expand the getName overload in derived interfaces
interface TextBox<TName = never> extends BaseWidget<TName | "B"> {
}

// Utilize TName to expand the getName overload in derived interfaces
interface ValidationTextBox<TName = never> extends TextBox<TName | "C"> {
}

declare const obj: ValidationTextBox;
console.log(obj.getObj("B"));
console.log(obj.getObj("C"));

Answer 2

There are multiple ways to tackle this issue. One approach is to satisfy the compiler by adding extra overloads without rewriting them using type queries:

interface ValidationTextBox extends TextBox {
    // Add the extra overload with 'C', along with any base class overloads (TextBox['getObj'])
    getObj: ((name: "C") => boolean) & TextBox['getObj'];
}

Another solution involves making the types generic, enabling us to enhance the type of the name parameter without directly overriding the method:

interface BaseWidget<TName = string> {
    getObj(name: TName): any
}


// Utilize TName to expand the getName overload in derived interfaces
interface TextBox<TName = never> extends BaseWidget<TName | "B"> {
}

// Utilize TName to expand the getName overload in derived interfaces
interface ValidationTextBox<TName = never> extends TextBox<TName | "C"> {
}

declare const obj: ValidationTextBox;
console.log(obj.getObj("B"));
console.log(obj.getObj("C"));

Answer 3

Answer №2

After experimenting with different approaches, I stumbled upon a new solution that perfectly aligns with my requirements:

// --- Definition of Properties interface to establish getObj/setObj functionality --- //
interface _Properties<T> {
    getObj<U extends keyof T>(name: U): T[U]
    setObj<U extends keyof T>(name: U, value: T[U]): void;
    setObj<U extends keyof T>(map: { [key in U]: T[key] }): void;
}

// --- Interfaces for data classes used by the TextBox classes --- //
interface SomeValue {
    a: number;
}

interface MoreSomeValue extends SomeValue {
    b: string;
}

// --- Property definitions for the classes --- //
interface TextBoxProps<ValueType = string> {
    value: ValueType; 
    disabled: boolean;
    test: SomeValue; 
}

interface ValidationTextBoxProps extends TextBoxProps<number> {
    min: number;
    max: number;
    test: MoreSomeValue
}

// --- Class interfaces extending properties --- // 
interface TextBox extends _Properties<TextBoxProps> { }

interface ValidationTextBox extends _Properties<ValidationTextBoxProps>, TextBox { }

// --- Constructor function for setting properties --- //
interface ValidationTextBoxConstructor {
    new(props: Partial<ValidationTextBoxProps>): ValidationTextBox;
}
declare const ValidationTextBoxConstructor: ValidationTextBoxConstructor;

// --- Implementation Example --- //
const obj = new ValidationTextBoxConstructor({ min: 0, max: 5, disabled: true });
console.log(obj.getObj("test"));
obj.setObj("min", 5);
obj.setObj({ min: 5, max: 0, disabled: false });

TS Playground link

The core idea behind this solution lies in the _Properties interface. By extending from it with a specified generic type T, users gain access to use getObj(name: string), where the name parameter must be a key within the provided type T and it will return the type of T[name]. Similarly,

setObj(name: string, value: T[U])

allows users to update the value of a specific key in the supplied object. The second version of setObj function also accepts a map of { key => value } pairs, looping through each entry and updating the corresponding key-value pair.

The *Props interfaces serve as containers defining the available properties for the classes, which are then used as types within the _Properties interface. They should inherit from one another if a subclass extending them is also extending _Properties.

This setup also provides a constructor function that optionally sets the property values during instantiation.

An issue arises when a property needs to undergo a drastic change in its type from the base class (e.g., switching from a string to a number in an inherited class). This challenge can be resolved through leveraging generics on the Props interface. Although not the most elegant solution, it handles rare scenarios efficiently for my current requirements.

Answer 4

After experimenting with different approaches, I stumbled upon a new solution that perfectly aligns with my requirements:

// --- Definition of Properties interface to establish getObj/setObj functionality --- //
interface _Properties<T> {
    getObj<U extends keyof T>(name: U): T[U]
    setObj<U extends keyof T>(name: U, value: T[U]): void;
    setObj<U extends keyof T>(map: { [key in U]: T[key] }): void;
}

// --- Interfaces for data classes used by the TextBox classes --- //
interface SomeValue {
    a: number;
}

interface MoreSomeValue extends SomeValue {
    b: string;
}

// --- Property definitions for the classes --- //
interface TextBoxProps<ValueType = string> {
    value: ValueType; 
    disabled: boolean;
    test: SomeValue; 
}

interface ValidationTextBoxProps extends TextBoxProps<number> {
    min: number;
    max: number;
    test: MoreSomeValue
}

// --- Class interfaces extending properties --- // 
interface TextBox extends _Properties<TextBoxProps> { }

interface ValidationTextBox extends _Properties<ValidationTextBoxProps>, TextBox { }

// --- Constructor function for setting properties --- //
interface ValidationTextBoxConstructor {
    new(props: Partial<ValidationTextBoxProps>): ValidationTextBox;
}
declare const ValidationTextBoxConstructor: ValidationTextBoxConstructor;

// --- Implementation Example --- //
const obj = new ValidationTextBoxConstructor({ min: 0, max: 5, disabled: true });
console.log(obj.getObj("test"));
obj.setObj("min", 5);
obj.setObj({ min: 5, max: 0, disabled: false });

TS Playground link

The core idea behind this solution lies in the _Properties interface. By extending from it with a specified generic type T, users gain access to use getObj(name: string), where the name parameter must be a key within the provided type T and it will return the type of T[name]. Similarly,

setObj(name: string, value: T[U])

allows users to update the value of a specific key in the supplied object. The second version of setObj function also accepts a map of { key => value } pairs, looping through each entry and updating the corresponding key-value pair.

The *Props interfaces serve as containers defining the available properties for the classes, which are then used as types within the _Properties interface. They should inherit from one another if a subclass extending them is also extending _Properties.

This setup also provides a constructor function that optionally sets the property values during instantiation.

An issue arises when a property needs to undergo a drastic change in its type from the base class (e.g., switching from a string to a number in an inherited class). This challenge can be resolved through leveraging generics on the Props interface. Although not the most elegant solution, it handles rare scenarios efficiently for my current requirements.

In Functions, Typescript has inherited and overloaded string literal parameters

Answer №1

Answer №2

Similar questions

Is it possible to loop through a subset of a collection using *ngFor?

Utilizing the power of d3.js within Angular 4

What prevents ts-morph from retrieving the classes within a TypeScript project?

Leveraging the spread operator in cases where the value is null

Limit the outcomes of the Ionic timepicker

Implementing Batch File Uploads using Typescript

Angular Unit Test: Issue: Form control is missing a value accessor

Tips for displaying a div element alongside a button within a reactJS table

What's the best way to add animation to the send icon while hovering over the button?

What is the correct way to set the default function parameter as `v => v` in JavaScript?

The call does not match any overloads in Vue when using TypeScript

Tips for Customizing the Width of Your Material UI Alert Bar

A loop in JavaScript/TypeScript that runs precisely once every minute

Trying to access the 'cpf' property of an undefined value is causing an error

Exploring the possibilities of integrating jQuery into Angular 2 using Javascript

I am having trouble locating my source code within the Typescript module

Generate incorrect JSON for a negative test in TypeScript

Is Angular's ngOnChanges failing to detect any changes?

Having trouble getting the Bootstrap 5 Modal to function properly within an Electron app

What could be causing NestJS/TypeORM to remove the attribute passed in during save operation?