Typescript und IDB-Bibliothek für die Verwendung von indexedDB. Anleitung benötigt

Question

Frage von einem Neuling. Ich versuche, den Weg durch Working with IndexedDB Tutorial zu folgen, die Jake Archibald's IDB library verwendet, aber Typoskript anstelle von Javascript verwenden. Ich habe bisher keinen großen Erfolg.

Mein Code sieht so aus.

Die Definitionsdatei lädt gut, da der Compiler keine Fehler verursacht und intellisense in VS-Code einwandfrei funktioniert.

schaffe ich mein Modul laden require.js auf meiner HTML-Seite verwenden, aber die Konsole zeigt folgende Fehlermeldung:

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) 

Nun, wenn ich default aus dem Aufruf von idb.default.open(...) entfernen, sagt der Compiler mich das 'Öffnen' existiert nicht beim Typ '.../idb'. Die Bibliothek exportiert standardmäßig idb.

Ich vermisse eine Art von Initialisierung, aber ich kann nicht wirklich was oder wo sehen.

Kann jemand helfen?

ARBEIT AROUND

Dies ist, wie ich diese Arbeit schließlich gemacht.

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'); 
    } 
}); 

Die erste import-Anweisung bringt die Typen ein, so dass sie kompiliert und Hinweise liefert. Die zweite Anweisung bringt das IDB-Objekt in den Mix.

Vielen Dank an @Josh für mich in die richtige Richtung.

Answer 1

Hmm, kein Typoskript-Experte, aber nach einiger Modul Syntax lernen, es sieht aus wie ein ein Modul Problem. Betrachtet man den Code von https://github.com/jakearchibald/idb/blob/master/lib/idb.js, sieht man, dass im Browserkontext die Variable idb am Ende mit self.idb = exp; definiert ist.

Sie versuchen also, ein Modul mit ES6-Modul-Syntax zu importieren, aber die Datei, die Sie importieren, ist kein Modul in dem Sinne, dass es keine Exporte und keinen Standardexport gibt.

(1) Sie können die Datei idb.js herunterladen und am Ende einen Exportstandard einfügen und mit dem Import des exportierten Standardwerts fortfahren.

(2) Sie können lernen, wie man eine Skriptdatei als Modul importiert, wenn nichts exportiert wird.

Unter 2, weil selfwindow im Browser ist, können Sie wahrscheinlich nur direkt auf die Variable idb zugreifen, denn durch die Datei wird es im globalen Gültigkeitsbereich definiert.

Also, zuerst wollen Sie die Datei importieren und ignorieren, was es exportiert, mit import "./idb.js". Diese Art der Importsyntax ignoriert, was exportiert wird. Da wir wissen, dass idb.js nichts exportiert, ist das großartig, weil es so wenig Arbeit erfordert, um eine Datei ohne Export zu importieren. Und das Ergebnis des Imports ist, dass es ausgewertet wird. Das bedeutet, dass der importierte Wert idb im globalen Bereich des Fensters als implizite Nebenwirkung des Moduls deklariert (das Definieren von Globals ist normalerweise in Modulen verpönt, aber das ist in Ordnung, weil dies a ist Nicht-Modul). So

... versuchen Sie Folgendes ein, wenn Sie in einem Browser-Kontext arbeiten:

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 2

Wenn ein Standard-Export Import, die Syntax ist:

import idb from "./idb"; 

Dies funktioniert nur mit Standard-Exporten.

Sie sollten dann verwenden können:

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