安装@type/vis 和 vis 后定义 DataView 时发生冲突

Question

js 和 angular 在我的网页上显示一些图表。我安装了

npm install vis 
npm install @type/vis

但我发现两者都有一个名为DataView的功能。我想用vis的DataView但是好像angular会自动找到@type/vis.

的DataView

我的代码是这样的：


import { Component, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
import { Network, DataSet, DataView} from 'vis';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']

})
export class TestComponent implements AfterViewInit {
  @ViewChild('network', {static: false}) el: ElementRef;
  @ViewChild('nodeFilterSelect', {static:false}) nodeFilter: ElementRef;
  @ViewChild('edgesFilter', {static: false}) edgeFilter: ElementRef;
  private networkInstance: any;

  ngAfterViewInit() {
    const nodes_set = new DataSet<any>([
        { id: 1, label: 'Eric Cartman', age: 'kid', gender: 'male' },
        { id: 2, label: 'Stan Marsh', age: 'kid', gender: 'male' },
        { id: 3, label: 'Wendy Testaburger', age: 'kid', gender: 'female' },
        { id: 4, label: 'Mr Mackey', age: 'adult', gender: 'male' },
        { id: 5, label: 'Sharon Marsh', age: 'adult', gender: 'female' }
    ]);

    const edges_set = new DataSet<any>([
        { from: 1, to: 2, relation: 'friend', arrows: 'to, from', color: { color: 'red'} },
        { from: 1, to: 3, relation: 'friend', arrows: 'to, from', color: { color: 'red'} },
        { from: 2, to: 3, relation: 'friend', arrows: 'to, from', color: { color: 'red'} },
        { from: 5, to: 2, relation: 'parent', arrows: 'to', color: { color: 'green'} },
        { from: 4, to: 1, relation: 'teacher', arrows: 'to', color: { color: 'blue'} },
        { from: 4, to: 2, relation: 'teacher', arrows: 'to', color: { color: 'blue'} },
        { from: 4, to: 3, relation: 'teacher', arrows: 'to', color: { color: 'blue'} },
    ]);


    const nodesView = new DataView(nodes_set, {})
    const edgesView = new DataView(edges_set, {})



    const container = this.el.nativeElement;


     const data = { nodes: nodes_set, edges: edges_set };
 [![enter image description here][1]][1]
     this.networkInstance = new Network(container, data, {});

  }
}

你可以看到我从 vis 中导入了 DataView，但是我们把光标放在了 DataView 上，就像这样：

@type/vis 中的 DataView 是：

export class DataView<T extends DataItem | DataGroup> {
  length: number;
  constructor(items: T[]);
}

看来 angular 找到了 @type/vis 的数据视图，即使我从 vis 导入它怎么解决？？

Answer 1

这就是类型的工作原理。他们确保您编写正确的代码。 @types 中的包为 vis 包添加类型提示，它不提供自己的类型。要修复您的错误，您需要传递一个数组，而不是一个对象：

~~const nodesView = new DataView(nodes_set); const edgesView = new DataView(edges_set);~~

我深入研究了一下，发现包 vis 已被弃用，不再维护。此外，不应再使用 @types/vis，因为新项目 vis.js 提供了自己的类型。因此，要开始行动，您需要执行以下操作：

npm r vis @types/vis
npm i vis-data

然后您将正确输入包。例如 DataView 构造函数具有以下类型：

constructor(data: DataInterface<Item, IdProp>, options?: DataViewOptions<Item, IdProp>);

因此您可以保持代码不变：

const nodesView = new DataView(nodes_set, {});
const edgesView = new DataView(edges_set, {});

其中第二个参数 DataViewOptions 具有以下类型：

export interface DataViewOptions<Item, IdProp extends string> {
  fieldId?: IdProp;
  filter?: (item: Item) => boolean;
}

附带说明一下，我看到您正在使用 angular，vis 包也有自己的 angular 包装器。也许你可以看看它是否适合你的项目：https://github.com/visjs/ngx-vis

安装@type/vis 和 vis 后定义 DataView 时发生冲突

conflicts when defining DataView after installed @type/vis and vis

vis.js

angular