IndexedDB onupgradeneeded中result属性不存在TypeScript错误排查

问题背景 #

在TypeScript中编写IndexedDB升级逻辑时，onupgradeneeded回调里通过event.target?.result获取数据库实例会触发如下类型错误：

Property 'result' does not exist on type 'EventTarget'.ts(2339)

这是因为TypeScript默认将event.target推断为通用EventTarget类型，但实际上它是IDBOpenDBRequest实例——该实例继承自IDBRequest，自带result属性。

解决方案 #

1. 类型断言明确类型

直接将event.target断言为IDBOpenDBRequest，告诉TypeScript它的实际类型：

const request = window.indexedDB.open("MyTestDatabase", 3);

request.onupgradeneeded = (event) => {
    const db = (event.target as IDBOpenDBRequest).result;
    const objectStore = db.createObjectStore("name", { keyPath: "myKey" });
};

2. 利用回调的this上下文

根据IDBOpenDBRequest的接口定义，onupgradeneeded回调的this指向IDBOpenDBRequest实例，因此可以直接用this.result。注意要使用普通函数（箭头函数会改变this指向）：

const request = window.indexedDB.open("MyTestDatabase", 3);

request.onupgradeneeded = function(event) {
    const db = this.result;
    const objectStore = db.createObjectStore("name", { keyPath: "myKey" });
};

3. 直接使用已声明的request变量

既然request本身就是IDBOpenDBRequest实例，回调内部可以直接访问它的result属性：

const request = window.indexedDB.open("MyTestDatabase", 3);

request.onupgradeneeded = (event) => {
    const db = request.result;
    const objectStore = db.createObjectStore("name", { keyPath: "myKey" });
};

内容的提问来源于stack exchange，提问作者THIAGO DE BONIS