如何解决@flowable/work-views库的TypeScript编译错误？

问题描述 #

我正在将@flowable/work-views中的FlowableFlowApp React组件集成到Web应用中以打开Flowable应用视图。执行npm run server可成功显示空白应用视图（符合当前预期），但命令行中出现以下错误：

ERROR in node_modules/@flowable/work-views/typings.d.ts(6,13): error TS1005: ‘=’ expected.
node_modules/@flowable/work-views/typings.d.ts(6,35): error TS1005: ‘;’ expected.

执行生产模式下的npm run build时也会出现相同错误。

我的环境配置为React 16、Flowable 3.13和TypeScript 3.2.4，由于应用规模大且依赖繁多，无法升级React和TypeScript。Web应用部署需同时打包React和Angular代码，解决这些错误对Flowable应用视图的功能至关重要。

已尝试的排查步骤：参考node_modules/@flowable/work-views目录下的package.json文件，安装了其中列出的所有依赖、开发依赖和对等依赖，但问题仍未解决。

可行解决方案 #

1. 跳过目标包的类型检查 #

TypeScript 3.2.4不支持较新版本TS的类型语法（比如typings.d.ts中可能使用了TS3.4+才支持的类型导入或声明语法），可以通过tsconfig.json配置跳过该包的类型检查：

• 全局跳过第三方库类型检查（简单直接）：

{
  "compilerOptions": {
    // 保留原有其他配置
    "skipLibCheck": true
  }
}

• 精准跳过单个包（避免影响其他库）：

{
  "exclude": [
    "node_modules/@flowable/work-views/typings.d.ts"
  ]
}

2. 修改类型文件并打补丁（持久化方案） #

直接修改node_modules/@flowable/work-views/typings.d.ts第6行的语法，适配TS3.2.4：

1. 打开该文件查看第6行内容，通常是语法不兼容问题（比如TS3.2不支持的import()类型引用、新类型别名写法等），将其改为TS3.2可识别的语法。例如把export type X = typeof import('./file').X改为使用require的写法，或者调整声明方式。
2. 为了避免每次npm install后修改被覆盖，使用patch-package工具打持久化补丁：
   • 安装依赖：npm install patch-package --save-dev
   • 修改完typings.d.ts后，执行：npx patch-package @flowable/work-views
   • 在package.json的scripts中添加："postinstall": "patch-package"，确保每次安装依赖后自动应用补丁。

3. 调整TypeScript编译配置 #

检查tsconfig.json的编译选项，确保启用兼容TS3.2的设置：

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "lib": ["es2015", "dom"],
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    // 如果严格模式触发额外问题，可临时关闭或调整具体规则
    "strict": false
  }
}

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