How to Generate TypeScript Types from Supabase Schema

1# Link to your remote project (one-time setup)
2supabase link --project-ref your-project-ref
3
4# Generate types from the remote database
5supabase gen types typescript --linked > src/types/database.ts
6
7# Or generate from your local database
8supabase gen types typescript --local > src/types/database.ts

1import { createClient } from '@supabase/supabase-js'
2import type { Database } from '@/types/database'
3
4// Create a typed Supabase client
5const supabase = createClient<Database>(
6  process.env.NEXT_PUBLIC_SUPABASE_URL!,
7  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
8)
9
10// TypeScript now knows the shape of your tables
11const { data: todos } = await supabase
12  .from('todos')       // autocomplete on table names
13  .select('id, title, is_complete, created_at')  // autocomplete on columns
14  .eq('is_complete', false)  // type-checked filter value
15
16// todos is typed as: { id: number; title: string; is_complete: boolean; created_at: string }[]
17
18// Insert is type-checked
19const { error } = await supabase
20  .from('todos')
21  .insert({ title: 'Buy groceries', is_complete: false })
22  // TypeScript error if you pass invalid columns or wrong types

1import type { Database } from '@/types/database'
2
3// Extract row types for a specific table
4type Todo = Database['public']['Tables']['todos']['Row']
5type TodoInsert = Database['public']['Tables']['todos']['Insert']
6type TodoUpdate = Database['public']['Tables']['todos']['Update']
7
8// Use in function signatures
9async function createTodo(todo: TodoInsert): Promise<Todo | null> {
10  const { data, error } = await supabase
11    .from('todos')
12    .insert(todo)
13    .select()
14    .single()
15
16  if (error) throw error
17  return data
18}
19
20// Use as component props
21function TodoItem({ todo }: { todo: Todo }) {
22  return <div>{todo.title}</div>
23}

1// package.json
2{
3  "scripts": {
4    "generate-types": "supabase gen types typescript --linked > src/types/database.ts",
5    "generate-types:local": "supabase gen types typescript --local > src/types/database.ts",
6    "db:migrate": "supabase db push && npm run generate-types",
7    "typecheck": "tsc --noEmit"
8  }
9}

1-- In your migration SQL
2create type public.status as enum ('pending', 'active', 'completed', 'cancelled');
3
4create table public.tasks (
5  id uuid primary key default gen_random_uuid(),
6  title text not null,
7  status public.status default 'pending',
8  created_at timestamptz default now()
9);
10
11alter table public.tasks enable row level security;