Question

我正在使用套餐@types/cropperjs 不幸的是，它落后于当前的cropper.js版本，缺少方法scale。到目前为止，我只是手动将丢失的方法添加到node_modules下的d.ts文件中（这显然是一个坏主意，所以不要这样做！它只是一个临时修复）< / p>

我尝试将node_modules中的定义与我自己的声明合并。

declare class cropperjs {

  /**
   * Scale the image.
   *
   * @param scaleX The scaling factor to apply on the abscissa of the image.
   * When equal to 1 it does nothing. Default is 1
   * @param scaleY The scaling factor to apply on the ordinate of the image.
   * If not present, its default value is scaleX.
   */
   scale(scaleX: number, scaleY?: number): void;
}

export = cropperjs;
export as namespace Cropper;

来自DefinitlyTyped Repo的输入可以是found on github（它看起来很相似但是太大了，无法在这里显示）

以下是我如何在角度分量中导入裁剪器。

import * as Cropper from 'cropperjs';

这是我的tsconfig.json（部分内容）

 "typeRoots": [
  "node_modules/@types",
  "node_modules/@angular",
  "src/typings"
],
"types": [
  "jasmine",
  "node",
  "karma",
  "webpack",
   "cropperjs" 
]

我用我的自定义打字文件夹和trpple斜杠参考符号尝试了它。但我无法弄清楚如何成功合并我的和DefinitlyTyped的定义，这样我就可以使用cropperjs而不必在node_module中摆弄

P.S。我已经在github上打开了更新定义的问题（没有pull请求，因为当时几乎不知道git）。

Answer 1

据我所知，你不能用打字稿做到这一点。 Typescript具有声明合并的概念，这允许我们扩展其他人编写的类型，并且您可以合并接口和命名空间，但不能合并类。看here。

如果使用接口编写@types/cropperjs，您可以使用自己的声明扩展该接口。

这是你现在可以做的丑陋黑客：

import * as Cropper from 'cropperjs';

interface MyCropper extends Cropper {
  scale(scaleX: number, scaleY?: number): void;
}

function CreateCropper(dom: HTMLImageElement, options: Cropper.CropperOptions): MyCropper {
  return new Cropper(dom, options) as MyCropper;
}

铸造总是难看，但至少你把它隐藏在一个地方，我认为这是合理的......

Answer 2

只想添加另一种可能的“解决方案”。我说“解决方案”，因为它在我看来相当丑陋但是又一次是解决方法。

在看到并阅读（参见Aviad Hadad的答案）之后，无法进行课堂合并，请阅读typescripts node module resolution 基本上，如果导入类似import * as Cropper from 'cropperjs的非相对路径，typescript将在名为node_modules的文件夹中查找相应的文件，并从具有import语句的文件所在的目录开始。然后它遍历（例如取自typescript文档）

/root/src/node_modules/moduleB.ts
/root/node_modules/moduleB.ts
/node_modules/moduleB.ts（我假设这是全局的node_modules目录）

由于typescript还会查找d.ts个文件，我从index.d.ts包中复制了整个@types/cropperjs，将其重命名为cropperjs.d.ts并将其放在名为{{的文件夹中1}}。（并添加了遗漏的方法）

如果您使用/root/src/node_modules跟踪分辨率，您会看到该打字稿将从自定义tsc --traceResolution目录中获取d.ts文件。

此解决方案的优势在于您无需触摸代码。只要node_modules更新了丢失的方法，您就可以删除自定义的node_modules目录，所有内容仍然有效。缺点是您必须复制和粘贴代码。

添加缺少方法的输入（来自npm包）

2 个答案: