有没有更好的方法来访问 Supabase 生成的 TS 类型？

Question

我在我的 supabase 数据库中创建了一个名为的表customer。使用生成我的类型

npx supabase gen types typescript --project-id "$PROJECT_REF" --schema public > types/supabase.ts

在我的 React 应用程序中，这就是我引用生成类型的方式。

const [customerDetails, setCustomerDetails] = useState<Database["public"]["Tables"]["customer"]["Row"]>()

能不能再干净一点，像这样？

const [customerDetails, setCustomerDetails] = useState<customer>()

Answer 1

你可以使用这样的东西

https://github.com/FroggyPanda/better-supabase-types

对 SUPABASE 生成的类型进行后处理。这将生成一个新的架构文件，其内容如下

export type Account = Database['public']['Tables']['accounts']['Row'];
export type InsertAccount = Database['public']['Tables']['accounts']['Insert'];
export type UpdateAccount = Database['public']['Tables']['accounts']['Update'];

如果您不需要其他依赖项或编写自己的后处理器脚本，您还可以使用此处建议的一些辅助类型来改进类型：

export type Row<T extends keyof Database['public']['Tables']> = Database['public']['Tables'][T]['Row'];
export type InsertDto<T extends keyof Database['public']['Tables']> = Database['public']['Tables'][T]['Insert'];
export type UpdateDto<T extends keyof Database['public']['Tables']> = Database['public']['Tables'][T]['Update'];

这将导致

import { InsertDto, Row, UpdateDto } from '@src/interfaces/database';

export type Location = Row<'location'>;
export type LocationInsertDto = InsertDto<'location'>;
export type LocationUpdateDto = UpdateDto<'location'>;