4-Auto-Generate TypeScript Types from Supabase Schema Using CLI

Screenshot from the tutorial

Auto-Generate TypeScript Types from Supabase Schema Using the Supabase CLI

As developers, we are constantly seeking ways to streamline our workflows and enhance the robustness of our code. One effective strategy is to auto-generate TypeScript types from your Supabase database schema. This not only saves time but also improves type safety in your frontend and backend applications. In this tutorial, we will walk through the steps to install and configure the Supabase CLI, connect it to your Supabase project, and generate accurate TypeScript types.

Prerequisites

Before we dive in, ensure that you have the following installed on your machine:

• Node.js (version 12 or above)
• npm (Node Package Manager)
• A Supabase account and an existing Supabase project

Step 1: Install the Supabase CLI

To get started, we need to install the Supabase CLI. Open your terminal and run the following command:

npm install -g supabase

This command installs the Supabase CLI globally on your machine, allowing you to use it in any project.

Step 2: Configure the Supabase CLI

Once the CLI is installed, you need to configure it to connect to your Supabase project. To do this, execute the following command in your terminal:

supabase login

This command will prompt you to enter your Supabase access token. You can find this token in your Supabase project's settings under the "API" section. Copy it and paste it into the terminal when prompted.

Next, you should initialize the Supabase project. Navigate to your project directory and run:

supabase init

This will create a supabase folder in your project, containing the necessary configuration files.

Step 3: Connect to Your Supabase Database

After initializing the project, you need to connect to your Supabase database. You can set up the connection by editing the .env file that was created during initialization. Add the following line to the file, replacing your-supabase-url and your-anon-key with your actual Supabase project URL and anon key:

SUPABASE_URL=your-supabase-url
SUPABASE_ANON_KEY=your-anon-key

You can find both values in your Supabase project's settings under the "API" section.

Step 4: Generate TypeScript Types

Now that you have configured the Supabase CLI, the next step is to generate TypeScript types from your database schema. Run the following command in your terminal:

supabase gen types typescript --local > ./types/supabase.ts

Here's a breakdown of the command:

• supabase gen types typescript: This part of the command tells the CLI to generate TypeScript types.
• --local: This flag indicates that you want to generate types based on your local database schema.
• > ./types/supabase.ts: This redirects the output to a TypeScript file located in the types directory of your project.

Make sure to create the types directory if it doesn’t already exist:

mkdir types

After running the command, you will find a new file named supabase.ts in your types folder, containing all the TypeScript type definitions that correspond to your Supabase schema.

Step 5: Utilizing Generated Types

You can now import the generated TypeScript types into your application. Here's an example of how to use the generated types in your code:

import { Database } from './types/supabase';

// Now you can use Database types for type safety
const example: Database['public']['profiles'] = {
  id: '123',
  username: 'exampleUser',
  avatar_url: 'https://example.com/avatar.png',
};

By leveraging the generated types, you can ensure that your code adheres to the structure defined in your Supabase database, reducing the chances of runtime errors and improving overall code quality.

Conclusion

Auto-generating TypeScript types from your Supabase schema using the Supabase CLI is a powerful way to enhance type safety in your applications. By following the steps outlined in this tutorial, you can quickly set up the CLI, connect it to your Supabase project, and generate accurate TypeScript types that will help you write better, safer code.

Now that you’ve learned this technique, consider integrating it into your development workflow to further boost your productivity and code quality. Happy coding!

Another view from the tutorial

---

Connect with SkillBakery Studios

Explore more tutorials, tools, and resources:

• skillbakery.com
• Facebook
• X (Twitter)
• YouTube Channel

Posted by SkillBakery Studios