Changing the method signature in a TypeScript interface to replace/override the original one

Question

Changing the method signature in a TypeScript interface to replace/override the original one

For this specific scenario, the Array<T> interface is being extended in the following manner:

interface BetterArray<T> extends Array<T> {
    push(this: BetterArray<T>, value: T): this;
}

Important note - the implementation of Array<T>.push looks like this

interface Array<T> {
    push(...items: T[]): number;
}

Despite this, a compile-time error occurs:

The interface 'BetterArray' extends 'T[]' incorrectly.
The properties of 'push' are not compatible. The type '(this: BetterArray, value: T) => this' cannot be assigned to the type '(...items: T[]) => number'. The type 'this' cannot be assigned to 'number'. The type 'BetterArray' cannot be assigned to 'number'.

Is there a way to specifically instruct TypeScript to override push in my interface (similar to member hiding in C#)?

Note - TypeScript 2.0 is being used

Upon further investigation, it seems that this issue is solely related to return type - essentially, I wish to enforce a new return type through my interface...

interface A {
    fn(): number;
}

interface B extends A {
    fn(): this;
}

The interface 'B' extends 'A' incorrectly. The properties of 'fn' are not compatible. The type '() => this' cannot be assigned to '() => number'. The type 'this' cannot be assigned to 'number'. The type 'B' cannot be assigned to 'number'.

typescript

Answer 1

Answer №1

To incorporate the original signature of Array.push, simply do the following:

interface EnhancedArray<T> extends Array<T> {
    push(...items: T[]): number;
    push(this: EnhancedArray<T>, value: T): this;
}

However, a roadblock arises when attempting to return this if this is a BetterArray. For example:

class ImprovedArrayClass<T> extends Array<T> {
    push(...items: T[]): number;
    push(this: ImprovedArrayClass<T>, value: T): this;
    push(this: ImprovedArrayClass<T>, ...items: T[]): number | this {
        return this;
    }
}

This leads to errors such as:

Type 'ImprovedArrayClass' is not assignable to type 'number | this'.
Type 'ImprovedArrayClass' is not assignable to type 'this'.
this: ImprovedArrayClass

The issue stems from the following simpler example:

class X {
    action(this: X, num: number): this {
        return this; // Error: Type 'X' is not assignable to type 'this'. this: X
    }
}

class Y extends X {
    action(num: number): this {
        if (num < 0) {
            return super.action(num);
        }
        return this;
    }
}

When super.action is invoked within Y.action, the this refers to Y, not X. The desired behavior is to return an instance of Y, contrary to what X.action specifies.

Answer 2

To incorporate the original signature of Array.push, simply do the following:

interface EnhancedArray<T> extends Array<T> {
    push(...items: T[]): number;
    push(this: EnhancedArray<T>, value: T): this;
}

However, a roadblock arises when attempting to return this if this is a BetterArray. For example:

class ImprovedArrayClass<T> extends Array<T> {
    push(...items: T[]): number;
    push(this: ImprovedArrayClass<T>, value: T): this;
    push(this: ImprovedArrayClass<T>, ...items: T[]): number | this {
        return this;
    }
}

This leads to errors such as:

Type 'ImprovedArrayClass' is not assignable to type 'number | this'.
Type 'ImprovedArrayClass' is not assignable to type 'this'.
this: ImprovedArrayClass

The issue stems from the following simpler example:

class X {
    action(this: X, num: number): this {
        return this; // Error: Type 'X' is not assignable to type 'this'. this: X
    }
}

class Y extends X {
    action(num: number): this {
        if (num < 0) {
            return super.action(num);
        }
        return this;
    }
}

When super.action is invoked within Y.action, the this refers to Y, not X. The desired behavior is to return an instance of Y, contrary to what X.action specifies.

Answer 3

Answer №2

According to Nitzan Tomer's | response

All you have to do is include the original signature of Array.push:

interface BetterArray<T> extends Array<T> {
    push(...items: T[]): number;
    push(this: BetterArray<T>, value: T): this;
}

It appears that using the never type resolves this. Intellisense recognizes that never, "never" is returned, so it doesn't display the method signature (pretty cool)

interface BetterArray<T> extends Array<T> {
    push(...items: T[]): never;
    push(this: BetterArray<T>, value: T): this;
}

Answer 4

According to Nitzan Tomer's | response

All you have to do is include the original signature of Array.push:

interface BetterArray<T> extends Array<T> {
    push(...items: T[]): number;
    push(this: BetterArray<T>, value: T): this;
}

It appears that using the never type resolves this. Intellisense recognizes that never, "never" is returned, so it doesn't display the method signature (pretty cool)

interface BetterArray<T> extends Array<T> {
    push(...items: T[]): never;
    push(this: BetterArray<T>, value: T): this;
}

Changing the method signature in a TypeScript interface to replace/override the original one

Answer №1

Answer №2

Similar questions

Is there a missing .fillGeometry in the Figma plugin VectorNode?

What is the correct way to access $auth in Nuxt with TypeScript?

I'm struggling to find the right Typescript syntax for defining a thunk function that returns a value while using React Redux Toolkit

Using Firebase orderByChild to access a nested object in the database

Tips for preventing duplicate imports in Sass with the @use rule in Webpack

"String representation" compared to the method toString()

When the React Native Expo app is running, the TextInput form is covered by the keyboard

Is there a way to apply a decorator to a function that has been returned?

typescript code: transforming object values into keys in typescript

Error in Typescript: The identifier 'Proxy' is unknown

The json.stringify method is inserting additional backslashes into the response sent by res.send()

Querying the api for data using Angular when paginating the table

How to Retrieve Inputs from Child Component Form without Prop Passing?

Angular 2 - The creation of cyclic dependencies is not allowed

Why does my export function get executed every time the TextInput changes?

Getting a "module not found" error in Next.js while trying to import a TypeScript

Tips for validating duplicate entries in dynamically added form fields

How can I transfer data between methods within Angular?

When using Typescript with MUI styled components, there may be issues with recognizing common objects for styles

A function that logs a message to the console if an array contains identical values