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


i’ve read other posts , tutorials on how add (popular) .js libs d.ts files typescript module file, i’m locked in vicious circle of error messages. i’m rather new typescript please let me know if there’s fundamentally wrong setup.

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

a vs code task compiles .ts module file .js. of course, i'd use intellisense js libraries in use.

the .d.ts files vis.js taken 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 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 vscode tasks.json:

{     // see https://go.microsoft.com/fwlink/?linkid=733558     // documentation tasks.json format     "version": "2.0.0",     "command": "tsc",     "problemmatcher": "$tsc",     "tasks": [{         "type": "typescript",         "tsconfig": "tsconfig.json",         "group": {             "kind": "build",             "isdefault": true         }     }] } 

finally mymodule.ts:

export module datacore {     export var mydataset = new vis.dataset([]); } 

i've set , referenced .d.ts files vis , other js libraries in tsconfig.json. works, i'm getting error:

src/datacore.ts(2,33): error ts2686: 'vis' refers umd global, current file module. consider adding import instead. 

so i've considered adding import on top of module:

import * vis "../lib/vis"; //also tried: import vis = require("../lib/vis");  export module datacore {     export var mydataset = new vis.dataset([]); } 

when launch compile task on mymodule.ts file, takes quite while since tries compile vis.js too. after time i'm getting error:

cannot write file '/users/username/desktop/timecore/lib/vis.js' because overwrite input file. 

ok can't write vis.js don't want anyway. prevent him compiling .js files i'm setting "allowjs": false in tsconfig.json.

compiling faster now, leads error:

src/datacore.ts(3,22): error ts6143: module '../lib/vis' resolved '/users/username/desktop/timecore/lib/vis.js', '--allowjs' not set. 

this vicious circle closes.

what's wrong setup?

what need in order correctly import js library typescript module (so can use intellisense type checking in vs code)?

what's wrong setup?

well, can't find out what's wrong setup because looks weird me.

if have make typescript project using vis.js , moment.js, setup process (using npm):

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

then, code should this:

import * vis "vis";  export module datacore {     export var mydataset = new vis.dataset([]); } 

i wouldn't using system module solver in tsconfig.json. instead, suggest generate initial tsconfig.json file using tsc --init , tweak needs.

finally, if targeting web browsers, should information web solutions (like webpack or requirejs).


Comments

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -