AngularFire でFirestore を型付きで扱うまで

前置き

AngularFire でFirestore を使おうとした。
サンプルの通りにやったら、とりあえず取得はできた。
ただ、せっかくTypeScript を使っているので型を定義したいと思ったけど、詰まった。
この記事はその時に調べたことをまとめたものです。

本編

結論はFirestoreDataConverterとCollectionReference.withConverter()を使用する。
↓は公式リファレンスのリンク。

これでCollectionReferenceオブジェクト事態に型付けをすることができ、アップロード・ダウンロード時も型付けの恩恵を受けることができる。はず…
(僕が使っているIDEだと、HTMLテンプレートでうまく型がきかないこともあったけど…)

おまけ

ここからは僕用のメモというかそんな感じの。

最初は、サンプルにのっとってcollectionで特定のコレクションを指定し、collectionDataで取得した。
これでもドキュメントをまとめて取得できたが、型の恩恵を受けることができなかった。
collectionDataにジェネリクスしたところ、エラーとなった。
同様にcollectionもエラーとなった。

ChatGPT 先生に聞いたところ、collectionDataをas でキャストする方法を教えてもらった。
これでも問題ないが、せっかくジェネリクスが使えるのにキャストは違和感があった。
加えて、アップロード時の処理も考えると、collectionで型を指定し、アップロード・ダウンロード時に使いまわす方がスマートだと思ったので、別のやり方を探した。

そこで、見つけたのが↑の公式リファレンスだった。
こうすることで、collectionに型を適用することができた。

また、調べる中で、以下のことが分かった。

• firestore とfirestore/lite の2つがあること。
  • firestore にはオフライン機能があり、一時的にネット接続が途切れてもアップロード・ダウンロードをキャッシュし、ネット接続時に自動で反映してくれる。ただし、サイズが大きい。
  • lite はオフライン機能等をオミットして、純粋なREST API として使用できる。その分サイズが小さい。
• firestore はアプリの型(AppModelType)とdb の型(DbModelType)を別々で定義できる。
  • 2つの差異はFirestoreDataConverterで吸収できる。
  • 例えば、ドキュメント作成日時をFirestore でやってもらいたいときなどに使用する。

感想

楽しかった。
NoSQL は初めてだったので、RDB との違いに戸惑った。

今回の記事は以上です。

前回記事はこちら

詳細見たい人はこちら