[英]How to import js libraries to Typescript module / VS Code task, leveraging Intellisense
我已经阅读了其他文章和教程,了解如何将(流行的).js库及其d.ts文件添加到Typescript模块文件中,但是我陷入了错误消息的恶性循环。 我不是Typescript的新手,所以请让我知道我的设置是否存在根本性的错误。
我正在创建一个.ts模块,该模块使用vis.js数据集或moment.js函数(除其他功能外)。
VS Code任务将我的.ts模块文件编译为.js。 当然,我想对使用中的js库使用IntelliSense。
vis.js的.d.ts文件来自DefinitelyTyped项目。
文件结构:
/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
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"
]
}
我的VSCode task.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
}
}]
}
最后这是myModule.ts:
export module datacore {
export var myDataSet = new vis.DataSet([]);
}
我已经在tsconfig.json中为vis和其他js库设置并引用了.d.ts文件。 基本上可以,但是我遇到了这个错误:
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.
因此,我考虑在模块顶部添加导入:
import * as vis from "../lib/vis";
//also tried: import vis = require("../lib/vis");
export module datacore {
export var myDataSet = new vis.DataSet([]);
}
现在,当我在myModule.ts文件上启动编译任务时,要花很长时间,因为他显然也尝试编译vis.js。 一段时间后,我收到此错误:
Cannot write file '/Users/username/Desktop/timecore/lib/vis.js' because it would overwrite input file.
好的,他不能写vis.js,但是我还是不想。 为了防止他编译.js文件,我在tsconfig.json中将“ allowJs”:设置为false。
现在编译速度要快得多,但是会导致此错误:
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.
这就是恶性循环关闭的地方。
我的设置有什么问题?
为了正确地将js库导入到Typescript模块中,我需要做什么(因此我也可以使用IntelliSense在VS Code中进行类型检查)?
我的设置有什么问题?
好吧,我找不到您设置的问题,因为它对我来说真的很奇怪。
如果我必须使用vis.js和moment.js创建一个TypeScript项目,这将是我的设置过程(使用npm):
npm install --save vis moment
npm install --save-dev @types/vis @types/moment
然后,您的代码应如下所示:
import * as vis from "vis";
export module datacore {
export var myDataSet = new vis.DataSet([]);
}
我不会在tsconfig.json中将系统用作模块求解器。 相反,我建议您使用tsc --init
生成一个初始tsconfig.json
文件,然后根据需要进行调整。
最后,如果您以Web浏览器为目标,则还应该查找有关Web解决方案的信息(例如webpack或RequireJS)。
由于评论中的讨论,在您的情况下,应使用import * as vis from "../types/vis/index";
而不是"../lib/vis"
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.