Как использовать расширение пользовательского интерфейса для Cytoscape.js в Typescript? - PullRequest
0 голосов
/ 21 сентября 2018

Возможно ли использовать расширения пользовательского интерфейса Cytoscape в Typescript?Можно использовать расширение макета, но когда мне нужно, например, https://github.com/cytoscape/cytoscape.js-cxtmenu,, я не могу вызвать функцию cy.cxtmenu (по умолчанию), потому что она отсутствует в интерфейсе 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'.

Ответы [ 2 ]

0 голосов
/ 05 июля 2019

Да, вы можете использовать.Как сказал Майкл, машинопись - это супер-набор JS.Вы можете делать все, что может делать JS.

Я использую какое-то другое расширение контекстного меню с угловым 8. Импортируйте его как import * as contextMenus from 'cytoscape-context-menus';

Если библиотека зависитв некоторых других файлах js или css они должны быть добавлены в angular.json file

0 голосов
/ 21 сентября 2018

Typescript - это расширенный набор Javascript - и любой код, который будет работать как Javascript, будет работать с Typescript.

Проблема, с которой вы сталкиваетесь, заключается в отсутствии правильных определений Typescript для используемой вами библиотеки Javascript.

Насколько я вижу, для DefinitiveTyped нет набора для этого пакета (https://github.com/DefinitelyTyped/DefinitelyTyped) - один вариант - написать несколько и отправить запрос на извлечение. Затем вы можете установить их как пакет npm.@types/cytoscape-cxtmenu после того, как запрос был объединен и опубликован (и до этого времени включал их как файл в ваш проект)

В качестве альтернативы вы можете импортировать библиотеку как любую, например:

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

Это будет означать, что машинопись не будет выполнять никакой проверки типов при взаимодействии с этой библиотекой.

В зависимости от конфигурации вашего проекта машинописи вам может потребоваться сделать что-то вроде этого:

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