The extended class possesses a distinct type from the base class, which is reinforced by an interface

Question

The extended class possesses a distinct type from the base class, which is reinforced by an interface

Is it possible to write a method that is an extension of a base class, but with a different return type, if supported by the shared interface, without adding a type declaration in class 'a'?

In practical terms, classes a & b exist in JavaScript files and are failing lint-ts-typing checks.

TypeScript definition file

interface x {
    abc(): string | number;
}

JavaScript file


class a implements x {
    abc() {
        return 234;
    }
}

class b extends a implements x {
    abc() {
        return '123';
    }
}

throws the following:

Property 'abc' in type 'b' is not assignable to the same property in base type 'a'. Type '() => string' is not assignable to type '() => number'. Type 'string' is not assignable to type 'number'.

playground link

javascript typescript

Answer 1

Answer №1

TS doesn't require strict adherence to the interface definition
You can implement it like this:

class a implements x {
    abc(): number {
        return 234;
    }
}

If you need to maintain the number | string type, you must specify it explicitly:

class a implements x {
    abc(): number | string {
        return 234;
    }
}

Answer 2

TS doesn't require strict adherence to the interface definition
You can implement it like this:

class a implements x {
    abc(): number {
        return 234;
    }
}

If you need to maintain the number | string type, you must specify it explicitly:

class a implements x {
    abc(): number | string {
        return 234;
    }
}

Answer 3

Answer №2

When defining a class a, it is important to specify the return type of the method abc(). If no return type is specified, it will default to assuming that it only returns a number value. To fix this issue, you can use the following code:

interface x {
    abc(): string | number;
}

class a implements x {
    abc(): string | number {
        return 234;
    }
}

class b extends a implements x {
    abc() {
        return '123';
    }
}

Answer 4

When defining a class a, it is important to specify the return type of the method abc(). If no return type is specified, it will default to assuming that it only returns a number value. To fix this issue, you can use the following code:

interface x {
    abc(): string | number;
}

class a implements x {
    abc(): string | number {
        return 234;
    }
}

class b extends a implements x {
    abc() {
        return '123';
    }
}

The extended class possesses a distinct type from the base class, which is reinforced by an interface

Answer №1

Answer №2

Similar questions

Interactive Bootstrap 4 button embedded within a sleek card component, complete with a dynamic click event

A technique for simultaneously replacing two values in a single call to the replace function

"Notification: The marker element has been eliminated" encountered while attempting to restore text ranges using Rangy within a Vue component

Is there a way to exclusively view references of a method override in a JS/TS derived class without any mentions of the base class method or other overrides in VS Code?

Develop a game timer using CreateJS

Need to invoke a controller method multiple times? Utilize AJAX for seamless and efficient execution

Using jQuery to target adjacent elements excluding those that are separated by other text

Sometimes the AngularJS scope is refreshed only intermittently

Shorten Text - React Native

What methods can I employ to utilize preg_match with jQuery?

Create a new division directly underneath the bootstrap column

What steps should I take to ensure my mineflayer sprints while trailing behind me?

Troubles with creating promises in Node.js

Creating a custom HTML5 canvas with images from a JSON array

Angular validation for password and confirmation password fields

Text input fields within a grid do not adjust to different screen sizes when placed within a tab

The contact form fields shimmer as they transition in and out

Retrieving the present precipitation amount from a Java Script API

Redux accesses the store data after a brief delay

ReactJS component's function become operational only after double tapping