在 TypeScript 项目中实现 Supabase Database 查询的类型推断

在使用 Supabase 时，配合 TypeScript 可以获得完整的类型提示与校验能力，这对于提升开发体验和减少运行时错误非常重要。

1. 安装 Supabase CLI

brew install supabase/tap/supabase

2. 登录 Supabase

supabase login

3. 生成数据库类型

pnpx supabase gen types typescript --project-id your-project-id > types/supabase.ts

4. 在查询时如何避免类型丢失

如果直接使用默认的 SupabaseClient，类型信息会丢失，导致查询结果无法获得正确的类型提示。例如：

export const getCourseBySlug = async (
  supabase: SupabaseClient,
  courseSlug: string
) => {};

// 需要使用
export const getCourseBySlug = async (
  supabase: SupabaseClient<Database>,
  courseSlug: string
) => {};

为了避免在项目中反复书写泛型，可以封装一个全局类型别名：

// src/types/supabase-client.ts
import type { SupabaseClient } from "@supabase/supabase-js";
import type { Database } from "@/types/database";

export type TypedSupabaseClient = SupabaseClient<Database>;

之后在项目中统一使用：

export const getCourseBySlug = async (
  supabase: TypedSupabaseClient,
  courseSlug: string
) => {
  // ...
};