在 Web Worker 中导入 tensorflow 时出现 Angular 打字稿类型检查问题

Posted

技术标签:

【中文标题】在 Web Worker 中导入 tensorflow 时出现 Angular 打字稿类型检查问题【英文标题】:Angular typescript typecheck issues when importing tensorflow in web worker 【发布时间】:2021-02-12 18:59:30 【问题描述】:

我正在尝试在 Angular 项目的网络工作者中使用 tensorflow/tfjs (TF)。

使用ng generate worker 命令创建一个网络工作者就可以了。

在组件中导入 TF 也可以。

但是在工人中导入 TF 即:

import * as tf from '@tensorflow/tfjs'

通过ng build 命令构建时会产生一堆缺失的定义错误。缺少的类型通常是与 DOM 相关的类型,例如 error TS2304: Cannot find name ImageData | htmlImageElement | HTMLCanvasElement | HTMLVideoElement。 这些类型在 TF 中的某些定义中使用,据我了解,这些类型无法被网络工作者访问,因为 DOM manipulation cannot be done from workers。 我对此非常满意,我对 TF 的使用不依赖于这些类型。但我仍然需要找到一种方法来构建我的工人。

因此,我尝试修改 tsconfig.worker.json 文件。我的第一次尝试是通过在 compilerOptions.lib 数组中添加“dom”来模仿其他 tsconfig* 文件:

["es2018", "webworker"] 

替换为

["es2018", "webworker", "dom"]

这会导致类型定义冲突

error TS6200: Definitions of the following identifiers conflict with those in another file 

webworkerdom 库对相同类型有不同的定义,但我当然不能删除 webworker 库引用。

我的第二次尝试是在tsconfig.worker.json 文件中添加skipTypeCheck 编译器选项: 效果很好,我让 TF 在我的 Web Worker 中运行并输出结果。

但是...

跳过类型检查感觉就像是在破坏使用打字稿的整个想法。所以我的问题是:

有没有一种更简洁的方法可以在 webworker 中以角度使用 TF,同时保留类型检查?

感谢您的回答。如果我应该提供更多配置详细信息,请告诉我。

【问题讨论】:

【参考方案1】:

来自官方TensorFlow教程:https://www.tensorflow.org/js/tutorials/setup

使用 TypeScript 时,如果您的项目使用严格的空值检查,您可能需要在 tsconfig.json 文件中设置 skipLibCheck: true,否则您将在编译期间遇到错误。

这比skipTypeCheck 要好,因为您的代码中的类型仍然会被检查。这样代码可以编译,但你仍然会在控制台中收到错误:Error when getting WebGL context: Error: Cannot create a canvas in this context

但到目前为止,这还不是问题。

【讨论】:

我实际上不使用 WebGL 上下文,所以你的解决方案工作得很好。谢谢

以上是关于在 Web Worker 中导入 tensorflow 时出现 Angular 打字稿类型检查问题的主要内容,如果未能解决你的问题,请参考以下文章

如何使用webpack在web worker中导入wasm?

tensorflow中导入下载到本地的mnist数据集

无法在 vue 测试工具中导入 javascript 文件

如何在 Jmeter 中导入 Web3?

在 Django 模板中导入 Web 组件的推荐方法?

在 expo web 和 nextjs 中导入 expo 字体和资产