tslint错误阴影名称：'Observable'

Question

I am getting the following error when running tslint that I wasn't getting before..

ERROR: C:/...path..to../observable-debug-operator.ts[27, 13]: Shadowed name: 'Observable'

I followed this tutorial for adding a debug operator to Observable and it is working fine except I am getting this lint error. I had been using this debug operator for a while without getting the lint error and I'm not sure why I am getting it now.

Here is the code at line 27 to amend the type definition with the debug method

declare module 'rxjs/Observable' {
  interface Observable<T> { // line 27
    debug: (...any) => Observable<T>;
  }
}

Does anyone know how I can clear this lint error? Thank you!

Answer 1

Here is a quick example of variable shadowing, to make the warning clear.

var x = 4;

function example() {
    var x = 5; // x is shadowing the outer scope's x variable
}

If you are declaring an extension to an interface (ie both instances of Observable have the same common root) you are not technically shadowing, but if you have an Observable at multiple levels, it may make it unclear to which you are referring.

You can switch off shadowing warnings using the option:

"no-shadowed-variable": [
  true,
  {
    "class": true,
    "enum": true,
    "function": true,
    "interface": false,
    "namespace": true,
    "typeAlias": false,
    "typeParameter": false
  }
]

Is interface shadowing a problem in TypeScript?

Not really - you would catch a situation where an interface was declared inside a function , which you would also catch because if it was a problem the TypeScript compiler would already be telling you there is a problem... ie the member list would show you the correct members in both scopes.

Interfaces are also erased - so there is no post-compile confusion, for example if someone were to use your TypeScript library in a JavaScript program.

I'm happy to change my opinion if someone can supply a realistic example of where interface shadowing would cause a problem.

Answer 2

Basically, Fenton explains it quite well with his example. Shadowing occurs with naming collisions.

So why not name a nested variable/parameter something else than x? ;)

My example:

...
.retryWhen(error => {
  return error
    .mergeMap((error: any) => {
      if (error.status === 500) {
...

You see, a lot of error parameters.

Answer 3

Not sure how this fixed it but I reinstalled my package dependencies including tslint and now I don't get the error anymore. Thanks for your time trying to help :)