如何在 Typescript 中使用 Cytoscape.js 的 UI 扩展？答案

【问题标题】：How to use UI extension for Cytoscape.js in Typescript?如何在 Typescript 中使用 Cytoscape.js 的 UI 扩展？
【发布时间】：2019-02-26 04:45:43
【问题描述】：

是否可以在 Typescript 中使用 Cytoscape UI 扩展？可以使用布局扩展，但是当我需要 https://github.com/cytoscape/cytoscape.js-cxtmenu 时，我不能调用函数 cy.cxtmenu( defaults )，因为它不在 cytoscape 界面中。有没有办法使用它？

我在 index.ts 中的代码：

import cytoscape = require('cytoscape');
import contextMenus = require('cytoscape-cxtmenu');
cytoscape.use(contextMenus);

const cy = cytoscape({
    container: document.getElementById('cy'),
    ...
});
let defaults = {
     menuRadius: 100, 
     selector: 'node',
    //...
};

let menu = cy.cxtmenu( defaults );

在 index.d.ts 中添加以下声明：

declare module 'cytoscape-cxtmenu' {
    const ext: cytoscape.Ext;
    export = ext;
}

在转译期间在控制台中我得到了这个：

ERROR in [at-loader] ./src/index.ts:152:17
    TS2339: Property 'cxtmenu' does not exist on type 'Core'.

【问题讨论】：

请发布您的代码和您遇到的错误。

标签： typescript cytoscape.js

【解决方案1】：

Typescript 是 Javascript 的超集 - 任何可以作为 Javascript 工作的代码都可以与 Typescript 一起使用。

您遇到的问题是您正在使用的 Javascript 库缺少正确的 Typescript 定义。

据我所见，这个包在 DefinitiveTyped (https://github.com/DefinitelyTyped/DefinitelyTyped) 上没有任何类型 - 一种选择是写一些并提交拉取请求。然后，您可以在合并和发布请求后将它们安装为 npm 包@types/cytoscape-cxtmenu（并将它们作为文件包含在您的项目中，直到此时）

或者，您可以将库作为 any 导入，例如：

const cxtmenu = require('cytoscape-cxtmenu');

这意味着 typescript 不会对您与该库的交互执行任何类型检查。

根据您的 typescript 项目的配置方式，您可能需要执行以下操作：

// @ts-ignore
import * as cxtmenu from "cytoscape-cxtmenu";

【讨论】：

【解决方案2】：

是的，您可以使用。正如迈克尔所说，打字稿是 JS 的超集。你可以做任何 JS 能做的事情。

我正在使用 some other context menu extension 和 angular 8。像 import * as contextMenus from 'cytoscape-context-menus'; 一样导入它

如果库依赖于其他一些js或css文件，必须添加到angular.json文件中

【讨论】：

【解决方案3】：

您可以使用 as 关键字 (see this answer) 将类型 any 分配给您的 Cytoscape 实例，这样可以防止出现错误。以您的问题为例：

(cy as any).cxtmenu( defaults );

请注意，这是一个 hack。分配 any 的类型会否定 Typescript 的好处，应该避免，但我还没有找到其他解决方案。

【讨论】：