如何在使用之前检查打字稿中是否存在DOM函数

Question

我想写

if(navigator.share)
{
    navigator.share(...);
}

但是typescript编译器返回以下错误：在导航器中找不到属性共享。

Navigator.share是一些浏览器的功能，而其他浏览器则没有。如何编写我的打字稿，以便在检查仍在进行时编译器不再出错？

Answer 1

你可以这样做：

    if (navigator['share']) {
        const share = navigator['share'];
        share();
        console.log(navigator['share']);    
    }

@cyrix继续坚持认为此代码会引发编译错误。它不会。这是运行代码的屏幕截图

Answer 2

有多个选项可以检查对象上是否存在属性：

1。如果您想检查对象拥有您使用的属性：

if(navigator.hasOwnProperty('share')) {
  // ...
}

2. 如果您想检查某个属性是否属于您使用的prototype对象的一部分：

if(Object.getPrototypeOf(navigator).hasOwnProperty('share')) {
  // ...
}

  

注意：navigator.__proto__.hasOwnProperty也可以是一个选项，但自ECMAScript2015规范以来它只是可靠的。

3. 如果您想检查您使用的对象上是否存在属性：

if(navigator['share']) {
  // ...
}

在调用之前，您可能需要检查其类型是否为typeof Function。

因此，在您的情况下，如果share属于Navigator.prototype，则应使用第二个选项。您还必须告诉typescript导航器具有share方法，因为如果设置navigator['share']()选项，noImplicitAny将失败。

if (Object.getPrototypeOf(navigator).hasOwnProperty('share')) {
  if(typeof (navigator as Navigator & { share: Function }).share === typeof Function) {
    (navigator as Navigator & { share: Function }).share()
  }
}

对于TypeScript编译器，(navigator as Navigator & { share: Function }).share()部分是重要的部分。

或者您可以为实验Navigator.share方法声明自己的全局类型：

type ExperimentalNavigatorShare = (data:
        { url: string, text?: string, title?: string }
        | { url?: string, text: string, title?: string }
        | { url?: string, text?: string, title: string }
) => void;

declare type ExperimentalNavigator = Navigator & {
    share: ExperimentalNavigatorShare
}