Javascript 如何利用Intellisense将js库导入到Typescript模块/VS代码任务

我读过关于如何将（流行的）.js libs及其d.ts文件添加到Typescript模块文件的其他帖子和教程，但我陷入了错误消息的恶性循环。我对Typescript比较陌生，所以如果我的设置有根本性的问题，请告诉我

我正在创建一个使用vis.js数据集或moment.js函数的.ts模块

VS代码任务将我的.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"
    ]
}

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

最后是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.

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

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.

因此，我考虑在模块顶部添加导入：

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

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

当我现在在myModule.ts文件上启动compile任务时，由于他显然也在尝试编译vis.js，所以需要花费相当长的时间。 过了一段时间，我出现了以下错误：

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.

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

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.

好吧，他不会写vis.js，但我不想这样。为了防止他编译.js文件，我在tsconfig.json中将“allowJs”：设置为false

现在编译速度快得多，但会导致以下错误：

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.

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

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模块（这样我也可以在VS代码中使用IntelliSense进行类型检查），我需要做什么

我的设置有什么问题

嗯，我无法找出你的设置有什么问题，因为我觉得它真的很奇怪

如果我必须使用vis.js和moment.js创建一个TypeScript项目，这将是我的设置过程（使用npm）：

然后，您的代码应该如下所示：

import * as vis from "vis";

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

我不会在tsconfig.json中将系统用作模块解算器。相反，我建议您使用

tsc--init

生成一个初始

tsconfig.json

文件，然后根据需要调整它

---

最后，如果您的目标是web浏览器，您还应该查找有关web解决方案的信息（如webpack或RequireJS）。

作为评论中讨论的结果，在您的情况下，您应该使用“./types/vis/index”中的

import*As-vis

而不是

“./lib/vis”

我尝试使用

tsc-ptsconfig.json

命令重现您的错误，但没有得到任何错误。你能分享你的VS代码任务配置吗？谢谢你的尝试！我在上面的问题中添加了我的tasks.json。构建任务的传递同样没有错误。您能否共享包含最少示例的文件夹？我只需要你在问题中提到的文件和你的

typescript

版本。Github回购或plunker将是我不理解的最佳选择。。。我刚刚从“./lib/vis”中删除了作为vis的

import*来自
src/datacore.ts
，它成功了。我在第一次尝试时也这么做了，但我想你已经试过了：）如果它适合你，我会把它正式化为一个答案。在回购项目中删除这一行对我来说也很有效。但我真正的项目有一点不同。我像导出模块datacore一样导出模块。在模块前面写入“导出”时，IntelliSense会抱怨vis.DataSet（[]）。在回购协议和问题中也改变了这一细节。你知道吗？最后，我需要我的模块在其他地方…谢谢你，这就是我在问题中描述的设置！链接到d.ts文件而不是.js库…感谢您的迷你教程！vis和moment现在都在工作，tsc--init建议将commonjs作为模块。将有一个网页或RequireJS也看看。