Question

我想用装饰器UserStore implements IUserStore扩展课程@asyncStore。 IUserStore是一个扩展IAsyncStore的界面。但是，TypeScript抱怨我没有在课程AsyncStore中正确实施UserStore。

完整错误：

TS2420: Class 'UserStore' incorrectly implements interface 'IUserStore'.
Property 'isLoading' is missing in type 'UserStore'

如何正确输入所有内容以便正确输入UserStore？

以下是我的代码的一些代码段（如果与此问题或错误无关，请忽略不相关的代码并将左侧接口清空）：

// Types
interface IAsyncStore {
  isLoading: boolean;
}

interface IUserStore extends IAsyncStore {}

// AsyncStore.ts
function asyncStore(constructor): any {
  class AsyncStore extends constructor implements IAsyncStore {
    private loading: boolean = false;

    public get isLoading(): boolean {
      return this.loading;
    }
  }

  return AsyncStore
}

// UserStore.ts
@asyncStore
class UserStore implements IUserStore {} // Error TS2420: ...

Answer 1

TypeScript的类装饰器变异isn't supported。

为了使输入系统可以看到添加的属性，还应该使用合并接口输入类：

interface UserStore extends IUserStore {}
@asyncStore
class UserStore /* implements IUserStore */ {...}

这与使用装饰器获得更简洁代码的目的相冲突。

implements IUserStore是多余的，因为UserStore类合并后的接口保证UserStore类已经实现了它。

另外，IUserStore并没有达到一个好的目的，因为它与UserStore界面相同。

在这种情况下，由于TypeScript限制，直接继承能够提供更加无故障且一致的输入。

Answer 2

进一步谷歌搜索后，看起来TypeScript还不支持。有一点点，但有点脏，解决方法让打字工作。

我将这个类添加到我的代码中：

class DecoratorService implements IAsyncStore {
  isLoading: boolean;
}

然后我将此类用作UserStore的基类，如下所示：

class UserStore extends DecoratorService implements IUserStore {}

TypeScript不再对我的代码发出错误，我可以毫无错误地运行它。当我想添加另一个装饰器时，我只需将必要的值添加到DecoratorService类中，TypeScript将理解代码。

如何正确实现重载类的装饰器接口

2 个答案: