在Angular NX项目中导入无TS类型声明的JS模块报错如何解决

方案1：优先安装社区维护的类型包 #

执行如下命令安装官方维护的类型定义，多数常用库都有对应的类型包：
npm i --save-dev @types/cytoscape @types/cytoscape-context-menus
如果安装成功后编译不再报错，无需后续操作。如果提示找不到对应@types包，走下方手动声明方案。

方案2：手动添加类型声明（无官方类型包时使用） #

• 第一步：在项目对应业务模块的根目录下新建types文件夹，在文件夹内新建cytoscape-context-menus.d.ts声明文件，写入如下内容：

declare module 'cytoscape-context-menus' {
  const plugin: (cytoscape: any) => void;
  export default plugin;
}

如果不需要细化类型，直接写const content: any; export default content;也可以解决报错。

• 第二步：修改TypeScript配置，让Nx识别自定义声明文件。找到对应模块的配置文件（应用模块改tsconfig.app.json，公共库模块改tsconfig.lib.json），新增如下配置：

{
  "compilerOptions": {
    // 保留原有配置不变，新增以下两项
    "typeRoots": ["node_modules/@types", "types"],
    "allowSyntheticDefaultImports": true
  },
  "include": [
    // 保留原有include规则不变，新增以下规则
    "types/**/*"
  ]
}

Nx默认只会加载node_modules/@types下的类型定义，添加上述配置后才会扫描你自定义的types文件夹内的声明文件。

• 第三步：正常导入注册插件即可：

import cytoscape from 'cytoscape';
import cytoscapeContextMenus from 'cytoscape-context-menus';

// 注册插件到cytoscape实例
cytoscape.use(cytoscapeContextMenus);

临时规避方案 #

如果只需要临时跑通编译，可以在导入语句上方加忽略类型检查的注释：

// @ts-ignore
import cytoscapeContextMenus from 'cytoscape-context-menus';

该方案不推荐长期使用，仅适合临时验证功能场景。

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