“导航器”类型上不存在属性“共享”

Question

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

这是我在Introducing the 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: add support for navigator.share

但是，我想知道一些解决方法，以使 WebShareApi 特别适用于我的 Ionic 应用程序，以及一般的任何 Angular 或 Typescript 应用程序。

Answer 1

基于这个answer， 您可以尝试定义any 类型的变量并将您的Type Navigator 值分配给它。该问题与 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 2

这对我有用

let newVariable = (window.navigator as any)
if(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

这也有效，我们不需要创建 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 4

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

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

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

这恰当地反映了 1 级 API。

Answer 5

就我而言：在 Angular 中，在我使用的模块上：

navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia;

并且打字稿显示错误 MozGetUserMedia 不是属性。

我修复了：

declare const navigator: any; 

也许同样的方法也适合你：

Answer 6

[2020 年更新]

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

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

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

share 属性已从可选中删除，根据规范，详细信息implemented in Firefox、changes in Firefox

---

我们可以通过Typescript 方式做到这一点：

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

.
└── typings

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

{
  "compilerOptions": {
    ...
    "typeRoots": [
      "./node_modules/@types",
      "./typings"
    ]
  },
  "include": [
    ...
    "typings",
    "**/*.ts",
    "**/*.tsx"
  ]
  ...
}

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

以上参考：

• Angular University Typescript Typings
• Typescript Docs

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

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

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

一旦你声明了上面的接口，Typescript 将允许你使用navigator.share，但是你需要把它放在一个条件块中，因为share 是可选属性，它可能存在也可能不存在于浏览器中。

• Typescript Docs on Global Definitions

希望这会有所帮助！

Answer 7

如果您仍然收到错误消息，尽管遵循了本网站上的建议，请确保您的页面是通过 https 的服务器。共享功能在普通 http 上不可用。以下剪辑对我有用。

const nav: any = window.navigator;
nav.share({ title: "Shared via my https page", url: "relativeLink" })

Answer 8

将navigator 声明为any

(window.navigator as any).share