🎉

TinyBaseのTypeScript型システム

2025/02/15に公開

TinyBaseはシンプルながら強力な型サポートを提供しており、TypeScriptを活用することでより安全で開発効率の高いデータ管理が可能になります。それでは、順番に見ていきましょう!

基本的な型サポート

TinyBaseはデフォルトで型サポートを備えており、データの格納や取得時に型チェックが適用されます。特に、CellValue の型は numberstringboolean のいずれかに制限されているため、意図しないデータの混入を防げます。

import { createStore } from 'tinybase';

const store = createStore();

store.setValues({ employees: 3 }); // OK
store.setValues({ employees: true }); // OK
store.setValues({ employees: ['Alice', 'Bob'] }); // ❌ TypeScriptエラー

この型制約のおかげで、「想定外のデータが格納されることでバグが発生する」といったリスクを軽減できます。特に、データを扱う関数が多くの箇所で使われる場合、型チェックがあるだけで大幅にデバッグコストが下がります。

スキーマベースの型指定

TinyBase v3.1以降では、スキーマを定義することで、より厳密な型チェックが可能になりました。スキーマを指定すると、誤った型のデータや未定義のキーを格納しようとした際に、即座にエラーが検出されます。

import { createStore } from 'tinybase/with-schemas'; // 'with-schemas' を利用

const store = createStore().setValuesSchema({
  employees: { type: 'number' },
  open: { type: 'boolean', default: false },
});

store.setValues({ employees: 3 }); // OK
store.setValues({ employees: true }); // ❌ TypeScriptエラー
store.setValues({ employees: 3, website: 'pets.com' }); // ❌ TypeScriptエラー

この仕組みを使うことで、「スキーマが決まっているのに、間違ったデータを入れてしまう」といったミスを未然に防げます。たとえば、データベースの更新処理を行う際に、APIレスポンスの型を正しく保証できるため、バグの温床になりがちな「データのズレ」問題を解消できます。

ORMのような型定義の自動生成

「スキーマが決まっているなら、それに基づいた型定義を自動で作れたら便利なのに」と思ったことはありませんか?TinyBaseのtoolsを活用すると、スキーマから型定義を自動生成し、完全に型付けされたAPIを作成できます。

import { createStore } from 'tinybase';
import { createTools } from 'tinybase/tools';

const store = createStore().setTable('pets', {
  fido: { species: 'dog' },
  felix: { species: 'cat' },
  cujo: { species: 'dog' },
});

const tools = createTools(store);
const [dTs, ts, uiReactDTs, uiReactTsx] = tools.getStoreApi('pets');

これにより、以下のような型定義が生成され、データアクセス時に型の保証が得られます。

/**
 * 'pets' テーブルの型定義
 */
export type PetsTable = { [rowId: Id]: PetsRow };
/**
 * 'pets' テーブルの各Rowの型
 */
export type PetsRow = { species: string };

この方法を使うと、手作業で型定義を記述する必要がなくなり、一貫した型チェックを維持できます。特に、データの構造が頻繁に変更されるプロジェクトでは、型定義の同期ミスを防げるため、開発の効率と安全性が格段に向上します。

TinyBase は、TypeScript と連携して、さまざまなレベルの型サポートを提供します。基本的な型サポートに加えて、スキーマベースの型指定を使用することで、ストアが含むことができるテーブル、セル、および値の型をより厳密に制約できます。

各定義の説明は以下の通りです。

ファイル種別 説明
dTs TypeScript の型定義ファイルです。生成された API の型情報を提供し、TypeScript コンパイラがコードを型安全にチェックするために使用されます。例えば、テーブル、行、セルの型などが定義されます。
ts TypeScript の実装ファイルです。ストアの操作に必要なコードが含まれており、型定義ファイルで定義された型を使用します。
uiReactDTs React UI コンポーネントの型定義ファイルです。TinyBase ストアと連携する React コンポーネントで使用される型情報が含まれています。
uiReactTsx React UI コンポーネントの実装ファイルです。TinyBase ストアからデータを読み取り、表示するための React コンポーネントのコードが含まれています。

まとめ

TinyBaseは、TypeScriptとの組み合わせで柔軟かつ強力な型サポートを提供します。

基本の型サポート: デフォルトで型安全なデータ管理が可能
スキーマベースの型指定: より厳密なデータチェックができる
型定義の自動生成: スキーマから型を生成し、開発効率を向上

これらを活用すれば、データの整合性を保ちつつ、安全かつ効率的な開発が可能になります。TinyBaseを使ったTypeScript開発を、ぜひ試してみてください!

Discussion