用于使用 indexedDB 的 Typescript 和 IDB 库。需要指导

Question

新手提问。我正在尝试跟随 Working with IndexedDB tutorial which uses Jake Archibald's IDB library 的演练，但使用的是 Typescript 而不是普通的 Javascript。到目前为止我还没有取得太大的成功。

我的代码是这样的。

import * as idb from "./idb";

const dbPromise: Promise<idb.DB> = idb.default.open('test-db2', 1, (upgradeDb: idb.UpgradeDB) => {
    console.log('making a new object store');
    if (!upgradeDb.objectStoreNames.contains('firstOS')) {
        upgradeDb.createObjectStore('firstOS');
    }
});

定义文件加载良好，因为编译器不会抛出任何错误并且智能感知在 VS Code 中工作正常。

我设法在 html 页面上使用 require.js 加载我的模块，但控制台显示以下错误：

Uncaught TypeError: Cannot read property 'default' of undefined
at Object.<anonymous> (main.ts:8)
at Object.execCb (require.min.js:5)
at b.check (require.min.js:5)
at b.<anonymous> (require.min.js:5)
at require.min.js:5
at require.min.js:5
at each (require.min.js:5)
at b.emit (require.min.js:5)
at b.check (require.min.js:5)
at b.enable (require.min.js:5)

现在，如果我从对 idb.default.open(...) 的调用中删除 default，编译器会告诉我 'open' 在类型 '.../idb' 上不存在。该库默认导出 idb。

我缺少某种初始化，但我无法真正看到是什么或在哪里。

有人能帮忙吗？

解决方法

这就是我最终完成这项工作的方式。

import * as idxdb from "./idb";
import "./js/idb.js";

let dbPromise: Promise<idxdb.DB> = idb.open('test-db2', 1, (upgradeDb: idxdb.UpgradeDB) => {
    console.log('making a new object store');
    if (!upgradeDb.objectStoreNames.contains('firstOS')) {
        upgradeDb.createObjectStore('firstOS');
    }
});

第一个 import 语句引入了类型，因此它可以编译并提供提示。第二条语句将 idb 对象加入到混合中。

非常感谢 @Josh 为我指明了正确的方向。

Answer 1

导入默认导出时，语法为：

import idb from "./idb";

这仅适用于默认导出。

然后您应该可以使用：

idb.open(/* ... */)

Answer 2

嗯，不是 typescript 专家，但在学习了一些模块语法后，它看起来像一个模块问题。查看 https://github.com/jakearchibald/idb/blob/master/lib/idb.js 的代码，您会看到在浏览器上下文中，变量 idb 在末尾定义为 self.idb = exp;。

所以您尝试使用 ES6 模块语法导入模块，但是您导入的文件不是模块，因为它没有导出，也没有默认导出。

(1) 您可以下载idb.js 文件并在最后插入一个导出默认值，然后继续导入默认导出值。

(2) 您可以了解如何在不导出任何内容时将脚本文件作为模块导入。

在 2 下，因为 self 在浏览器中是 window，您可能可以直接访问变量 idb，因为通过包含文件，它会在全局范围内定义。

因此，首先您要导入文件，忽略它导出的内容，使用 import "./idb.js"。这种导入语法风格会忽略导出的任何内容。因为我们知道 idb.js 不导出任何东西，所以这很好，因为它是导入文件而不导出文件所需的最少工作量。导入的结果是它被评估，这意味着导入将在 window 的全局范围内声明 idb 作为模块的隐含副作用（在模块中通常不赞成定义全局变量但这没关系，因为这是一个非模块）。

所以...如果您在浏览器上下文中工作，请尝试以下操作：

import "./idb.js";

// This should print out information about the idb object declared in 
// global scope of the browser (e.g. under window.idb)
console.log(idb); 

// Because the variable idb is basically just a global, just access 
// here as it comes from the global
const dbPromise: Promise<idb.DB> = idb.open(...);

Answer 3

import idb from 'idb';

这对我有用。

Answer 4

我认为这可能是因为 idb javascript 不支持 AMD 加载程序（例如我正在使用的 require.js）。

在 index-min.js 的末尾添加以下行对我有用：

)({});
/** added this: */
if ( typeof define === "function" && define.amd ) {
    define( "idb", [], function() {
        return { openDB:idb.openDB, deleteDB:idb.deleteDB, wrap:idb.wrap, unwrap:idb.unwrap}
    });
}

用于使用 indexedDB 的 Typescript 和 IDB 库。需要指导

Typescript and IDB library for using indexedDB. Guidance needed

indexeddb

typescript