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

I tried to reproduce your errors with tsc -p tsconfig.json command, but didn't get any errors. Could you share your VS Code task config? — wrager
thank you for trying it! I added my tasks.json to the question above. — Sighthound
The build task is similarly passed without errors. Could you share the folder containing minimal example? I need only the files you mentioned in the question and your typescript version. Github repo or plunker will be the best choices — wrager
I do not understand... I just removed import * as a vis from "../lib/vis"; from src/datacore.ts and it worked. I did the same in my first attempt, but I thought you already tried it :) If it suits you, I will formalize it as an answer — wrager
OK nearly there. Removing that line in the repo project works for me too. But there's one little difference with my real project. I'm exporting the module like "export module datacore". When writing "export" in front of the module that's the moment IntelliSense complains about vis.DataSet([]). Changed this detail in the repo and in the question too. Any idea about that? Finally I need my module somewhere else... — Sighthound

lilezek lilezek · Accepted Answer · 2017-09-10T18:09:59

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

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

2 Answers