\

Angular で idb を使うときに発生するasyncIterator プロパティが存在しないエラーの対処方法

Angular で IndexedDB を使いたいと思い、npm の idb を使用していますが、そのまま使うと 以下のエラーが発生します。

1
2
3
4
5
6
7
8
9
10
ERROR in node_modules/idb/build/esm/entry.d.ts(375,13): error TS2339: Property 'asyncIterator' does not exist on type 'SymbolConstructor'.
node_modules/idb/build/esm/entry.d.ts(375,31): error TS2304: Cannot find name 'AsyncIterableIterator'.
node_modules/idb/build/esm/entry.d.ts(382,98): error TS2304: Cannot find name 'AsyncIterableIterator'.
node_modules/idb/build/esm/entry.d.ts(441,13): error TS2339: Property 'asyncIterator' does not exist on type 'SymbolConstructor'.
node_modules/idb/build/esm/entry.d.ts(441,31): error TS2304: Cannot find name 'AsyncIterableIterator'.
node_modules/idb/build/esm/entry.d.ts(450,109): error TS2304: Cannot find name 'AsyncIterableIterator'.
node_modules/idb/build/esm/entry.d.ts(502,13): error TS2339: Property 'asyncIterator' does not exist on type 'SymbolConstructor'.
node_modules/idb/build/esm/entry.d.ts(502,31): error TS2304: Cannot find name 'AsyncIterableIterator'.
node_modules/idb/build/esm/entry.d.ts(534,13): error TS2339: Property 'asyncIterator' does not exist on type 'SymbolConstructor'.
node_modules/idb/build/esm/entry.d.ts(534,31): error TS2304: Cannot find name 'AsyncIterableIterator'.

使用した NPM モジュール

https://www.npmjs.com/package/idb

対処方法

tsconfig.json の lib に esnext.asynciterable を追加します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
    {
...
"compilerOptions": {
...
"lib": [
...
"esnext.asynciterable",
...
]
}
}
```

検証したソースコード

```ts
import {openDB, DBSchema} from "idb"

async openIndexedDB(){

interface TodoDB extends DBSchema {
"todo-db": {
key: string,
value: {
workName: string,
planMinutes: number,
planSeconds: number,
isDone: boolean,
}
}
}

const db = await openDB<TodoDB>('todo-db', 1, {
upgrade(db) {
db.createObjectStore('todo-db')
}
})

}

参考にしたサイト

https://github.com/apollographql/graphql-subscriptions/issues/83

[[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hb.afl.rakuten.co.jp/hgc/18648e8b.7d833591.18648e8c.ed1bab3c/?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Frakutenkobo-ebooks%2Ff02e78a39537375b9f7aefaa40a47e98%2F&m=http%3A%2F%2Fm.rakuten.co.jp%2Frakutenkobo-ebooks%2Fi%2F17548273%2F&link_type=picttext&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJwaWN0dGV4dCIsInNpemUiOiIyNDB4MjQwIiwibmFtIjoxLCJuYW1wIjoicmlnaHQiLCJjb20iOjEsImNvbXAiOiJkb3duIiwicHJpY2UiOjEsImJvciI6MSwiY29sIjoxLCJiYnRuIjoxfQ%3D%3D)

AngularによるモダンWeb開発 実践編 実際の開発で必要な知識を凝縮【電子書籍】[ 末次 章 ]
価格:3780円 (2019/7/23時点)

[

楽天で購入

](https://hb.afl.rakuten.co.jp/hgc/18648e8b.7d833591.18648e8c.ed1bab3c/?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Frakutenkobo-ebooks%2Ff02e78a39537375b9f7aefaa40a47e98%2F%3Fscid%3Daf_pc_bbtn&m=http%3A%2F%2Fm.rakuten.co.jp%2Frakutenkobo-ebooks%2Fi%2F17548273%2F%3Fscid%3Daf_pc_bbtn&link_type=picttext&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJwaWN0dGV4dCIsInNpemUiOiIyNDB4MjQwIiwibmFtIjoxLCJuYW1wIjoicmlnaHQiLCJjb20iOjEsImNvbXAiOiJkb3duIiwicHJpY2UiOjEsImJvciI6MSwiY29sIjoxLCJiYnRuIjoxfQ==)

About Me

11年目のシステムエンジニアです。アプリで生活や仕事を改善したい🐱仕事効率化、自動化のアプリ開発が得意です、ご相談ください。 🚀エンタメ系アプリの開発も模索中🐬社内SEや個人アプリ開発者、システムエンジニアになりたい人と繋がりたい🐱