Typescript classes fail to adhere to interface types

Question

Typescript classes fail to adhere to interface types

interface IFoo {
  method: (ha: string) => void;
}

class Foo implements IFoo {
  public method(ha) {}
}

The message displayed when hovering over the 'ha' parameter in the class method reads:

Parameter 'ha' implicitly has an 'any' type, but a better type may be inferred from usage

One would expect that since the class implements the interface, it should align with the interface types. However, attempting to assign a different type to parameter 'ha', such as number instead of string, results in an error stating that it is not assignable to type string.

This raises the question: Why must the type of 'ha' be specified in both the interface and the class? Is this intentional behavior?

typescript class types interface

Answer 1

Answer №1

At the moment, TypeScript does not have built-in support for this particular functionality.

If you're curious to learn more about why this is the case, check out: https://github.com/Microsoft/TypeScript/issues/23912

Implementing such a feature isn't a straightforward task.

The reason behind this limitation lies in TypeScript's foundation on JavaScript, which lacks interface resolution mechanisms found in other languages like C#.

To illustrate, consider having two interfaces, X and Y, each with a method of the same name but different parameter types:

interface X { foo(i: string): string }
interface Y { foo(x: number): number }

If you attempt to create a class that implements both X and Y directly, you can't simply merge the interfaces together as shown below:

class K implements X, Y {
  // This will result in an error since it doesn't satisfy either interface.
  foo(x: number | string): number | string {
    return x
  }
}

In a scenario like the one above, you'd need to explicitly define overloaded methods as follows:

class K implements X, Y {
  foo(x: number): number
  foo(x: string): string
  foo(x: number | string): number | string {
    return x
  }
}

Even with this approach, there's still room for improvement as it doesn't guarantee input type consistency with the output type.

Answer 2

At the moment, TypeScript does not have built-in support for this particular functionality.

If you're curious to learn more about why this is the case, check out: https://github.com/Microsoft/TypeScript/issues/23912

Implementing such a feature isn't a straightforward task.

The reason behind this limitation lies in TypeScript's foundation on JavaScript, which lacks interface resolution mechanisms found in other languages like C#.

To illustrate, consider having two interfaces, X and Y, each with a method of the same name but different parameter types:

interface X { foo(i: string): string }
interface Y { foo(x: number): number }

If you attempt to create a class that implements both X and Y directly, you can't simply merge the interfaces together as shown below:

class K implements X, Y {
  // This will result in an error since it doesn't satisfy either interface.
  foo(x: number | string): number | string {
    return x
  }
}

In a scenario like the one above, you'd need to explicitly define overloaded methods as follows:

class K implements X, Y {
  foo(x: number): number
  foo(x: string): string
  foo(x: number | string): number | string {
    return x
  }
}

Even with this approach, there's still room for improvement as it doesn't guarantee input type consistency with the output type.

Typescript classes fail to adhere to interface types

Answer №1

Similar questions

Selecting logic depending on the request body in NestJS

Anticipate that the function parameter will correspond to a key within an object containing variable properties

Tips for selecting an image from the gallery with IONIC 3

Utilizing union type return values in Typescript

Data fetched using React Query

Locate and refine the pipeline for converting all elements of an array into JSON format using Angular 2

Angular progress tracker with stages

Encountering difficulty when trying to define the onComplete function in Conf.ts. A type error is occurring, stating that '(passed: any) => void' is not compatible with type '() => void'.ts(2322)'

Transitioning Apollo Server from version 3 to version 4 within a next.js environment

Angular's ng-select fails to select the value when generating the dynamic control

Setting up SSL/TLS certificates with Axios and Nest JS

How to show specific images by clicking on particular items in Ionic 3 on a separate page

Identify numbers and words within a sentence and store them in an array

Having trouble with enzyme in React Typescript application

Methods for adding a new object to an array in Angular: Explained

Manipulating arrays and troubleshooting Typescript errors in Vue JS

What are the best techniques for streamlining nested objects with Zod.js?

What is the best way to connect input values with ngFor and ngModel?

Is there a way to utilize "npm install ts-node-dev -D" in Termux?

Tips for displaying backend error messages on the frontend