错误 TS2339：“导航器”类型上不存在属性“连接”答案

【问题标题】：Error TS2339: Property 'Connection' does not exist on type 'Navigator'错误 TS2339：“导航器”类型上不存在属性“连接”
【发布时间】：2016-11-17 22:19:15
【问题描述】：

很简单的问题

我正在尝试 ang 2 和 ionic 2。

使用以下代码 -

主文件 -

/// <reference path="../../../node_modules/@angular/platform-browser/src/browser.d.ts" />


import {Component} from '@angular/core';
import {Platform} from 'ionic-angular';
import {NavController} from 'ionic-angular';
import {Network} from 'ionic-native'

@Component({
  templateUrl: 'build/pages/items-map/items-map.html'
})
export class ItemsMap {

  constructor(private platform : Platform) {
    console.log(navigator.Connection);
  }

}

现在每当我使用 gulp build 构建项目时，我都会得到 -

错误 TS2339：“导航器”类型上不存在属性“连接”。

有什么帮助吗？我知道记录了一些更多类似的问题，但没有一个有任何明确的答案

【问题讨论】：

你可以使用console.log(navigator.connection.type);也许它有效！我也是 Ionic2 和 ag2 的新手:)
它仍然给出同样的错误
你会在点击按钮时检查网络吗？？
现在直接在构造函数中尝试，但没有得到它..也在实际设备上尝试过.. ????
好吧...我只是给你一个链接来让你更喜欢..我不会检查但你可能更喜欢并且可能你得到了你需要的东西。链接：thepolyglotdeveloper.com/2016/01/…

标签： typescript ionic2

【解决方案1】：

这是 TypeScript 定义问题。它需要插件的 TypeScript 定义。使用 npm 安装。

npm install @types/cordova-plugin-network-information --save

如果不起作用，请尝试Network.type 而不是navigator.connection。

【讨论】：

在组件中使用网络实例有助于获取信息。

【解决方案2】：

如果您将其更改为“navigator['connection']”可能会解决问题，或者按照某人的建议“navigator.type”。但是我在您的代码中看到了一个小问题，您没有声明“navigator”！我建议你在@Component decorator上面做，添加如下：

declare var navigator; 
@Component decorator({
           .....
})

然后改成“navigator.type”或“navigator['connection']，随便你！

希望这会有所帮助。

【讨论】：

这是不正确的，因为navigator 默认在window (developer.mozilla.org/en-US/docs/Web/API/Navigator) 上

【解决方案3】：

您似乎已经在导入Network 类，因此您可以通过调用Network.connection 来获取连接类型。此属性的基础代码将返回 navigator.connection.type。

因为这样你是通过 Ionic 的 TypeScript 声明类 (network.d.ts) 访问它，所以错误将不再发生。

注意，使用 Network 类时，请务必将 Cordova 插件 cordova-plugin-network-information 添加到您的 config.xml 文件中。

示例

import {Component} from '@angular/core';
import {Platform} from 'ionic-angular';
import {NavController} from 'ionic-angular';
import {Network} from 'ionic-native'

@Component({
  templateUrl: 'build/pages/items-map/items-map.html'
})
export class ItemsMap {

  constructor(private platform : Platform) {
    console.log(Network.connection);
  }
}

【讨论】：

【解决方案4】：

您可以基于W3C Spec Draft 为Network Information API 创建自定义类型定义。

2020 年 5 月 11 日社区小组报告草案用于以下 sn-p，saveData 属性来自 2022 年 1 月 12 日社区小组报告草案。

// network-information-api.d.ts
declare interface Navigator extends NavigatorNetworkInformation {}
declare interface WorkerNavigator extends NavigatorNetworkInformation {}
declare interface NavigatorNetworkInformation {
  readonly connection?: NetworkInformation
}
type Megabit = number
type Millisecond = number
type EffectiveConnectionType = '2g' | '3g' | '4g' | 'slow-2g'
type ConnectionType =
  | 'bluetooth'
  | 'cellular'
  | 'ethernet'
  | 'mixed'
  | 'none'
  | 'other'
  | 'unknown'
  | 'wifi'
  | 'wimax'
interface NetworkInformation extends EventTarget {
  readonly type?: ConnectionType
  readonly effectiveType?: EffectiveConnectionType
  readonly downlinkMax?: Megabit
  readonly downlink?: Megabit
  readonly rtt?: Millisecond
  readonly saveData?: boolean
  onchange?: EventListener
}

#44842 中添加了对 TypeScript 中网络信息 API 的原生支持，但属性有限。

【讨论】：