Implementing a Typescript class interface does not preserve method types

Question

I'm trying to write a Typescript interface, then write a class that implements that interface.

The problem is that I can't seem to get the method signatures from the interface to apply to the class.

Here's a slimmed-down example:

export interface Foo {
  bar(value: string): void;
}


export class MyFoo implements Foo {
  // ✔️ Typescript error:
  // Property 'bar' is missing in type 'MyFoo' but required in type 'Foo'
}


export class MyFoo implements Foo {
  // value is inferred as `any` instead of `string`, 
  // and there aren't any errors with the return type mismatch
  bar(value) { return true; }
}

It seems that the compiler is aware that the bar method should exist, but doesn't preserve the signature of it for some reason.

basarat · Accepted Answer · 2022-04-08 02:58:08Z

8

seems that the compiler is aware that the bar method should exist, but doesn't preserve the signature of it for some reason.

Correct. Reasons are covered here : https://github.com/Microsoft/TypeScript/pull/6118#issuecomment-216595207

So it is made the responsibility of the developer to add the annotations they need.

edited Apr 8, 2022 at 2:58

answered Feb 19, 2020 at 20:38

basarat

278k60 gold badges475 silver badges528 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Suncat2000 Over a year ago

Thanks for that link. TLDR: when a class implements an interface, TypeScript enforces - but doesn't transfer - type information from the interface to the class, so the class and interface may end up being incompatible. Unless you copy the annotations. TS interfaces, type aliases, and classes are all different things. :-/

Behrooz · Accepted Answer · 2020-02-19 20:55:31Z

2

Type any can be assigned to any other type in TypeScript. You should specify the type for value in the implementation of the bar method. Then. if it's anything other than string, the compiler will throw an error.

You can force your TypeScript compiler not to allow any implicit any by adding the following line to your tsconfig.json file.

"noImplicitAny": true

In general, the best practice is to explicitly add the type for function parameters and return values and avoid any to the extent possible.

answered Feb 19, 2020 at 20:55

Behrooz

2,4411 gold badge19 silver badges24 bronze badges

Comments

Danny Delott · Accepted Answer · 2020-02-20 18:53:53Z

1

So it looks like there actually is some type checking happening, despite the signature not being preserved exactly.

If I try to implement my Foo class with incompatible types it will complain.

export interface Foo {
  bar(value: string): string;
}

export class MyFoo implements Foo {
  // ✔️ Typescript error:
  // Type '(value: boolean) => boolean' is not assignable to type '(value: string) => string'.
  bar(value: boolean) { return boolean; }
}

answered Feb 20, 2020 at 18:53

Danny Delott

7,0284 gold badges38 silver badges60 bronze badges

Comments

khanguslee · Accepted Answer · 2023-10-19 23:33:09Z

0

If you don't want to rewrite the method type, you can use the Parameters utility type to extract the type out from the original implemented interface. This is mainly useful when the class that you're implementing is imported from a third party package and the parameter type is too complicated to copy.

export interface Foo {
  bar(value: string): void;
}

export class MyFoo implements Foo {
  bar(value: Parameters<Foo['bar']>[0]) { return true; }
}

answered Oct 19, 2023 at 23:33

khanguslee

613 bronze badges

Collectives™ on Stack Overflow

Implementing a Typescript class interface does not preserve method types

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related