Question

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

中建议的代码

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

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

Answer 1

基于此answer，您可以尝试定义类型为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 2

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

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

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

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

这正确反映了1级API。

Answer 4

这对我有用

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 5

在我的情况下：在Angular中，我使用的模块是

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

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

我使用以下方式修复了

declare const navigator: any;

也许相同的方法对您有用：

Answer 6

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

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

.
└── typings

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

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

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

以上参考：

完成上述操作后，我们需要创建一个全局.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

Answer 9

const share = await (navigator as any).share(shareOptions);

财产＆＃39;分享＆＃39;类型＆＃39; Navigator＆＃39;中不存在

9 个答案: