title: TypeScript 2: custom typings for untyped npm module
body: <p>After trying suggestions posted in <a href="https://stackoverflow.com/questions/37641960/typescript-how-to-define-custom-typings-for-installed-npm-package">other places</a>, I find myself unable to get a typescript project running that uses an untyped NPM module. Below is a minimal example and the steps that I tried.</p>
  
  <p>For this minimal example, we will pretend that <code>lodash</code> does not have existing type definitions. As such, we will ignore the package <code>@types/lodash</code> and try to manually add its typings file <code>lodash.d.ts</code> to our project.</p>
  
  <p>Folder structure</p>
  
  <ul>
  <li>node_modules
  
  <ul>
  <li>lodash</li>
  </ul></li>
  <li>src
  
  <ul>
  <li>foo.ts</li>
  </ul></li>
  <li>typings
  
  <ul>
  <li>custom
  
  <ul>
  <li>lodash.d.ts</li>
  </ul></li>
  <li>global</li>
  <li>index.d.ts</li>
  </ul></li>
  <li>package.json</li>
  <li>tsconfig.json</li>
  <li>typings.json</li>
  </ul>
  
  <p>Next, the files. </p>
  
  <p>File <code>foo.ts</code></p>
  
  <pre><code>///&lt;reference path="../typings/custom/lodash.d.ts" /&gt;
  import * as lodash from 'lodash';
  
  console.log('Weeee');
  </code></pre>
  
  <p>File <code>lodash.d.ts</code> is copied directly from the original <code>@types/lodash</code> package.</p>
  
  <p>File <code>index.d.ts</code></p>
  
  <pre><code>/// &lt;reference path="custom/lodash.d.ts" /&gt;
  /// &lt;reference path="globals/lodash/index.d.ts" /&gt;
  </code></pre>
  
  <p>File <code>package.json</code></p>
  
  <pre><code>{
    "name": "ts",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "typings": "./typings/index.d.ts",
    "dependencies": {
      "lodash": "^4.16.4"
    },
    "author": "",
    "license": "ISC"
  }
  </code></pre>
  
  <p>File <code>tsconfig.json</code></p>
  
  <pre><code>{
    "compilerOptions": {
      "target": "ES6",
      "jsx": "react",
      "module": "commonjs",
      "sourceMap": true,
      "noImplicitAny": true,
      "experimentalDecorators": true,
      "typeRoots" : ["./typings"],
      "types": ["lodash"]
    },
    "include": [
      "typings/**/*",
      "src/**/*"
    ],
    "exclude": [
      "node_modules",
      "**/*.spec.ts"
    ]
  }
  </code></pre>
  
  <p>File <code>typings.json</code></p>
  
  <pre><code>{
      "name": "TestName",
      "version": false,
      "globalDependencies": {
          "lodash": "file:typings/custom/lodash.d.ts"
      }
  }
  </code></pre>
  
  <p>As you can see, I have tried many different ways of importing typings:</p>
  
  <ol>
  <li>By directly importing it in <code>foo.ts</code></li>
  <li>By a <code>typings</code> property in <code>package.json</code></li>
  <li>By using <code>typeRoots</code> in <code>tsconfig.json</code> with a file <code>typings/index.d.ts</code></li>
  <li>By using an explicit <code>types</code> in <code>tsconfig.json</code></li>
  <li>By including the <code>types</code> directory in <code>tsconfig.json</code></li>
  <li>By making a custom <code>typings.json</code> file and running <code>typings install</code></li>
  </ol>
  
  <p>Yet, when I run Typescript:</p>
  
  <pre><code>E:\temp\ts&gt;tsc
  error TS2688: Cannot find type definition file for 'lodash'.
  </code></pre>
  
  <p>What am I doing wrong?</p>