TypeScript helps us build more robust, maintainable and safe applications. In this lesson, we look at installing the Supabase CLI, and using it to generate type definitions for Supabase.

We can use this to add TypeScript support to our Supabase client, which flows through our entire application - server and client. This means we get in-editor feedback about what we can and can't do with Supabase, helping to discover cool new things, while reducing bugs.

Additionally, we use the LoaderArgs type signature for our Loader function, which allows us to infer the return type in our component.

Note: this does not automatically update with changes to Supabase. You need to manually run this command whenever you change the structure of the database.

Code Snippets

Generate TypeScript definitions from Supabase

supabase gen types typescript --project-id your-project-id > db_types.ts

Create typesafe Supabase client

import { createClient } from "@supabase/supabase-js";

import type { Database } from "db_types";

export default createClient<Database>(
  process.env.SUPABASE_URL!,
  process.env.SUPABASE_ANON_KEY!
);