想要扩展空接口但得到 lint 错误：no-empty-interface答案

【问题标题】：Want to extend empty interface but getting lint error: no-empty-interface想要扩展空接口但得到 lint 错误：no-empty-interface
【发布时间】：2019-08-20 13:26:11
【问题描述】：

今天，我尝试在我的 Angular 6 应用程序中执行此操作：

export interface AuthConfig {}

export interface BasicAuthConfig extends AuthConfig {
    username: string;
    password: string;
}

export interface OAuth2AuthConfig extends AuthConfig {
    tokenName: string;
    url: string;
    callbackUrl: string;
    clientId: string;
    scope: string[];
    grantType: grantTypes;
}

得到一个 lint 错误：

An empty interface is equivalent to `{}`. (no-empty-interface)

我想用我的 Endpoint 接口来做这个：

Export interface Endpoint {
…
authConfig: AuthConfig;
…
}

但被简化为这样做：

Export interface Endpoint {
…
authConfig: BasicAuthConfig | OAuth2AuthConfig;
…
}

不同类型的授权可能会很长，所以我不想继续将类型附加到 Endpoint 接口的 authConfig 属性中。有没有什么方法可以声明一个空接口来扩展它而不会对我大喊大叫？

谢谢。

【问题讨论】：

这也可以通过导出类型并将其设置为BasicAuthConfig 或OAuth2AuthConfig 来完成。（例如：export type AuthConfig = BasicAuthConfig | OAuth2AuthConfig）

标签： angular typescript interface lint

【解决方案1】：

您可以在tslint.json 中禁用此规则：

"rules": { "no-empty-interface": false }

或者只禁用一行的 linting：

// tslint:disable-next-line
export interface AuthConfig {}

【讨论】：

或使用// tslint:disable-next-line:no-empty-interface仅禁用no-empty-interface规则。
这个规则存在的原因是 typescript 使用结构类型，所以定义一个空的接口无助于区分两种类型。我会注意警告并避免空接口
@TitianCernicova-Dragomir 不过它让变更更容易管理。

【解决方案2】：

如何禁用

Example:
$ cat .eslintrc.js
  ...
  "rules": {
  '@typescript-eslint/no-empty-interface': 'off'
  }
  ...

【讨论】：

在同时使用 eslint 和 typescript 的情况下，你的答案会很好。谢谢。