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
Post a Comment