Question

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

我在index.ts中的代码：

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
   @Bean(name = BeanIds.AUTHENTICATION_MANAGER)
   @Override
   public AuthenticationManager authenticationManagerBean() throws Exception {
       return super.authenticationManagerBean();
   }
}

在index.d.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 );

在编译过程中，在控制台中我得到了：

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

Answer 1

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

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

据我所知，在DefinitelyTyped（https://github.com/DefinitelyTyped/DefinitelyTyped）上没有此程序包的类型-一种选择是编写一些并提交请求请求。然后，您可以在合并和发布请求后将它们作为npm软件包@types/cytoscape-cxtmenu安装（并在此类情况下将它们作为文件包含在项目中）

或者，您也可以将库导入为任何库，例如：

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

这意味着打字稿不会对您与该库的交互进行任何类型检查。

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

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

Answer 2

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

我正在将some other context menu extension与角度8配合使用。将其导入为import * as contextMenus from 'cytoscape-context-menus';

如果库依赖于其他js或css文件，则必须将它们添加到angular.json文件中

Answer 3

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

(cy as any).cxtmenu( defaults );

请注意，这是黑客。分配类型any会抵消Typescript的好处，应该避免使用，但我还没有找到其他解决方案。

如何在Typescript中为Cytoscape.js使用UI扩展？

3 个答案: