英文:
Is there a better way to access Supabase generated TS types?
问题
我已在我的 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>()
英文:
I have created a table called customer in my supabase db.
Generated my types using
npx supabase gen types typescript --project-id "$PROJECT_REF" --schema public > types/supabase.ts
In my React app this is how I am referencing the generated types.
const [customerDetails, setCustomerDetails] = useState<Database["public"]["Tables"]["customer"]["Row"]>()
Can it be a bit more cleaner, like this?
const [customerDetails, setCustomerDetails] = useState<customer>()
答案1
得分: 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'>;
英文:
You could use something like this
https://github.com/FroggyPanda/better-supabase-types
to post-process the types that supabase generates. That will generate a new schema file with content like this
export type Account = Database['public']['Tables']['accounts']['Row'];
export type InsertAccount = Database['public']['Tables']['accounts']['Insert'];
export type UpdateAccount = Database['public']['Tables']['accounts']['Update'];
If you don't want another dependency or write your own post-processor script, you could also improve the types with some helper types as suggested here:
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'];
Which will lead to
import { InsertDto, Row, UpdateDto } from '@src/interfaces/database';
export type Location = Row<'location'>;
export type LocationInsertDto = InsertDto<'location'>;
export type LocationUpdateDto = UpdateDto<'location'>;
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论