类型“EventTarget”上不存在属性“errorCode”

如何解决类型“EventTarget”上不存在属性“errorCode”

我正在制作一个 Service Worker，它有几个使用 IndexDB 的函数。在这些函数中，我收到了这些打字稿错误：

Property 'errorCode' does not exist on type 'EventTarget'

使用 db.onsuccess 和 db.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,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,'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;
        })());
    }
});

解决方法

解开你看到的错误：

Property 'errorCode' does not exist on type 'EventTarget'

这是有道理的，因为通用 EventTarget（例如 DOM 元素）没有 errorCode 属性。但是 Typescript 在这里对您没有帮助，因为当您编写 event.target.result 时，它显然不知道索引数据库对象的特定接口类型是什么。

在这种情况下，这些事件的 target 是一个 IDBRequest 实例...也没有 errorCode 属性。所以无论如何你都会遇到类似的错误。

正如您所发现的，IDBRequest 接口确实有一个 error 属性，它是一个 DOMException。反过来，DOMException 接口具有 code 属性。

也就是说……code 属性已弃用 - 新的 DOMException 类型不定义新代码，因此 code 将始终为 0。应该使用 DOMException 的 name如果您需要消除错误类型的歧义。