indexedDB를 사용하기위한 Typescript 및 IDB 라이브러리. 안내 필요

Question

초보자의 질문. Working with IndexedDBJake Archibald's IDB library을 사용하지만 일반 Javascript 대신 Typescript를 사용하는 자습서를 통해 산책을 시도하고 있습니다. 지금까지별로 성공하지 못했습니다.

내 코드는 다음과 같습니다.

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 코드에서 오류 및 인텔리 센스가 제대로 작동하지 않기 때문에 정의 파일이 잘로드됩니다.

내가 내 HTML 페이지에 require.js를 사용하여 내 모듈을로드 관리하지만, 콘솔이 다음과 같은 오류 표시 : 나는 idb.default.open(...) 호출에서 default를 제거하면, 이제

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'유형에 존재하지 않습니다. 라이브러리는 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

흠이 아닌 타이프 라이터 전문가는하지만, 일부 모듈 구문을 학습 한 후, 그것은 모듈 문제처럼 보인다. https://github.com/jakearchibald/idb/blob/master/lib/idb.js 코드를 보면 브라우저 컨텍스트에서 변수 idb가 끝에 정의되어 self.idb = exp;임을 알 수 있습니다.

따라서 ES6 모듈 구문을 사용하여 모듈을 가져 오려고하지만 가져 오기중인 파일은 내보내기가없고 기본 내보내기가 없다는 점에서 모듈이 아닙니다.

(1) idb.js 파일을 다운로드하고 끝에 기본값을 삽입 한 다음 내 보낸 기본 값을 가져 오기로 진행할 수 있습니다.

(2) 스크립트 파일을 내보낼 때 스크립트 파일을 모듈로 가져 오는 방법을 배울 수 있습니다.

브라우저에서 self이 window이기 때문에 변수를 idb에 직접 액세스 할 수 있습니다. 파일을 포함하면 전역 범위에서 정의됩니다.

그래서 먼저 파일을 가져오고 싶다면 해당 파일을 무시하고 import "./idb.js"을 사용하십시오. 이 가져 오기 구문 스타일은 내 보낸 내용을 무시합니다. idb.js가 아무것도 내보내지 않는다는 것을 알고 있기 때문에, 내보내기가없는 파일을 가져 오는 데 필요한 최소한의 작업이므로이 방법이 유용합니다. 그리고 가져 오기의 결과는 평가된다는 것입니다. 그래서 수입 된 모듈이 모듈의 묵시적인 부작용으로 윈도우의 전역 범위에 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 2

이 구문은 기본적 수출과

import idb from "./idb"; 

이 경우에만 작동합니다.

그런 다음 사용할 수 있어야합니다 :

는

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