如何让 TypeScript 加载包含在 cordova 插件中的类型

Posted 2023-03-13

【中文标题】如何让 TypeScript 加载包含在 cordova 插件中的类型

【英文标题】：How to get TypeScript to load typings included with a cordova plugin

【发布时间】：2019-01-26 14:01:49

【问题描述】：

我在使用 TypeScript (3.0.1) 编写的基于 cordova 的应用程序中使用 cordova-plugin-camera，我希望能够看到该插件的类型。

所以我使用 npm 安装包 @types/cordova-plugin-camera。在安装过程中，npm 显示WARN deprecated 解释这个@types 包是不需要的，因为类型已经包含在包cordova-plugin-camera 中。因此，我再次删除了包。

然后我开始编译，但它以error TS2339: Property 'camera' does not exist on type 'Navigator' 失败。我的理解是，这应该开箱即用（至少对于@types 包），但TypeScript 似乎不知道它应该直接包含来自cordova-plugin-camera 的类型。这似乎合乎逻辑，因为我没有明确的声明告诉import 'cordova-plugin-camera'，但没有必要，因为我只使用由cordova加载的全局可用对象。

如何让 TypeScript 直接从 cordova-plugin-camera 加载类型？

---

我已经尝试过的可能解决方案

---

???? import 'cordova-plugin-camera'

在我的情况下不起作用，因为我从事的项目很旧并且不支持模块。它只使用outFile 和"module": "none" 生成一个文件。

---

⚠️ 在tsconfig.json 中使用types 属性

添加

"types": [ 
  "cordova-plugin-camera" 
]

to tsconfig.json 适用于 cordova-plugin-camera，但会导致 TypeScript 停止为所有其他包加载类型，因此我必须将每个带有类型的包添加到我的 tsconfig.json。

---

⚠️ 在tsconfig.json 中使用typeRoots 属性

添加

"typeRoots": [
  "./node_modules/@types",
  "./node_modules/cordova-plugin-camera"
]

to tsconfig.json 适用于 cordova-plugin-camera 和其他包，但在构建过程中会导致 cordova-plugin-camera 中不包含类型的每个文件夹的选项错误：

error TS2688: Cannot find type definition file for '.github'.
error TS2688: Cannot find type definition file for 'appium-tests'.
error TS2688: Cannot find type definition file for 'doc'.
error TS2688: Cannot find type definition file for 'jsdoc2md'.
error TS2688: Cannot find type definition file for 'src'.
error TS2688: Cannot find type definition file for 'tests'.
error TS2688: Cannot find type definition file for 'www'.

使用./node_modules/cordova-plugin-camera/types 而不是./node_modules/cordova-plugin-camera 会导致TypeScript 找不到类型，使用./node_modules 会导致每个没有类型的包出现选项错误。

---

✅使用/// <reference types="cordova-plugin-camera" />

将/// <reference types="cordova-plugin-camera" /> 添加到我的TypeScript 文件之一适用于cordova-plugin-camera 和所有其他包而不会导致错误。但是添加对任何一个 TypeScript 文件的引用（不管是哪个，只要它包含在构建中）对我来说似乎不合适。

---

还有其他方法我还没有尝试过吗？ 解决这个问题的正确方法是什么？

【参考方案1】：

我的项目在 Angular 中，并使用 Cordova 为设备打包。我必须在 Angular 和 Cordova 这两个项目中导入该库。我没有找到好的和干净的选项，所以我放弃了打字并使用了“声明”：

declare var Camera: any
declare var navigator: any

export const getPicture = () => new Promise((resolve, reject) => 
    const options = 
        quality: 50,
        destinationType: Camera.DestinationType.DATA_URL
    
    navigator.camera.getPicture(resolve, reject, options)
)

它就像一个魅力。

【参考方案2】：

我相信/// <reference types="cordova-plugin-camera" /> 是正确的方法。对于不使用模块的项目，您可以将其视为 import 'cordova-plugin-camera' 的类似物。在任何一种情况下，您都必须任意选择一个文件来保存指令（或者如果您愿意，您可以将它放在多个文件中；这没有区别）。

开箱即用，only @types packages are automatically included，所以如果你使用提供全局声明的非@types 包，我猜你应该使用/// <reference types="..."/> 或import '...'。