TypeScript and IndexedDB

Articles

This article explains about TypeScript and IndexedDB.

We will explain TypeScript and IndexedDB with practical examples.

YouTube Video

TypeScript and IndexedDB

IndexedDB is a low-level NoSQL storage that allows you to persist structured data in the browser. With TypeScript, you can represent schemas in a type-safe way, reducing errors and improving maintainability.

Basic Terminology and Workflow

IndexedDB is a small database inside the browser. It manages data using mechanisms such as databases with names and versions, object stores, transactions, indexes, and cursors. Databases have versions, and when the version is upgraded, onupgradeneeded is called to update the schema, such as creating or modifying tables.

Opening IndexedDB (basic pattern)

First, we show an example of opening a database with IndexedDB and creating an object store in onupgradeneeded if necessary.

 1// Open an IndexedDB database and create an object store if needed.
 2// This code shows the classic callback-based IndexedDB API wrapped into a Promise.
 3function openDatabase(dbName: string, version: number): Promise<IDBDatabase> {
 4  return new Promise((resolve, reject) => {
 5    const request = indexedDB.open(dbName, version);
 6
 7    request.onerror = () => {
 8      reject(request.error);
 9    };
10
11    request.onupgradeneeded = (event) => {
12      const db = request.result;
13      if (!db.objectStoreNames.contains('todos')) {
14        // Create object store with keyPath 'id'
15        db.createObjectStore('todos', { keyPath: 'id' });
16      }
17    };
18
19    request.onsuccess = () => {
20      resolve(request.result);
21    };
22  });
23}
24
25// Usage example:
26openDatabase('my-db', 1)
27  .then(db => {
28    console.log('DB opened', db.name, db.version);
29    db.close();
30  })
31  .catch(err => console.error('Failed to open DB', err));

This code opens the database and logs whether it succeeded or failed.
If needed, the todos store is created in onupgradeneeded.

Defining types in TypeScript (Models)

Next, we define data types using TypeScript. This ensures type safety in subsequent CRUD operations.

1// Define the TypeScript interface for a Todo item.
2// This helps with type safety in the database operations.
3interface Todo {
4  id: string;          // primary key
5  title: string;
6  completed: boolean;
7  createdAt: number;
8}

Here, we define the Todo type.

Simple CRUD function implementation examples

Next, we show basic CRUD operations such as adding, retrieving, updating, and deleting from the object store. Each function takes an IDBDatabase and returns a Promise.

 1// CRUD utilities for the 'todos' object store.
 2// Each operation uses a transaction and returns a Promise for easier async/await usage.
 3
 4function addTodo(db: IDBDatabase, todo: Todo): Promise<void> {
 5  return new Promise((resolve, reject) => {
 6    const tx = db.transaction('todos', 'readwrite');
 7    const store = tx.objectStore('todos');
 8    const req = store.add(todo);
 9
10    req.onsuccess = () => {
11      console.log('Todo added', todo.id);
12    };
13    req.onerror = () => reject(req.error);
14
15    tx.oncomplete = () => resolve();
16    tx.onerror = () => reject(tx.error);
17  });
18}

This function adds a new Todo to the todos store in IndexedDB. It returns a Promise for asynchronous handling, which resolves when processing is complete.

 1function getTodo(db: IDBDatabase, id: string): Promise<Todo | undefined> {
 2  return new Promise((resolve, reject) => {
 3    const tx = db.transaction('todos', 'readonly');
 4    const store = tx.objectStore('todos');
 5    const req = store.get(id);
 6
 7    req.onsuccess = () => resolve(req.result as Todo | undefined);
 8    req.onerror = () => reject(req.error);
 9  });
10}

This function retrieves the Todo with the specified ID and returns the object if found. If no matching data is found, it returns undefined.

 1function updateTodo(db: IDBDatabase, todo: Todo): Promise<void> {
 2  return new Promise((resolve, reject) => {
 3    const tx = db.transaction('todos', 'readwrite');
 4    const store = tx.objectStore('todos');
 5    const req = store.put(todo);
 6
 7    req.onsuccess = () => {
 8      console.log('Todo updated', todo.id);
 9    };
10    req.onerror = () => reject(req.error);
11
12    tx.oncomplete = () => resolve();
13    tx.onerror = () => reject(tx.error);
14  });
15}

This function updates existing Todo data. On success, the ID of the updated Todo is logged.

 1function deleteTodo(db: IDBDatabase, id: string): Promise<void> {
 2  return new Promise((resolve, reject) => {
 3    const tx = db.transaction('todos', 'readwrite');
 4    const store = tx.objectStore('todos');
 5    const req = store.delete(id);
 6
 7    req.onsuccess = () => {
 8      console.log('Todo deleted', id);
 9    };
10    req.onerror = () => reject(req.error);
11
12    tx.oncomplete = () => resolve();
13    tx.onerror = () => reject(tx.error);
14  });
15}

This function deletes the Todo with the specified ID. When processing is successful, the deleted ID is logged.
These functions resolve or reject a Promise depending on transaction completion or errors. Including output via console.log makes it easy to track what is happening during execution.

Indexes and compound queries

By using indexes in IndexedDB, you can efficiently search on specific fields. Here, we create an index for createdAt and give an example of a range query.

 1// When opening DB, create an index for createdAt.
 2// Then demonstrate a range query using the index.
 3
 4function openDatabaseWithIndex(dbName: string, version: number): Promise<IDBDatabase> {
 5  return new Promise((resolve, reject) => {
 6    const request = indexedDB.open(dbName, version);
 7
 8    request.onupgradeneeded = () => {
 9      const db = request.result;
10      if (!db.objectStoreNames.contains('todos')) {
11        const store = db.createObjectStore('todos', { keyPath: 'id' });
12        // Create an index on createdAt for sorting/filtering
13        store.createIndex('by-createdAt', 'createdAt', { unique: false });
14      } else {
15        const store = request.transaction!.objectStore('todos');
16        if (!store.indexNames.contains('by-createdAt')) {
17          store.createIndex('by-createdAt', 'createdAt', { unique: false });
18        }
19      }
20    };
21
22    request.onerror = () => reject(request.error);
23    request.onsuccess = () => resolve(request.result);
24  });
25}

This function opens the database and creates or verifies the by-createdAt index on the createdAt field. This allows for efficient searching and sorting by creation date.

 1async function getTodosCreatedAfter(db: IDBDatabase, timestamp: number): Promise<Todo[]> {
 2  return new Promise((resolve, reject) => {
 3    const tx = db.transaction('todos', 'readonly');
 4    const store = tx.objectStore('todos');
 5    const index = store.index('by-createdAt');
 6    const range = IDBKeyRange.lowerBound(timestamp, true); // exclusive
 7    const req = index.openCursor(range);
 8
 9    const results: Todo[] = [];
10    req.onsuccess = (event) => {
11      const cursor = (event.target as IDBRequest).result as IDBCursorWithValue | null;
12      if (cursor) {
13        results.push(cursor.value as Todo);
14        cursor.continue();
15      } else {
16        resolve(results);
17      }
18    };
19    req.onerror = () => reject(req.error);
20  });
21}

This function retrieves only Todos created after the specified timestamp. Using the index allows efficient data scanning in creation date order.
In this example, a by-createdAt index is created during the database upgrade, and Todo items created after the specified time are enumerated with a cursor.

Promise-based lightweight wrapper

The low-level IndexedDB API is complex to write, and repeated similar operations can lead to redundancy and bugs. Therefore, by preparing a generic TypeScript wrapper class that abstracts the operations, we improve code simplicity and maintainability. Below is an implementation focused on basic functionality.

1// A minimal TypeScript wrapper around IndexedDB to simplify common operations.
2// This class is generic over the store's value type and assumes 'keyPath' is 'id'.
3
4class IDBWrapper<T extends { id: string }> {
5  private dbPromise: Promise<IDBDatabase>;
6
7  constructor(private dbName: string, private version: number, private storeName: string) {
8    this.dbPromise = this.open();
9  }

This class wraps IndexedDB operations and provides type-safe CRUD methods. It assumes an object store where the key is id.

 1  private open(): Promise<IDBDatabase> {
 2    return new Promise((resolve, reject) => {
 3      const req = indexedDB.open(this.dbName, this.version);
 4      req.onerror = () => reject(req.error);
 5      req.onupgradeneeded = () => {
 6        const db = req.result;
 7        if (!db.objectStoreNames.contains(this.storeName)) {
 8          db.createObjectStore(this.storeName, { keyPath: 'id' });
 9        }
10      };
11      req.onsuccess = () => resolve(req.result);
12    });
13  }

It opens the database and creates a new object store if necessary. Store initialization is performed using the upgrade event.

 1  async add(item: T): Promise<void> {
 2    const db = await this.dbPromise;
 3    await new Promise<void>((resolve, reject) => {
 4      const tx = db.transaction(this.storeName, 'readwrite');
 5      const store = tx.objectStore(this.storeName);
 6      const req = store.add(item);
 7      req.onsuccess = () => {
 8        console.log('added', item.id);
 9      };
10      req.onerror = () => reject(req.error);
11      tx.oncomplete = () => resolve();
12      tx.onerror = () => reject(tx.error);
13    });
14  }

Adds data to the IndexedDB store. After adding, the ID is logged to the console.

 1  async get(id: string): Promise<T | undefined> {
 2    const db = await this.dbPromise;
 3    return new Promise((resolve, reject) => {
 4      const tx = db.transaction(this.storeName, 'readonly');
 5      const store = tx.objectStore(this.storeName);
 6      const req = store.get(id);
 7      req.onsuccess = () => resolve(req.result as T | undefined);
 8      req.onerror = () => reject(req.error);
 9    });
10  }

Retrieves data corresponding to the specified ID. undefined is returned if the data does not exist.

 1  async put(item: T): Promise<void> {
 2    const db = await this.dbPromise;
 3    return new Promise((resolve, reject) => {
 4      const tx = db.transaction(this.storeName, 'readwrite');
 5      const store = tx.objectStore(this.storeName);
 6      const req = store.put(item);
 7      req.onsuccess = () => {
 8        console.log('put', item.id);
 9      };
10      req.onerror = () => reject(req.error);
11      tx.oncomplete = () => resolve();
12      tx.onerror = () => reject(tx.error);
13    });
14  }

Updates existing data or adds new data. After processing, the updated ID is logged.

 1  async delete(id: string): Promise<void> {
 2    const db = await this.dbPromise;
 3    return new Promise((resolve, reject) => {
 4      const tx = db.transaction(this.storeName, 'readwrite');
 5      const store = tx.objectStore(this.storeName);
 6      const req = store.delete(id);
 7      req.onsuccess = () => {
 8        console.log('deleted', id);
 9      };
10      req.onerror = () => reject(req.error);
11      tx.oncomplete = () => resolve();
12      tx.onerror = () => reject(tx.error);
13    });
14  }

Deletes the data with the specified ID. On success, the deleted ID is logged.

 1  async getAll(): Promise<T[]> {
 2    const db = await this.dbPromise;
 3    return new Promise((resolve, reject) => {
 4      const tx = db.transaction(this.storeName, 'readonly');
 5      const store = tx.objectStore(this.storeName);
 6      const req = store.getAll();
 7      req.onsuccess = () => resolve(req.result as T[]);
 8      req.onerror = () => reject(req.error);
 9    });
10  }
11}

Retrieves all data in the store. The return value is an array of type T.

 1// Example usage with Todo type:
 2interface Todo {
 3  id: string;
 4  title: string;
 5  completed: boolean;
 6  createdAt: number;
 7}
 8
 9const todoStore = new IDBWrapper<Todo>('my-db', 1, 'todos');
10
11(async () => {
12  const newTodo: Todo = { id: '1', title: 'Learn IndexedDB', completed: false, createdAt: Date.now() };
13  await todoStore.add(newTodo);
14  const fetched = await todoStore.get('1');
15  console.log('fetched', fetched);
16  newTodo.completed = true;
17  await todoStore.put(newTodo);
18  const all = await todoStore.getAll();
19  console.log('all todos', all);
20  await todoStore.delete('1');
21})();

This code is an actual usage example of the IDBWrapper class. This shows the flow for adding, retrieving, updating, listing, and deleting Todo data.
This wrapper allows simple handling of basic CRUD operations. In a real-world environment, you also need to handle error handling and schema management (indexes).

Schema migration (version upgrade)

To change the database schema, increase the second argument (version) of indexedDB.open and update it in onupgradeneeded. You need to design it so that existing transactions have finished and destructive changes are avoided.

 1// Example of handling upgrade to version 2: add an index and perhaps migrate data.
 2// onupgradeneeded receives an event where oldVersion and newVersion are accessible.
 3
 4function upgradeToV2(dbName: string): Promise<IDBDatabase> {
 5  return new Promise((resolve, reject) => {
 6    const req = indexedDB.open(dbName, 2);
 7    req.onupgradeneeded = (ev) => {
 8      const db = req.result;
 9      const oldVersion = (ev as IDBVersionChangeEvent).oldVersion;
10      console.log('Upgrading DB from', oldVersion, 'to', db.version);
11      let store: IDBObjectStore;
12      if (!db.objectStoreNames.contains('todos')) {
13        store = db.createObjectStore('todos', { keyPath: 'id' });
14      } else {
15        store = req.transaction!.objectStore('todos');
16      }
17      // Add index if not present
18      if (!store.indexNames.contains('by-completed')) {
19        store.createIndex('by-completed', 'completed', { unique: false });
20      }
21
22      // Optional: data migration logic if necessary can go here,
23      // but heavy migrations often should be done lazily on read.
24    };
25    req.onsuccess = () => resolve(req.result);
26    req.onerror = () => reject(req.error);
27  });
28}

Heavy processing inside onupgradeneeded can block the UI, so keep it to a minimum, and consider delayed migration (staging processing during app startup) if possible.

Cautions about transactions (lifecycle and errors)

Transactions are automatically committed before execution of the script that created them ends. When using await inside a transaction, it may be committed unexpectedly; caution is needed when performing multiple async operations within the same transaction.

 1// Bad pattern: awaiting outside transaction callbacks can cause tx to auto-commit.
 2// Good pattern is to chain requests and resolve on tx.oncomplete as shown earlier.
 3
 4// Example: Do multiple operations inside single tx, avoid awaiting inside.
 5function multiOperation(db: IDBDatabase, items: Todo[]): Promise<void> {
 6  return new Promise((resolve, reject) => {
 7    const tx = db.transaction('todos', 'readwrite');
 8    const store = tx.objectStore('todos');
 9
10    for (const item of items) {
11      const req = store.put(item);
12      req.onerror = () => console.error('put error', req.error);
13      // Do NOT await here; just schedule requests synchronously.
14    }
15
16    tx.oncomplete = () => {
17      console.log('All operations in transaction completed');
18      resolve();
19    };
20    tx.onerror = () => reject(tx.error);
21  });
22}

Be aware of transaction lifespan; use separate transactions if necessary, or schedule operations synchronously within a transaction.

Cursor applications and pagination

By using a cursor, you can process large-scale data sequentially or implement simple pagination without using offsets.

 1// Example: fetch first N items using a cursor (ascending by key).
 2function fetchFirstN(db: IDBDatabase, n: number): Promise<Todo[]> {
 3  return new Promise((resolve, reject) => {
 4    const tx = db.transaction('todos', 'readonly');
 5    const store = tx.objectStore('todos');
 6    const req = store.openCursor();
 7    const out: Todo[] = [];
 8    req.onsuccess = (ev) => {
 9      const cursor = (ev.target as IDBRequest).result as IDBCursorWithValue | null;
10      if (cursor && out.length < n) {
11        out.push(cursor.value as Todo);
12        cursor.continue();
13      } else {
14        resolve(out);
15      }
16    };
17    req.onerror = () => reject(req.error);
18  });
19}

By fetching items one by one with cursors, memory usage can be reduced. When implementing paging, it is common to remember the last read key.

Error handling and fallback

1// Feature detection
2if (!('indexedDB' in window)) {
3  console.warn('IndexedDB is not supported. Falling back to localStorage.');
4  // implement fallback logic...
5}

IndexedDB may not be available due to implementation differences between browsers or users' privacy settings, such as private browsing. Therefore, check whether indexedDB exists and, if not, provide a fallback such as localStorage.

Performance and best practices

IndexedDB is fast and powerful, but performance can vary greatly depending on its design and how data is handled. Depending on the use case, optimization can be done in the following ways:.

Design the object store according to the actual usage. For example, if there are many reads, provide indexes; if there are many writes, keep the key design simple.
Large binary data such as images and audio should be stored as Blobs, or managed using the File API or service workers if needed. Compression can also be considered if necessary.
Keep transactions as short as possible and perform heavy processing outside the transaction to minimize lock time.
Indexes can speed up searches, but slow down inserts and updates, so create only those that are truly necessary.
When dealing with many small pieces of data, retrieving them all at once using getAll() may exhaust memory. You can reduce memory usage by splitting the processing with cursors.

Security and privacy

IndexedDB data is isolated per domain and protocol according to the same-origin policy. Design under the assumption that data may be lost if users delete browser data or use private mode.

Summary and recommended design patterns

To use IndexedDB effectively with TypeScript, it is important to prepare types and asynchronous processes, be aware of version management and transaction design, and wrap common processing to improve maintainability.

Defining types in TypeScript and wrapping IndexedDB operations with Promise/async/await improves safety and code readability.
Schema changes should use version management with onupgradeneeded, and heavy processing should be delayed when possible.
Design transactions to be short and avoid heavy asynchronous processing within the same transaction.
By creating wrapper classes, you can reduce redundant common processes such as error handling, logging, and type definitions.

You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.

YouTube Video

TypeScript and Web Storage