TypeScript中如何获取IndexedDB的event.target.result？

报错原因 #

TypeScript 对 IDBVersionChangeEvent 的 target 属性默认推断为通用的 EventTarget 类型，而 EventTarget 并没有 result 属性。但实际触发该事件的是 IDBOpenDBRequest 实例，它才拥有指向数据库的 result 属性。

解决方法 #

方法一：直接对event.target做类型断言 #

通过as关键字将event.target断言为IDBOpenDBRequest类型，明确告诉TypeScript该对象的具体类型：

request.onupgradeneeded = (event: IDBVersionChangeEvent) => {
    console.log('idb onupgradeneeded firing');
    // 类型断言为IDBOpenDBRequest，获取数据库实例
    const db = (event.target as IDBOpenDBRequest).result;
    if (!db.objectStoreNames.contains(this.#name)) {
        db.createObjectStore(this.#name, { keyPath: 'id', autoIncrement: true });
    }
};

方法二：先存储断言后的目标对象 #

如果需要多次使用event.target的属性，可先将断言后的对象保存，提升代码可读性：

request.onupgradeneeded = (event: IDBVersionChangeEvent) => {
    console.log('idb onupgradeneeded firing');
    const target = event.target as IDBOpenDBRequest;
    const db = target.result;
    if (!db.objectStoreNames.contains(this.#name)) {
        db.createObjectStore(this.#name, { keyPath: 'id', autoIncrement: true });
    }
};

补充优化 #

你代码中用到的request.result和event.target.result指向同一个数据库实例（触发事件的就是当前request对象），如果request在当前作用域可访问且类型为IDBOpenDBRequest，也可以直接使用：

request.onupgradeneeded = (event: IDBVersionChangeEvent) => {
    console.log('idb onupgradeneeded firing');
    const db = request.result;
    if (!db.objectStoreNames.contains(this.#name)) {
        db.createObjectStore(this.#name, { keyPath: 'id', autoIncrement: true });
    }
};

内容的提问来源于stack exchange，提问作者omega