Problems using types installed in node_modules/@types

[jonrimmer]

TypeScript Version: 2.0.0-beta

We are encountering various problems using types installed into node_modules/@types. My understanding was that, when types were installed there, the compiler would automatically pick them up, but that does not seem to happen.

---

If I install @types/angular, then try to use angular-cookies:

import * as angular from 'angular';
import 'angular-cookies';

let cookiesService: angular.cookies.ICookiesService;

I get the following:

error TS2305: Module 'angular' has no exported member 'cookies'.

This is despite angular-cookies.d.ts defining an angular.cookies namespace.

---

If I install @types/rx, then try to import rx-lite:

import Rx from 'rx-lite';

It cannot find the module:

error TS2307: Cannot find module 'rx-lite'.

The only way I've found to fix this is to add an explicit entry to tsconfig.json types:

types {
      "rx/rx.lite.d.ts"
}

I thought the compiler included everything in node_modules/@types automatically, so why do I have to add this explicitly?

---

Similar to the above, if I install @types/tinycolor, which declares a module "tinycolor2" in its index.d.ts, then try to use it:

import * as tinycolor from 'tinycolor2';

It cannot find the module:

error TS2307: Cannot find module 'tinycolor2'.

Again, the only way to make it pick up this is to add an explicit entry to tsconfig.json's types section.

---

I'm not sure what the benefit of @types is, if we always have to add explicit config entries for our ambient type definitions in order for the compiler to consider them?

[sanex3339]

same for me with @types/node, @types/mocha

(1,21): error TS2307: Cannot find module 'fs'.
(3,23): error TS2307: Cannot find module 'path'.
(80,41): error TS2304: Cannot find name 'process'.
(5,12): error TS2304: Cannot find name 'global'.
(6,5): error TS2304: Cannot find name 'require'.

With DefinitelyTyped classic (master branch) node definitions everything is ok.

For example for fs module i have import like

import * as fs from 'fs';

For require and global i have no imports.

For mocha global function like describe, it i have no imports too.

It will work with

import 'mocha'

but current definitions works without import

https://github.com/sanex3339/javascript-obfuscator/blob/dev/test/config/config.spec.ts#L1

[joshuacc]

I'm having a similar problem with @types/angular on TypeScript 2.0.0.

My first attempt looked like this:

import * as angular from "angular";
let foo:angular.route.IRouteProvider;

which gives the following error: index.ts(2,17): error TS2305: Module 'angular' has no exported member 'route'.

I've tried the following variations, all of which complain of various errors.

import * as angular from "angular";
import "angular/angular-route";
let foo:angular.route.IRouteProvider;

node_modules/@types/angular/angular-route.d.ts(123,21): error TS2304: Cannot find name 'IScope'.
node_modules/@types/angular/angular-route.d.ts(130,38): error TS2304: Cannot find name 'IServiceProvider'.
index.ts(4,17): error TS2305: Module 'angular' has no exported member 'route'.

import * as angular from "angular/angular-route";
let foo:angular.route.IRouteProvider;

node_modules/@types/angular/angular-route.d.ts(123,21): error TS2304: Cannot find name 'IScope'.
node_modules/@types/angular/angular-route.d.ts(130,38): error TS2304: Cannot find name 'IServiceProvider'.
index.ts(1,26): error TS2306: File 'C:/Users/jclanton/Documents/GitHub/types-test/node_modules/@types/angular/angular-route.d.ts' is not a module.

I'm sure that I'm doing something wrong, but I can't seem to figure out what.

[mhegazy]

With DefinitelyTyped/DefinitelyTyped#10170, you should be able to do:

import * as angular from 'angular';
import 'angular-cookies';

let cookiesService: angular.cookies.ICookiesService;

or

/// <reference types="angular" />
/// <reference types="angular-cookies" />

let cookiesService: ng.cookies.ICookiesService;

[NZSmartie]

That only resolves the issue with angular specifically. Are you to suggest that for each package with this issue, we must submit PRs which break out the declarations?

[mhegazy]

For node you will need to add a /// <reference type="node" /> to one of your files or add to your tsconfig.json:

{
    "compilerOptions": {
         "types" : [ "node" ]
    }
}

breaking it up is not an option here since these are really some magical modules that node injects into the module space. angular-mocks on the other hand is really an npm module (https://www.npmjs.com/package/angular-mocks).

[brunolm]

This is closed, but what is the solution?

mocha for example... Do I have to include a triple slash manually as well?

[mhegazy]

This is closed, but what is the solution?

We have republiushed the angular packages, these should work as intended now.

mocha for example... Do I have to include a triple slash manually as well?

I am not sure i understand the issue with mocha. it should just work, all you need is npm install @types\mocha. can you elaborate on the issue, and your setup?

[mhegazy]

I should add. my statement above assumes that your tsconfig.json is in the same folder as your node_modules\@types. if that is the case, the contents of node_modules\@types are picked up automatically. so node_modules\@types\mocha\index.d.ts will be in your scope, and thus describe would be as well.
By default all the contents of node_modules\@types adjacent to your tsconfig.json are included in your compilation.

if however, your tsconfig.json is not in the same folder, either a sibling folder, or in a child then you need to specify where to find it to get the same behavior. you can do this by specifying the typeRoots property. e.g.:

{
    "compilerOptions": {
        "typeRoots": [
            "../node_modules/@types"
        ]
    }
}

for a file layout as:

C:\TEST\SANDBOX7
│   package.json
│
├───node_modules
│   └───@types
│       ├───angular
│       ├───jquery
│       └───mocha
│
└───src
        a.ts
        tsconfig.json

In case you want to say "Do not include all node_modules\@types" , to do this you can specify a list of declarations you want to specify, e.g.:

{
    "compilerOptions": {
        "types": [
            "node", "mocha"
        ]
    }
}

this will only include node_modules\@types\node\index.d.ts and node_modules\@types\mocha\index.d.ts. if you have an empty types list in your tsconfig.json, then nothing is included.

hope this helps.

[brunolm]

Sorry, I'm narrowing it down and I think the issue is not on TypeScript.

It seems to be on VSCode and ts-loader, I think neither support this new @types folder.

I don't know if it is just me or if other people are running in the same issue.

I will try this typeRoots

[mhegazy]

can you share your project, or your tsconfig.json

[brunolm]

Structure

├ spec
├─ index.ts
├ src
├─ index.ts
├ tsconfig.json
├ package.json
├ webpack.config.js

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "noImplicitAny": false,
    "sourceMap": false,
    "typeRoots": ["node_modules/@types"]
  },
  "exclude": [
    "node_modules"
  ]
}

webpack.config.js

module.exports = {
  entry: {
    app: ['babel-polyfill', './src/'],
    test: ['babel-polyfill', './spec/'],
  },
  output: {
    path: __dirname,
    filename: './dist/[name].js',
  },
  resolve: {
    extensions: ['', '.js', '.ts'],
  },
  module: {
    loaders: [{
      test: /\.ts$/, loaders: ['babel-loader', 'ts-loader'], exclude: /node_modules/
    }],
  }
};

Dependencies:

  "devDependencies": {
    "@types/mocha": "^2.2.28",
    "@types/node": "^4.0.30",
    "babel-core": "^6.10.4",
    "babel-loader": "^6.2.4",
    "babel-polyfill": "^6.9.1",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-stage-0": "^6.5.0",
    "mocha": "^2.5.3",
    "rimraf": "^2.5.3",
    "ts-loader": "^0.8.2",
    "typescript": "^2.0.0",
    "webpack": "^1.13.1"
  }

On VSCode and webpack it fails, but if I try to build the test file directly:

tsc .\spec\index.ts --listFiles
.../Users/.../node_modules/typescript/lib/lib.d.ts
spec/index.ts
.../node_modules/@types/mocha/index.d.ts
.../node_modules/@types/node/index.d.ts

or tsc -p .

It works.

If I do a typings install --global mocha instead of npm i -D @types/mocha then both VSCode and Webpack work correctly.

[mhegazy]

On VSCode and webpack it fails, but if I try to build the test file directly:

what do you mean it fails? what version of VS code? and do you have typescript.tssdk property set in your settings?

[mhegazy]

this is working for me with latest TS in VSCode. the webpack seems like a ts-loader issue.

[mhegazy]

i.e. using the latest TS in VS Code, see https://github.com/Microsoft/TypeScript-Handbook/blob/master/pages/Nightly%20Builds.md#visual-studio-code

[brunolm]

Setting that typescript.tssdk fixed VSCode! Thank you!

[yahiko00]

Just the hack I needed too!

[mhegazy]

just as a clarification. the @types packages has new TS syntax like export as namespace and /// <reference types=.../> that are added in TS 2.0. By default VSCode comes with TS 1.8. so you need to let VSCode knows to use a different version.

[cnuwasn]

i am getting error unknown compiler option types. but while checking tsc -v i am getting Version 2.0.0

[mhegazy]

what is the compiler option?

[cnuwasn]

{
"compilerOptions": {
    "target": "es5",
    "module": "amd",
    "declaration": true,
    "removeComments": true,
    "noLib": false,
    "experimentalDecorators": true,
    "sourceMap": true,
    "pretty": true,
    "allowUnreachableCode": false,
    "allowUnusedLabels": false,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitUseStrict": false,
    "noFallthroughCasesInSwitch": true,
    "allowJs": false,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "types": ["jasmine","jasmine-ajax","requirejs","chai","es6-promise"]
  },
}

[mhegazy]

looks good to me. also working correctly for me on typescript@2.0.0. how are you running the compiler?

[cnuwasn]

using gulp command "gulp build". is am need to update gulp typescript?

[mhegazy]

probably :) these are new features in TS 2.0

[liaotianr]

I'm facing problems too (related to node_modules/%40types/node/index.d.ts') in my Electron project. These messages are already shown in VSCode:

message: 'Subsequent variable declarations must have the same type.  Variable 'process' must be of type 'any', but here has type 'Process'.'
at: '48,13'
source: ''

message: 'Subsequent variable declarations must have the same type.  Variable '__dirname' must be of type 'any', but here has type 'string'.'
at: '53,13'
source: ''

package.json

{
  "name": "myapp",
  "version": "0.1.0",
  "main": "main.js",
  "devDependencies": {
    "@types/node": "^7.0.0",
    "typescript": "^2.1.5"
  }
}

[nvivo]

I'm having random problems with TS 2.1.5 on VS 2015. Some of the dependencies inside @types are seen by Visual Studio, some aren't. This happens sometimes only, and I cannot pinpoint any specific reason. Yesterday things were working fine, put my laptop to sleep, today VS cannot see some types. Restarted VS and nothing.

Compilation using gulp works fine every time, but VS is very unstable.

Is there any way to debug which declarations VS is looking at?

[mhegazy]

So the same project, no changes, sometimes work others not? if so can you share the project? can you also say when it does not work? or at least what activity you have noticed to trigger this behavior more often than others.

[nvivo]

@mhegazy Found out what was causing the issue. A node_modules folder was created deep in the project tree and that was messing with tsc. Added to the fact that VS doesn't show this folder in the list, I didn't see this before. This probably happened other times, but as I occasionally run a git reset and the issue went away.

[marcusjwhelan]

I don't see why this is closed I am using 2.1.5 and have tried everything listed above but cannot seem to use @types/chalk , @types/commander, and @types/nedb doesnt seem to function? @mhegazy

[mhegazy]

Please file a new issue and provide enough details to allow us to diagnose the issue.

[kimballjohnson]

I'm having trouble with sub-dependencies of libraries that are properly referenced node_modules@types.
I think its unexpected that the @types process requires that every sub-library library referenced by an @types/library-name also have an @types d.ts somewhere?

The result is (for me) a long list of build errors like this:

Build:Cannot find type definition file for 'pinkie-promise'.

I'm guessing 'pinkie-promise' is a library required by one of the @types libraries. If it's a sub-dependency of one of the 'normal' dependencies, I'll have other questions.

here's the devDependencies and dependencies area of my package.json:

"devDependencies": {
    "@types/chai": ">=3.4.0",
    "@types/chai-as-promised": ">=0.0.29",
    "@types/mocha": ">=2.2.0",
    "@types/mocha-phantomjs": ">=3.4.0",
    "@types/sinon": ">=1.0.0",
    "@types/sinon-chai": ">=2.7.0",
    "@types/assert-plus": ">=0.0.0",
    "@types/assertion-error": ">=1.0.0",
    "chai": ">=3.4.0",
    "chai-as-promised": ">=0.0.29",
    "mocha": ">=2.2.0",
    "mocha-phantomjs": ">=1.9.29",
    "phantomjs": ">=2.1.0",
    "sinon": ">=1.0.0",
    "sinon-chai": ">=2.7.0",
    "assert-plus": ">=0.0.0",
    "assertion-error": ">=1.0.0"
  },
  "dependencies": {
    "@types/bluebird": "^1.0.0",
    "@types/chalk": ">=0.4.31",
    "@types/deep-equal": ">=0.0.3",
    "@types/extend": ">=2.0.0",
    "@types/form-data": ">=0.0.3",
    "@types/graceful-fs": ">=2.0.29",
    "@types/htmlparser2": ">=3.9.2",
    "@types/is-my-json-valid": ">=0.0.19",
    "@types/jquery": ">=2.0.4",
    "@types/lodash": "*",
    "@types/mime": ">=0.0.29",
    "@types/qs": ">=6.2.3",
    "@types/request": "*",
    "@types/semver": ">=5.3.0",
    "@types/which": ">=1.0.2s",
    "bluebird": ">=3.4.7",
    "chalk": ">=0.4.31",
    "deep-equal": ">=0.0.3",
    "extend": ">=2.0.0",
    "form-data": ">=1.0.0",
    "graceful-fs": ">=4.1.11",
    "htmlparser2": ">=3.9.2",
    "is-my-json-valid": ">=0.0.19",
    "jquery": ">=2.0.4",
    "lodash": "^1.0.0",
    "mime": ">=0.0.29",
    "phantomjs-polyfill": ">=0.0.2",
    "qs": ">=6.2.3",
    "request": "*",
    "semver": ">=5.3.0",
    "which": ">=1.0.2"
  }

[edsilv]

My solution for this was to add lib.es6.d.ts to the include compiler option:

"include": [
        "node_modules/typescript/lib/lib.es6.d.ts",
        "src/**/*",
        "typings/**/*"
]

This meant that the
///<reference path="../node_modules/typescript/lib/lib.es6.d.ts"/>
doesn't get included in the generated definition file for the project, which causes problems in dependent projects.

(I was having problems with the jquery @types not finding typescript's types).

[mhegazy]

use --lib es6 instead.

[mhegazy]

also #15732 tracks adding lib reference directives.

[edsilv]

@mhegazy I was already using it, but it didn't help:

{
    "compilerOptions": {
        "declaration": true,
        "noImplicitAny": true,
        "noImplicitReturns": true,
        "noImplicitThis": true,
        "module": "es6",
        "moduleResolution": "node",
        "noUnusedLocals": true,
        "noUnusedParameters": false,
        "strictNullChecks": true,
        "target": "es5",
        "lib": ["es6"]
    },
    "files": [
        "src/Definitions.ts",
        "src/StringValue.ts",
        "src/TreeSortType.ts"
    ],
    "include": [
        "node_modules/typescript/lib/lib.es6.d.ts",
        "src/**/*",
        "typings/**/*"
    ]
}

Without explicitly including lib.es6.d.ts I get:

node_modules/@types/jquery/index.d.ts(191,29): error TS2304: Cannot find name 'XMLHttpRequest'.
node_modules/@types/jquery/index.d.ts(512,41): error TS2304: Cannot find name 'Event'.
node_modules/@types/jquery/index.d.ts(517,20): error TS2304: Cannot find name 'Element'.

[edsilv]

@mhegazy Here's the project: https://github.com/viewdir/manifold (latest code on master)

[aluanhaddad]

That's because you are now explicitly setting --lib. Once you do that, you need to add "dom" if you depend on its types directly or transitively (as in this case via jQuery).

"lib": ["es6", "dom"]

[edsilv]

@aluanhaddad Awesome, that solved it. Many thanks!

[MaJeztik]

Sorry to necro, but I've spent a day on this and finally resolved it. It seems to be a different resolution from others here (as it's a different cause, but it is a problem related to using @types), so figured it'd be useful to add.

I am using Visual Studio 2015 and currently in the process of upgrading an old Asp.NET MVC site.

Basic plan was to upgrade Typescript to latest (2.8.3) and remove all of the manual .d.ts files referencing libraries such as jQuery. I also removed the /// references from .ts files.

I started re-adding types using: npm install --save @types/jquery - I tried referencing jQuery or $ and both were unrecognized symbols. Intellisense could find no references to these types and I could not build my solution.

Issue 1:
I realised that the older version of Typescript (1.6?) was being referenced by Visual Studio even tho I had upgraded it in the solution. I found this out by going to the Visual Studio menu: Help -> About Microsoft Visual Studio. Ensure the version of Typescript referenced in this window matches the one you have added to your solution!

Now we have some intellisense. JQuery is recognized, however it was still producing an error (module in an inaccessible location). After a lot of investigation I realised the JS files were being compiled correctly by the Typescript compiler, even with the errors, which ended up leading me to the next fix.

Issue 2:
Resharper 2016/17 incorrectly raises an error when using @types in the node_modules/@types folder. Some details on the issue are raised here: Resharper support ticket
This actually stops you from being able to build your entire project!! :(

I hope that helps someone out. Sorry if this is the wrong place to post this!

[VijayChawla]

@brunolm - Your solution works for me... Thanks a lot...
The solution which i tried as per your suggestions is below :

In tsconfig.json : Corrected typeRoot values like following -> "typeRoots": ["node_modules/@types"]

{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"noImplicitAny": false,
"sourceMap": false,
"typeRoots": ["node_modules/@types"]
},
"exclude": [
"node_modules"
]
}

[xiaoouLi]

@mhegazy Found out what was causing the issue. A node_modules folder was created deep in the project tree and that was messing with tsc. Added to the fact that VS doesn't show this folder in the list, I didn't see this before. This probably happened other times, but as I occasionally run a git reset and the issue went away.

Hi @nvivo, what do you mean by " A node_modules folder was created deep in the project tree"? And how come it's a random issue if there is always a node+modules folder?
I'm having random issue too, but during build process.I think it's related to types/jest and types/es6-shim packages..

Thanks!

[stephaneeybert]

What if we want to use types definitions in a library and skip having to explicitly build the library before serving the workspace ?

It gives me the issue of the types definitions being missing again.

[basickarl]

This issue is normally resolved on my laptop by me reinstalling the node modules and then also restarting VSCode since it is incredibly buggy regarding Typescript (ironic since Microsoft develop both and still can't fix the bugs that have been around for years).

[w4-alibek]

Make sure you have inside the
package.json

{
  ....
  "dependencies": {
    "module-name": "version"
  },
  "devDependencies": {
    ...
    "@types/module-name": "version" // version should be same with dependencies
  }
  ....
}

[iAbhinav]

To solve this

npm i typescript@2.7.2 --save

[mrlexz]

idk

[AbhinavAtul]

I had to comment out the types override in tsconfig.app.json, note you can use the types config here to be selective in your imports as mentioned in a previous comment

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app"
//    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

[AgainstLightning]

My issue was painfully simple after spending a good amount of time on it: My @types version did not match the version of the dependency I needed the types for.