如何利用Intellisense将js库导入Typescript模块/ VS Code任务

观光犬

我已经阅读了其他文章和教程,了解如何将(流行的).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中将系统用作模块求解器。相反,我建议您tsconfig.json通过使用生成一个初始文件tsc --init,然后根据需要进行调整。

最后,如果您以Web浏览器为目标,则还应该查找有关Web解决方案的信息(例如webpack或RequireJS)。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章