我正在创建一个服务工作者,它有几个使用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, 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;
})());
}
});
1条答案
按热度按时间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
。