typescript TS2339:类型“Navigator”上不存在属性“contacts”

stszievb  于 2023-02-25  发布在  TypeScript
关注(0)|答案(2)|浏览(362)

我正在尝试建立一个联系人应用程序,使用Apache Cordova插件的联系人。当尝试做一个npm run bundle命令我的应用程序,它给我上面的标题错误。我该如何解决这个问题?
我试过将我的package.json中的依赖项更新到不同的版本,我也试过摆脱我的tsconfig.webpack.json中的"module": "commonjs",但没有成功。

===========
// index.ts
===========

export class CordovaApp{
    constructor(){
        document.getElementById('findContactButton').addEventListener('click', this.onfindContactButtonClick);
    }

    onfindContactButtonClick(){
        const searchText = (<HTMLInputElement>document.getElementById('searchText')).value;
        let fields = [navigator.contacts.fieldType.displayName, navigator.contacts.fieldType.name];

        navigator.contacts.find(fields, (contacts) => {
            var ul = document.getElementById('contacts');
            contacts.forEach(function (contact) {
                var li = document.createElement('li');
                li.className = 'collection-item';
                li.innerText = contact.displayName;
                ul.appendChild(li);
            });
        }, (error) => {
            alert(error);
        },
        {
            filter: searchText, multiple: true,
            desiredFields: [navigator.contacts.fieldType.displayName]        
        });

        return false;
    }
}

let instance = new CordovaApp()
===========
// index.js
===========
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var CordovaApp = (function () {
    function CordovaApp() {
        document.getElementById('findContactButton').addEventListener('click', this.onfindContactButtonClick);
    }
    CordovaApp.prototype.onfindContactButtonClick = function () {
        var searchText = document.getElementById('searchText').value;
        var fields = [navigator.contacts.fieldType.displayName, navigator.contacts.fieldType.name];
        navigator.contacts.find(fields, function (contacts) {
            var ul = document.getElementById('contacts');
            contacts.forEach(function (contact) {
                var li = document.createElement('li');
                li.className = 'collection-item';
                li.innerText = contact.displayName;
                ul.appendChild(li);
            });
        }, function (error) {
            alert(error);
        }, {
            filter: searchText, multiple: true,
            desiredFields: [navigator.contacts.fieldType.displayName]
        });
        return false;
    };
    return CordovaApp;
}());
exports.CordovaApp = CordovaApp;
var instance = new CordovaApp();
//# sourceMappingURL=index.js.map
===========
// package.json
===========
"dependencies": {
        "cordova-android": "^6.2.3",
        "cordova-browser": "^4.1.0",
        "cordova-ios": "^4.4.0",
        "cordova-plugin-compat": "^1.0.0",
        "cordova-plugin-contacts": "^3.0.1",
        "cordova-plugin-whitelist": "^1.3.2"
    },
    "devDependencies": {
        "@types/cordova": "^0.0.34",
        "@types/cordova-plugin-contacts": "^2.3.0",
        "typescript": "^2.4.1",
        "webpack": "^1.14.0",
        "webpack-dev-server": "^1.16.2",
        "ts-loader": "1.3.3",
        "html-loader": "0.4.4",
        "css-loader": "0.26.1",
        "awesome-typescript-loader": "^3.2.1"
    }
===========
// Running Command prompt
===========
npm run bundle

[at-loader] Checking started in a separate process...

[at-loader] Checking finished with 4 errors
Hash: 52c5912a7e1b4f149e40
Version: webpack 1.15.0
Time: 1014ms
               Asset     Size  Chunks             Chunk Names
./www/dist/bundle.js  7.51 kB       0  [emitted]  main
    + 1 hidden modules

ERROR in [at-loader] ./www/js/index.ts:8:33
    TS2339: Property 'contacts' does not exist on type 'Navigator'.

ERROR in [at-loader] ./www/js/index.ts:8:75
    TS2339: Property 'contacts' does not exist on type 'Navigator'.

ERROR in [at-loader] ./www/js/index.ts:10:19
    TS2339: Property 'contacts' does not exist on type 'Navigator'.

ERROR in [at-loader] ./www/js/index.ts:23:39
    TS2339: Property 'contacts' does not exist on type 'Navigator'.

代码应该正确绑定,并且应该没有错误。

70gysomp

70gysomp1#

我知道这是个老问题,但不管是谁在谷歌上搜索:
在项目的src文件夹中创建一个包含以下内容的global.d.ts文件:

declare interface Navigator extends NavigatorExtended {}

interface NavigatorExtended {
    readonly contacts: ContactsManager;
}
// I use only name and tel, but feel free to adjust it https://w3c.github.io/contact-picker/#contacts-manager
type IContact = {
    name: string[],
    tel: string[],
}
interface ContactsManager {
    getProperties(): Promise<string[]>;
    select(properties: string[], options?: any): Promise<IContact[]>;
}

它将扩展导航器类型并使TS编译器满意:)

bvuwiixz

bvuwiixz2#

您必须将以下行添加到“files”属性中的src/tsconfig.json:

"../plugins/cordova-plugin-contacts/types/index.d.ts"

之后,您必须重新启动正在运行的“ionic serve”命令(或只是重建它)。
src/tsconfig.json文件最后应如下所示:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/spec",
    "types": [
      "jasmine",
      "node"
    ]
  },
  "files": [
    "test.ts",
    "polyfills.ts",
    "../plugins/cordova-plugin-contacts/types/index.d.ts"
  ],
  "include": [
    "**/*.spec.ts",
    "**/*.d.ts"
  ]
}

我希望这对你有帮助。请注意,这是离子4的溶液。离子3或更低可能会有所不同。

相关问题