如何在Angular 4项目中正确使用GoJS扩展并解决TS2403错误？

我之前在Angular里用GoJS扩展的时候也踩过这个坑，给你梳理下问题原因和解决办法：

问题根源 #

你直接从node_modules路径导入了TableLayout的TS源文件，TypeScript编译时会重新处理这个文件，而该文件内部的一些类型声明和GoJS核心库的类型产生了重复冲突，就抛出了TS2403错误。

正确使用GoJS扩展的步骤 #

1. 确保正确安装GoJS #

首先确认你已经通过npm正确安装了GoJS：

npm install gojs --save

2. 改用模块路径导入扩展 #

不要用相对路径导入node_modules里的TS文件，直接用GoJS提供的模块导入路径，这样会自动使用预编译好的类型文件，避免重复声明：

import * as go from 'gojs';
// 直接用模块路径导入TableLayout
import { TableLayout } from 'gojs/extensionsTS/TableLayout';

3. 正确初始化和使用布局 #

在组件中初始化布局时，记得将其关联到GoJS的Diagram实例（单纯new TableLayout还不够，需要绑定到图表上）：

ngOnInit() {
  // 创建TableLayout实例
  const tableLayout = new TableLayout();
  // 初始化Diagram并设置布局
  const myDiagram = new go.Diagram('your-diagram-div-id', {
    layout: tableLayout
    // 其他图表配置...
  });
}

额外的报错解决方案 #

如果上面的方法还没解决问题，可以试试这两个办法：

• 检查TypeScript版本兼容性：Angular 4对应的TypeScript版本是2.3.x左右，确保你安装的GoJS版本支持这个TS版本（比如GoJS 1.x系列更兼容低版本TS，2.x需要TS 3.5+）。如果版本不匹配，降级GoJS到合适的版本即可。
• 复制扩展文件到项目目录：把node_modules/gojs/extensionsTS/TableLayout.ts复制到你项目的组件目录下，修改文件内的GoJS导入为import * as go from 'gojs';，然后从项目内部路径导入这个文件，避免直接引用node_modules里的源文件。

内容的提问来源于stack exchange，提问作者snowleopard