'Navigator'类型中不存在属性'share'

Question

我需要在我的Ionic应用程序中使用WebShareAPI.

这是我在介绍Web Share API中建议的代码

if (window.navigator && window.navigator.share) {
  window.navigator.share({
    title: 'title',
    text: 'description',
    url: 'https://soch.in//',
  })
    .then(() => console.log('Successful share'))
    .catch((error) => console.log('Error sharing', error));
} else {
  alert('share not supported');
}

但是,Typescript编译失败,并出现以下错误:

[11:31:11]  typescript: src/pages/channel_home/channel_home.ts, line: 89
            Property 'share' does not exist on type 'Navigator'.

这里有一个可能的原因解释 DOM lib:添加对navigator.share的支持

但是,我想知道一些解决方法,特别是在我的Ionic应用程序中,以及在任何Angular或Typescript应用程序中使WebShareApi工作.

Answer 1

声明navigator为any

(window.navigator as any).share

Answer 2

根据这个答案,您可以尝试定义一个类型的变量,any并为其分配Type Navigator的值.isssue与typeScript类型有关.

let newVariable: any;

newVariable = window.navigator;

if (newVariable && newVariable.share) {
  newVariable.share({
    title: 'title',
    text: 'description',
    url: 'https://soch.in//',
  })
    .then(() => console.log('Successful share'))
    .catch((error) => console.log('Error sharing', error));
} else {
  alert('share not supported');
}

另一种选择是扩展界面导航器,如我在上面发布的链接中所建议的那样.

Answer 3

[2020年更新]

\n

这是在 Typescript 的最新版本中修复的（我不太确定是哪一个，但我猜是从v4.3-beta版本开始）。检查此线程了解详细信息 - https://github.com/microsoft/TypeScript/issues/18642

\n

另外，\n下面分享的示例一旦更新到最新版本将无法工作，因为它与 Typescript 自己的打字冲突。因此，不要应用这些更改或保持与父级类似的类型：

\n

// global.d.ts\ninterface Navigator extends Navigator {\n  share: (options?: ShareData) => Promise<void>;\n}\n

\n

share属性已不再是可选的，根据规范、Firefox 中实现的详细信息、Firefox 中的更改

\n\n

我们可以这样做Typescript：

\n

首先，我们需要为我们的项目定义自定义类型。因此，我们需要在根目录中定义一个/typings或文件夹。/@types

\n

// global.d.ts\ninterface Navigator extends Navigator {\n  share: (options?: ShareData) => Promise<void>;\n}\n

\n

完成此操作后，您需要更新tsconfig.json文件以将新的自定义类型文件夹指向此文件夹。

\n

.\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 typings\n

\n

这将允许 Typescript 在文件夹中查找自定义类型/typings。

\n

以上参考资料：

\n

\n
• Angular 大学 Typescript 打字
\n
• 打字稿文档
\n

\n

完成上述操作后，我们需要创建一个全局.d.ts文件，Typescript 将研究该文件以检测自定义类型。因此，在您的/typings文件夹中创建一个名为global.d.ts.

\n

// global.d.ts\ninterface Navigator extends Navigator {\n  share?: (options: any) => Promise<void>;\n}\n

\n

我们正在做的是Navigator用一些额外的属性来支持覆盖默认值。

\n

一旦声明了上述接口，Typescript 将允许您使用navigator.share，但您需要将其放入条件块内，因为share它是可选属性，它可能会或可能不会出现在浏览器中。

\n

\n
• 关于全局定义的 Typescript 文档
\n

\n

希望这可以帮助！！

\n

Answer 4

这也有效，我们不需要创建newVariable。

if (window.navigator && window.navigator.share) {
  window.navigator['share']({
    title: 'title',
    text: 'description',
    url: 'https://soch.in//',
  })
    .then(() => console.log('Successful share'))
    .catch((error) => console.log('Error sharing', error));
} else {
  alert('share not supported');
}

Answer 5

对于寻找适当答案的任何人，只需将其添加到您的global.d.ts文件中即可：

type ShareData = {
    title? : string;
    text? : string;
    url? : string;
};

interface Navigator
{
    share? : (data? : ShareData) => Promise<void>;
}

这正确反映了1级API。