How to import js libraries to Typescript module / VS Code task, leveraging Intellisense

Question

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.

I’m creating a .ts module that uses (among others) vis.js datasets or moment.js functions.

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.

The .d.ts files for vis.js are taken from the DefinitelyTyped project.

File structure:

/projectdir
    /.vscode
        tasks.json
    /lib
        vis.js
        moment.js
    /src
        myModule.ts
        -> myModule.js
        -> myModule.js.map
    /types
        /vis/index.d.ts...
        /jquery/index.d.ts...
    index.html
    tsconfig.json

Content of the tsconfig.json:

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

Content of my VSCode tasks.json:

{
    // 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
        }
    }]
}

Finally this is myModule.ts:

export module datacore {
    export var myDataSet = new vis.DataSet([]);
}

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:

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.

So I've considered adding an import on top of my module:

import * as vis from "../lib/vis";
//also tried: import vis = require("../lib/vis");

export module datacore {
    export var myDataSet = new vis.DataSet([]);
}

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:

Cannot write file '/Users/username/Desktop/timecore/lib/vis.js' because it would overwrite input file.

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.

Compiling is much faster now, but it leads to this error:

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.

This is where the vicious circle closes.

What's wrong with my setup?

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

Answer 1

What's wrong with my setup?

Well, I can't find out what's wrong with your setup because it looks really weird to me.

If I would have to make a TypeScript project using vis.js and moment.js, this would be my setup process (using npm):

npm install --save vis moment
npm install --save-dev @types/vis @types/moment

Then, your code should look like this:

import * as vis from "vis";

export module datacore {
    export var myDataSet = new vis.DataSet([]);
}

I wouldn't be using system as a module solver in your tsconfig.json. Instead, I suggest you to generate an initial tsconfig.json file by using tsc --init and then tweak it to your needs.

Finally, if you are targeting web browsers, you should also look for information about web solutions (like webpack or RequireJS).

Answer 2

As a result of a discussion in comments, in your case you should use import * as vis from "../types/vis/index"; instead of "../lib/vis".