3

得到错误

错误 TS2304：找不到名称“ClipboardItem”

尝试创建ClipboardItemfor时navigator.clipboard.write()。

const clipboardItemInput = new ClipboardItem({'image/png' : blobInput});
 await navigator.clipboard.write([clipboardItemInput]);

我正在使用 Angular 6。我需要添加任何依赖项，还是有任何其他方法？

4

3 回答 3

4

对于 TypeScript 4.4 及更高版本

TypeScript 4.4更新了标准定义库，缺少接口和方法（完整的更改列表），所以一切都应该开箱即用。以下示例代码现在无需额外的接口/声明合并即可编译：

declare const image: ClipboardItemData;
(async () => {
  const item = new ClipboardItem({ "image/png": image });

  const files = await navigator.clipboard.read();
  if( files.length ) return;

  await navigator.clipboard.write([item]);
})();

操场

对于 TypeScript 4.3 及更低版本

截至 2021 年，TypeScript 标准库仍然缺少剪贴板 API 的定义（这就是“找不到名称 'ClipboardItem'”错误的原因）。源存储库上有一个未解决的问题，并且 DOM lib 生成器存储库上有一个拉取请求（因为标准库是自动生成的），应该可以解决这个问题。

同时，您可以添加以下与标准库定义其他全局接口的方式相匹配的定义（不要忘记/// <reference types="../../index" />在导入文件的顶部添加三斜杠指令）：

interface ClipboardItem {
  readonly types: string[];
  readonly presentationStyle: "unspecified" | "inline" | "attachment";
  getType(): Promise<Blob>;
}

interface ClipboardItemData {
  [mimeType: string]: Blob | string | Promise<Blob | string>;
}

declare var ClipboardItem: {
  prototype: ClipboardItem;
  new (itemData: ClipboardItemData): ClipboardItem;
};

请注意，ClipboardItemData定义为采用Blob,string或返回前者之一的承诺，而不仅仅是 a Blob（参见MDN 参考，例如）。Clipboard用缺少的read和write方法来增加接口也没有什么坏处：

interface Clipboard {
  read(): Promise<DataTransfer>;
  write(data: ClipboardItem[]): Promise<void>;
}

最后，让我们测试一下定义是否按预期工作：

declare const image: Blob;
(async () => {
  const item = new ClipboardItem({ ["image/png"]: image });

  const { files } = await navigator.clipboard.read();
  if( files.length ) return;

  await navigator.clipboard.write([item]);
})();

操场

于 2021-05-23T16:02:27.750 回答
2

Typescript 版本可能未包含所有功能。这是我们需要通过创建类型或扩展现有类型来扩展它的地方。要解决此问题，请尝试创建一个types.d.ts文件（reference1）并将以下内容放入其中：

declare class ClipboardItem {
  constructor(data: { [mimeType: string]: Blob });
}

然后在您的组件代码中引用该文件：

/// <reference path="types.d.ts" />

然后随意使用该类。

const item = new ClipboardItem({ "image/png": blob });
window.navigator['clipboard'].write([item]);

灵感：参考2

于 2020-04-29T15:23:25.210 回答
0

简单但不是很好

let anyNavigator: any;
anyNavigator = window.navigator;
const clipboardItemInput = new ClipboardItem({'image/png' : blobInput});
await anyNavigator.clipboard.write([clipboardItemInput]);

如果您想read clipboard或调用任何具有返回值的函数：

let anyNavigator: any;
anyNavigator = window.navigator;
(anyNavigator.clipboard.readText() as Promise<string>).then(data => {
// ...
});
于 2021-08-03T19:32:17.210 回答