Declare Global Intersection Types for Transformed Supabase Data with Typescript

Share this video with your friends

Send Tweet

TypeScript reduces runtime errors and makes code more maintainable. In this lesson, we use the Supabase CLI to introspect our PostgreSQL schema and generate TypeScript definitions.

Additionally, we resolve a collection of TypeScript errors and create a custom union type for our transformed tweets - making it globally available throughout our Next.js application.

Code Snippets

Custom type for TweetWithAuthor

type TweetWithAuthor = Tweet & {
  author: Profile;
  likes: number;
  user_has_liked_tweet: boolean;
};

Generate TypeScript definitions

npx supabase gen types typescript --project-id your-project-id > lib/database.types.ts

Resources

Jon Meyers
Jon Meyers(instructor)
~ a year ago

Correction: this is an intersection type, not a union! 🧠

https://www.typescriptlang.org/docs/handbook/2/objects.html#intersection-types

Ika Pkhakadze
Ika Pkhakadze
~ a year ago

small suggestion: Supabase provides a helper type reference table row types: Tables<"tweets"> instead of DB["public"]["tables"]["tweets"]...