title: How to import js libraries to Typescript module / VS Code task, leveraging Intellisense
body: <p>I’ve read other posts and tutorials on how to add (popular) .js libs with its d.ts files to a Typescript module file, but I’m locked in a vicious circle of error messages. I’m rather new to Typescript so please let me know if there’s something fundamentally wrong with my setup.</p>
  
  <p>I’m creating a .ts module that uses (among others) vis.js datasets or moment.js functions. </p>
  
  <p>A VS Code task compiles my .ts module file to .js. Of course, I'd like to use IntelliSense for the js libraries in use. </p>
  
  <p>The .d.ts files for vis.js are taken from the DefinitelyTyped project.</p>
  
  <p>File structure:</p>
  
  <pre><code>/projectdir
      /.vscode
          tasks.json
      /lib
          vis.js
          moment.js
      /src
          myModule.ts
          -&gt; myModule.js
          -&gt; myModule.js.map
      /types
          /vis/index.d.ts...
          /jquery/index.d.ts...
      index.html
      tsconfig.json
  </code></pre>
  
  <p>Content of the tsconfig.json:</p>
  
  <pre><code>{
      "compilerOptions": {
          "module": "system",
          "moduleResolution": "classic",
          "allowJs": true,
          "allowSyntheticDefaultImports": true,
          "target": "es5",
          "sourceMap": true,
          "watch": true,
          "rootDir": "src",
          "lib": ["es2015", "dom", "dom.iterable"],
          "baseUrl": "types",
          "typeRoots": ["types"]
      },
      "exclude": [
          "./lib",
          "**/*.js",
          "**/*.js.map"
      ],
      "include": [
          "src/**/*.ts"
      ]
  }
  </code></pre>
  
  <p>Content of my VSCode tasks.json:</p>
  
  <pre><code>{
      // See https://go.microsoft.com/fwlink/?LinkId=733558
      // for the documentation about the tasks.json format
      "version": "2.0.0",
      "command": "tsc",
      "problemMatcher": "$tsc",
      "tasks": [{
          "type": "typescript",
          "tsconfig": "tsconfig.json",
          "group": {
              "kind": "build",
              "isDefault": true
          }
      }]
  }
  </code></pre>
  
  <p>Finally this is myModule.ts:</p>
  
  <pre><code>export module datacore {
      export var myDataSet = new vis.DataSet([]);
  }
  </code></pre>
  
  <p>I've set up and referenced the .d.ts files for vis and other js libraries in the tsconfig.json. Basically it works, but I'm getting this error:</p>
  
  <pre><code>src/datacore.ts(2,33): error TS2686: 'vis' refers to a UMD global, but the current file is a module. Consider adding an import instead.
  </code></pre>
  
  <p>So I've considered adding an import on top of my module:</p>
  
  <pre><code>import * as vis from "../lib/vis";
  //also tried: import vis = require("../lib/vis");
  
  export module datacore {
      export var myDataSet = new vis.DataSet([]);
  }
  </code></pre>
  
  <p>When I launch the compile task now on the myModule.ts file, it takes quite a while since he obviously tries to compile the vis.js too. 
  After some time I'm getting this error:</p>
  
  <pre><code>Cannot write file '/Users/username/Desktop/timecore/lib/vis.js' because it would overwrite input file.
  </code></pre>
  
  <p>Ok he can't write vis.js but I don't want that anyway. To prevent him compiling .js files I'm setting "allowJs": to false in the tsconfig.json.</p>
  
  <p>Compiling is much faster now, but it leads to this error:</p>
  
  <pre><code>src/datacore.ts(3,22): error TS6143: Module '../lib/vis' was resolved to '/Users/username/Desktop/timecore/lib/vis.js', but '--allowJs' is not set.
  </code></pre>
  
  <p>This is where the vicious circle closes. </p>
  
  <p>What's wrong with my setup?</p>
  
  <p>What do I need to do in order to correctly import a js library to my Typescript module (so I can also use IntelliSense for type checking in VS Code)?</p>