How to explicitly use lib.d.ts types?

Question

Seems like this issue is related with IDE WebStorm. I reported to WebStorm. And track here.

I am using Angular 2 with TypeScript 2.

How to explicitly use the location from lib.d.ts types? Because now it shows red in my IDE WebStorm 2016.3 EAP:

const hostname = location.hostname;
const hostname = window.location.hostname;

---

I have this in my file:

import { Location } from '@angular/common';

constructor(private _location: Location) {}
// note there is an underline before
// and when I use in other functions, I actually use 'this._location' not just '_location'

And I found that after removing import { Location } from '@angular/common';, the error will be gone though.

---

And I guess the reason this error shows is because that the IDE thinks this is a location from Angular 2.

You can see from the screenshot below that all functions which belongs to Location from Angular 2.

---

One way is using const hostname = (location as any).hostname;, but is there any better way? Thanks

My tsconfig.json if it helps:

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "module": "commonjs",
    "removeComments": true,
    "sourceMap": true,
    "lib": ["es6", "dom"]
  },
  "include": [
    "node_modules/@types/**/*.d.ts",
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules",
    "!node_modules/@types/**/*.d.ts"
  ],
  "compileOnSave": false,
  "buildOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

Answer 1

Thanks for @NitzanTomer's help.

It seems like this issue is related with WebStorm.

I reported it to WebStorm, you can track the issue here:

https://youtrack.jetbrains.com/issue/WEB-23021