如何导入JS库，以打字稿模块/ VS代码的任务，利用智能感知

我读过关于如何添加文件（受欢迎）.js文件库，其d.ts到打字稿模块文件的其他帖子和教程，但我被锁在一个错误消息的恶性循环中。我对Typescript很陌生，所以请让我知道我的设置是否存在根本性问题。如何导入JS库，以打字稿模块/ VS代码的任务，利用智能感知

我创建一个使用（等等）一.TS模块vis.js数据集或moment.js功能。

一个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的：我VSCode tasks.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" 
    ] 
}

内容：

{ 
    // 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库，以我的打字稿模块做（这样我还可以使用类型VS代码检查智能感知）？

来源

2017-09-10 Sighthound

我试图用'tsc -p tsconfig.json'命令重现你的错误，但没有得到任何错误。你能分享你的VS Code任务配置吗？ – wrager

谢谢你的尝试！我将我的tasks.json添加到上面的问题中。 – Sighthound

构建任务同样通过，没有错误。你能分享包含最小范例的文件夹吗？我只需要你在问题中提到的文件和'打字稿'版本。 Github repo或plunker将是最好的选择 – wrager

What's wrong with my setup?

嗯，我无法找到你的设置有什么问题，因为它看起来对我来说真的很奇怪。

如果我将不得不作出使用vis.js和时刻打字稿项目。JS，这将是我的安装过程（使用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）。

来源

2017-09-10 18:09:59 lilezek

感谢您的迷你教程！ vis和moment都在工作，而tsc --init建议commonjs作为模块。将看看webpack或RequireJS。 – Sighthound

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

来源

2017-09-10 18:12:29 wrager

谢谢，这就是我的设置，如问题中所述！链接到d.ts文件而不是.js库... – Sighthound

如何导入JS库，以打字稿模块/ VS代码的任务，利用智能感知

回答

相关问题