Want to extend empty interface but getting lint error: no-empty-interface

Question

Today, I tried to do this in my angular 6 application:

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;
}

And got a lint error:

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

I wanted to do this with my Endpoint interface:

Export interface Endpoint {
…
authConfig: AuthConfig;
…
}

But was reduced to doing this:

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

The different types of authorization could get lengthy so I don’t want to keep tacking on the types to the authConfig property of the Endpoint interface. Is there any way to declare an empty interface for the purpose of extending it without lint yelling at me?

Thanks.

This could also be done by exporting a type and setting it to either `BasicAuthConfig` or `OAuth2AuthConfig`. (Example: `export type AuthConfig = BasicAuthConfig | OAuth2AuthConfig`) — Edric, Mar 29 '19 at 15:23

score 21 · Answer 1 · answered Mar 29 '19 at 15:04

21

You can either disable this rule in tslint.json:

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

Or just disable linting for one line:

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

answered Mar 29 '19 at 15:04

Borys Kupar

1,631
11
24

10

Or use `// tslint:disable-next-line:no-empty-interface` to _only_ disable the `no-empty-interface` rule. – Edric Mar 29 '19 at 15:22
4

The reason this rule exists is that typescript uses structural typing, so defining an empty interface does not help differentiate two types. I would heed the warning and avoid empty interfaces – Titian Cernicova-Dragomir Mar 29 '19 at 15:32
1

@TitianCernicova-Dragomir It makes change much easier to manage though. – Joe May 27 '21 at 08:46

score 14 · Answer 2 · answered Aug 10 '20 at 16:41

14

How to disable

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

answered Aug 10 '20 at 16:41

oviniciusfeitosa

915
1
11
12

in the case of using eslint and typescript at the same time, your answer will work nicly. thank you. – nima Sep 05 '21 at 10:33

score 4 · Answer 3 · answered Jun 28 '22 at 18:51

4

Yet another way:

// eslint-disable-next-line @typescript-eslint/no-empty-interface
export interface AuthConfig {}

answered Jun 28 '22 at 18:51

acdcjunior

132,397
37
331
304

score 2 · Answer 4 · answered Nov 03 '22 at 16:37

2

Another solution is use type instead of interface like export type AuthConfig = {}; since in typescript 2.2 it is possible to extend type too

answered Nov 03 '22 at 16:37

Max

907
2
13
27

score 0 · Answer 5 · answered Jun 17 '23 at 07:36

0

You can use:

type AuthConfig = Record<string, never>

answered Jun 17 '23 at 07:36

Valentyn Solovyov

141
1
4

Want to extend empty interface but getting lint error: no-empty-interface

5 Answers5

How to disable