IndexedDB 类型'EventTarget'上不存在属性'errorCode'

zwghvu4y  于 2022-12-09  发布在  IndexedDB
关注(0)|答案(1)|浏览(300)

我正在创建一个服务工作者,它有几个使用IndexDB的函数。在这些函数中,我遇到了以下类型脚本错误:
Property 'errorCode' does not exist on type 'EventTarget'
使用db.onsuccessdb.onerror
以下是我服务人员代码:

/// <reference no-default-lib="true"/>
/// <reference lib="ES2020" />
/// <reference lib="dom" />
/// <reference lib="dom.iterable" />
/// <reference lib="webworker" />

export type {};
declare const self: ServiceWorkerGlobalScope;

interface AccessCredentials {
    accessToken: string;
    refreshToken: string;
}

async function getAccessCredentials(): Promise<AccessCredentials> {
    const databaseName = 'BATAccessTokens';
    const databaseStore = 'BATAccessTokens';
    return new Promise((resolve, reject) => {
        const dbrequest = indexedDB.open(databaseName, 1);
        dbrequest.onupgradeneeded = (event) => {
            const database = dbrequest.result;
            database.createObjectStore(databaseStore, { autoIncrement: true });
            database.onerror = () =>
                reject(`ERROR:  ${event.target.errorCode}`);
        };
        dbrequest.onerror = (event) =>
            reject(`ERROR:  ${event.target.errorCode}`);
        dbrequest.onsuccess = (event) => {
            const database = dbrequest.result;
            const transaction = database.transaction(databaseStore, 'readwrite');
            const store = transaction.objectStore(databaseStore);
            const request = store.get(1);
            request.onsuccess = () => {
                if (request.result) resolve(request.result);
                resolve(null);
            };
            transaction.oncomplete = () => database.close();
            database.onerror = () => resolve(null);
        };
    });
}

async function putAccessCredentials(credentials: AccessCredentials) {
    const databaseName = 'BATAccessTokens';
    const databaseStore = 'BATAccessTokens';
    return new Promise((resolve, reject) => {
        const dbrequest = indexedDB.open(databaseName, 1);
        dbrequest.onupgradeneeded = () => {
            const database = dbrequest.result;
            database.createObjectStore(databaseStore, { autoIncrement: true });
            database.onerror = (event) =>
                reject(`ERROR:  ${event.target.errorCode}`);
        };
        dbrequest.onerror = (event) =>
            reject(`ERROR:  ${event.target.errorCode}`);
        dbrequest.onsuccess = (event) => {
            const database = dbrequest.result;
            const transaction = database.transaction(databaseStore, 'readwrite');
            const store = transaction.objectStore(databaseStore);
            const request = store.put(credentials, 1);
            request.onsuccess = () => resolve(credentials);
            transaction.oncomplete = () => database.close();
            database.onerror = () =>
                reject(`ERROR:  ${event.target.errorCode}`);
        };
    });
}

async function putRBDSCode(RBDSCode) {
    const databaseName = 'BATRBDSCode';
    const databaseStore = 'BATRBDSCode';
    return new Promise((resolve, reject) => {
        const dbrequest = indexedDB.open(databaseName, 1);
        dbrequest.onupgradeneeded = () => {
            const database = dbrequest.result;
            database.createObjectStore(databaseStore, { autoIncrement: true });
            database.onerror = (event) =>
                reject(`ERROR:  ${event.target.errorCode}`);
        };
        dbrequest.onerror = (event) =>
            reject(`ERROR:  ${event.target.errorCode}`);
        dbrequest.onsuccess = (event) => {
            const database = dbrequest.result;
            const transaction = database.transaction(databaseStore, 'readwrite');
            const store = transaction.objectStore(databaseStore);
            const request = store.put(RBDSCode, 1);
            request.onsuccess = () => resolve(RBDSCode);
            transaction.oncomplete = () => database.close();
            database.onerror = () =>
                reject(`ERROR:  ${event.target.errorCode}`);
        };
    });
}

async function getClientList(): Promise<readonly WindowClient[]> {
    const clientList = await self.clients.claim().then(() =>
        self.clients.matchAll({
            type: 'window'
        })
    );
    return clientList;
}

self.addEventListener('install', (event) => {
    console.log('Service Worker installed');
});

self.addEventListener('activate', (event) => {
    console.log('Service Worker activated');
});

self.addEventListener('fetch', (event) => {
    if (event.request.method === 'GET' && event.request.mode === 'navigate') {
        let request = event.request;
        // console.log({request});

        event.waitUntil(getClientList());

        event.respondWith((async () => {

            const clientList = await getClientList();
            const client = clientList.find((item) => item.visibilityState === 'visible');
            const url = client && new URL(client.url);
            const rbdsCode = url && url.searchParams.get('RBDSCode');
            const credentials = await getAccessCredentials();

            const dppRequest = false;
            const rbdsRequest = !!rbdsCode && !dppRequest;

            if (rbdsRequest && !credentials) {
                // console.log(client);
                // client.navigate('/forms/login.html').then(() => client.focus())
                request = new Request(`http://localhost:3000/forms/login.html`);
            }

            if (request && credentials) {
                // do something
            }

            if (dppRequest) {
                // handle dpp request
            }

            if (credentials) request = new Request(request, {
                headers: {
                    ...request.headers,
                    Authorization: `Bearer ${credentials.accessToken}`
                }
            });

            const eventResponse = await fetch(request).then((response) => {
                let accessToken, refreshToken;
                for (const header of response.headers.entries()) {
                    if (header[0] === 'accesstoken') accessToken = header[1];
                    if (header[0] === 'refreshtoken') refreshToken = header[1];
                }
                accessToken && refreshToken && putAccessCredentials({ accessToken, refreshToken });
                return response;
            });

            return eventResponse;
        })());
    }
});
ss2ws0br

ss2ws0br1#

解压缩您看到的错误:
Property 'errorCode' does not exist on type 'EventTarget'
这是有道理的,因为一般的EventTarget(例如DOM元素)没有errorCode属性。但是Typescript在这里没有帮助,因为当您编写event.target.result时,它显然不知道索引DB对象的具体接口类型是什么。
在本例中,这些事件的target是一个IDBRequest示例...它 * 也 * 没有errorCode属性。因此,无论如何,您都会得到类似的错误。
正如您所发现的,IDBRequest接口 * 确实 * 有一个属于DOMException的error属性,而DOMException接口有一个code属性。
也就是说...... code属性已过时-新的DOMException类型不会定义新代码,因此code将始终为0。如果需要消 debugging 误类型的歧义,则应改用DOMException的name

相关问题