如何更简洁地引用Supabase生成的TypeScript类型？

你可以通过创建类型别名来实现简化，这里有两种实用方式：

方式一：直接在生成的类型文件中添加别名 #

打开生成的types/supabase.ts文件，在末尾手动添加类型别名：

// 定义customer表的查询结果类型别名
export type Customer = Database["public"]["Tables"]["customer"]["Row"];
// 如果需要用到新增/修改数据的类型（比如表单提交时的类型），也可以一并定义
export type CustomerInsert = Database["public"]["Tables"]["customer"]["Insert"];

之后在React组件里直接导入这个别名使用：

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

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

⚠️ 注意：如果后续重新执行supabase gen types命令生成类型，这个手动添加的别名会被覆盖，需要重新添加。

方式二：单独维护类型别名文件（推荐） #

为了避免重新生成类型时丢失自定义别名，建议创建一个独立的类型文件（比如types/db-types.ts）：

import { Database } from './supabase';

// 导出简化的类型别名
export type Customer = Database["public"]["Tables"]["customer"]["Row"];
export type CustomerInsert = Database["public"]["Tables"]["customer"]["Insert"];

然后在组件中导入这个文件的类型：

import { Customer } from '../types/db-types';

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

这种方式不会受重新生成Supabase类型的影响，更便于长期维护。

如果你坚持要用小写的customer作为类型名，把上面的Customer改成customer即可，不过按照TypeScript的通用命名规范，类型名通常采用大驼峰写法。

内容的提问来源于stack exchange，提问作者Null Head