如何使TypeScript加载包含在cordova插件中的类型定义文件

Question

我在使用TypeScript编写的基于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" 
]

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

---

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

添加：

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

对于cordova-plugin-camera和其他软件包，针对tsconfig.json的设置有效，但是在每个不包含类型的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" />

在我的一个TypeScript文件中添加/// <reference types="cordova-plugin-camera" />可以解决cordova-plugin-camera和所有其他包的问题，而不会引起错误。但是我认为只向任何一个TypeScript文件添加引用（无论哪一个，只要它包含在构建中）似乎不正确。

---

是否有其他我尚未尝试过的方法？如何正确解决这个问题？

- Robin Hartmann

Answer 1

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

默认情况下，只有@types包会自动包含进来，因此如果你使用提供全局声明的非@types包，我想你应该使用/// <reference types="..."/>或import '...'。

- Matt McCutchen

Answer 2

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

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)
})

它像魔法一样运行。

- Caio Santos