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

Question

我已经阅读了关于如何将（流行的）.js 库及其 d.ts 文件添加到 Typescript 模块文件的其他帖子和教程，但我陷入了错误消息的恶性循环。我是 Typescript 的新手，所以如果我的设置有根本性的错误，请告诉我。

我正在创建一个使用（以及其他）vis.js 数据集或 moment.js 函数的 .ts 模块。

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 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.

所以我考虑在我的模块之上添加一个导入：

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 中进行类型检查）？

Answer 1

What's wrong with my setup?

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

如果我必须使用 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 文件，然后根据您的需要对其进行调整。

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

Answer 2

作为评论中讨论的结果，在您的情况下，您应该使用 import * as vis from "../types/vis/index"; 而不是 "../lib/vis"。

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

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

javascript

intellisense

typescript

visual-studio-code

vscode-tasks