TypeScript: Problems using types installed in node_modules/@types

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

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.

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

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

With https://github.com/DefinitelyTyped/DefinitelyTyped/pull/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;

"moduleResolution": "node" fixed this for me.

@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” ] }

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.

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"]

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

Just the hack I needed too!

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.

@aluanhaddad Awesome, that solved it. Many thanks!

use --lib es6 instead.

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?

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

@klemenoslaj please add a path mapping entry as well:

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {  "*": ["external/node_modules/@types/*", "*" ] }
    }
}

I tried everything above with Angular 2.2.3 and this was what finally worked for me.

Add typings.d.ts to your src folder with:

/// <reference types="@types/lodash" />
/// <reference types="@types/jquery" />
/// <reference types="@types/node" />

declare let _: _.LoDashStatic;

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

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