tslint error Shadowed name: '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!

Tattered

The shadowed name error usually happens when you are using a variable from an "outside" scope, in an inside scope. This is a configurable linting option that you may want to disable, but I'm not sure why it's throwing for you as it seems to work fine for me and I don't have it disabled. – Declaration

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 (i.e. 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... i.e. 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.

Sludgy

We (or at least most people) know what shadowing is, and if they don't they can Google "shadow tslint" in like five seconds. The question here is why he is getting the warning. Turning it off is just about the worst thing you could do. – Trove

@torazaburo I can think of worse things. – Sludgy

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.

Chandelle

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 :)

Tattered