Typescript @withNamespaces decorator type error

[dforsl]

Describe the bug
When attempting to use the @withNamespaces-decorator in Typescript, it results in the following error:
... error TS1238: Unable to resolve signature of class decorator when called as an expression. Type 'ComponentClass<Pick<Props, never>, any>' is not assignable to type 'void | typeof ModelList'. Type 'ComponentClass<Pick<Props, never>, any>' is not assignable to type 'typeof ModelList'. Property 'modelStore' is missing in type 'Component<Pick<Props, never>, any, any>' but required in type 'ModelList'.

I'm using other decorators without any issues. Is there something that I could be missing, or is it simply a bug?

Occurs in react-i18next version
9.0.2

[rosskevin]

I don't use decorators at all. @nikolay-borzov any thoughts on this one since you helped with the hoc test?

[nikolay-borzov]

I'd like to see code that produces that error. I guess we can also add tests for decorator use. I haven't used decorators for a long time.

Hm, there is a sentence in docs

To help you using TypeScript and the @withNamespaces decorator here is a trival example

But no decorators used in the example

[nikolay-borzov]

Related DefinitelyTyped/DefinitelyTyped#20796

[jamuhl]

@dforsl any update on this?

[dforsl]

Sorry, I should of course have included some code from the start. Here's a minimal example:

import React, { Component } from 'react';
import { withNamespaces, WithNamespaces } from 'react-i18next';

type Props = WithNamespaces;

@withNamespaces()
export default class Yolo extends Component<Props> {
  render() {
    const { t } = this.props;
    return (
      <p>{t('yolo')}</p>
    );
  }
}

which gives the following error:

src/Yolo.tsx:6:1 - error TS1238: Unable to resolve signature of class decorator when called as an expression.
  Type 'ComponentClass<Pick<WithNamespaces, never>, any>' is not assignable to type 'void | typeof Yolo'.
    Type 'ComponentClass<Pick<WithNamespaces, never>, any>' is not assignable to type 'typeof Yolo'.
      Type 'Component<Pick<WithNamespaces, never>, any, any>' is not assignable to type 'Yolo'.
        Types of property 'render' are incompatible.
          Type '() => ReactNode' is not assignable to type '() => Element'.
            Type 'ReactNode' is not assignable to type 'Element'.
              Type 'undefined' is not assignable to type 'Element'.

6 @withNamespaces()

[dforsl]

Given my very limited experience with typescript, I guess this has to do with that withNamespaces seems to change the signature of the component - which isn't supported by decorators? microsoft/TypeScript#4881

Using the workaround of casting to any (@(withNamespaces() as any)) isn't ideal but works just fine.

[rosskevin]

Do you have decorators enabled in your tsconfig? https://www.typescriptlang.org/docs/handbook/decorators.html

Since decorators are experimental in nature, I'm not keen to leave this issue open. I'm not against them, just don't have any plans to use/support them personally so it will need to be supported by someone that uses them.

If you are interested in pitching in a test and solution (if there is indeed a bug with the types) we are happy to have it.

[fullofcaffeine]

Sorry to hijack this thread, but as a related question, are decorators still supported in the latest version with the new useTranslate function? I couldn't use it as a decorator, was that changed on purpose or maybe I'm doing something wrong?

[rosskevin]

Since decorators are experimental in nature, I'm not keen to leave this issue open. I'm not against them, just don't have any plans to use/support them personally so it will need to be supported by someone that uses them.

If you are interested in pitching in a test and solution (if there is indeed a bug with the types) we are happy to have it.

[fullofcaffeine]

Oh, sorry for missing that part. Thanks!