feat: set up typescript types for database objects

Author: themightychris

components/FeaturedProjects.vue

@@ -32,9 +32,10 @@
   </div>
 </template>
 
-<script setup>
-const { data: projects, pending, error } = await useLazyAsyncData('projects', async () => {
-  const client = useSupabaseClient()
+<script setup lang="ts">
+import type { Project, Database } from '~/types/supabase'
+const { data: projects, pending, error } = await useLazyAsyncData<Project[]>('projects', async () => {
+  const client = useSupabaseClient<Database>()
   const { data, error } = await client
     .from('projects')
     .select('*')

components/ProjectsList.vue

@@ -104,8 +104,9 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, computed } from '#imports'
+import type { Project, ProjectWithTags, Tag, Database } from '~/types/supabase'
 
 const searchQuery = ref('')
 const selectedStage = ref('')
@@ -128,7 +129,7 @@ const stageClasses = {
   'Drifting': 'bg-red-100 text-red-800'
 }
 
-const formatDate = (dateString) => {
+const formatDate = (dateString: string | null) => {
   if (!dateString) return 'N/A'
   return new Date(dateString).toLocaleDateString('en-US', {
     year: 'numeric',
@@ -137,8 +138,8 @@ const formatDate = (dateString) => {
   })
 }
 
-const { data: projects, pending, error } = await useLazyAsyncData('all-projects', async () => {
-  const client = useSupabaseClient()
+const { data: projects, pending, error } = await useLazyAsyncData<ProjectWithTags[]>('all-projects', async () => {
+  const client = useSupabaseClient<Database>()
   const { data, error } = await client
     .from('projects')
     .select(`
@@ -157,18 +158,18 @@ const { data: projects, pending, error } = await useLazyAsyncData('all-projects'
     throw error
   }
 
-  return data?.map(project => ({
+  return data?.map((project: Project & { project_tags: { tags: Tag }[] }) => ({
     ...project,
     tags: project.project_tags
       ?.map(pt => pt.tags)
-      .filter(tag => tag.class === 'tech') || []
+      .filter((tag): tag is Tag => tag.class === 'tech') || []
   }))
 })
 
 const filteredProjects = computed(() => {
   if (!projects.value) return []
 
-  return projects.value.filter(project => {
+  return projects.value.filter((project: ProjectWithTags) => {
     const matchesSearch = !searchQuery.value ||
       project.title.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
       project.readme?.toLowerCase().includes(searchQuery.value.toLowerCase())

types/index.ts

@@ -0,0 +1 @@
+export * from './supabase'

types/supabase.ts

@@ -0,0 +1,103 @@
+/**
+ * Generated types for Supabase schema
+ */
+
+/**
+ * Project stage enum type
+ */
+export type ProjectStage =
+  | 'Hibernating'
+  | 'Prototyping'
+  | 'Commenting'
+  | 'Testing'
+  | 'Maintaining'
+  | 'Drifting'
+
+/**
+ * Tag class enum type
+ */
+export type TagClass =
+  | 'tech'
+  | 'topic'
+  | 'event'
+
+/**
+ * Project model
+ */
+export interface Project {
+  id: number
+  title: string
+  handle: string
+  created_at: string
+  creator_id: number | null
+  revision_id: number | null
+  modified_at: string | null
+  modifier_id: number | null
+  maintainer_id: number | null
+  users_url: string | null
+  developers_url: string | null
+  readme: string | null
+  next_update: number | null
+  stage: ProjectStage
+  chat_channel: string | null
+}
+
+/**
+ * Tag model
+ */
+export interface Tag {
+  id: number
+  class: TagClass
+  created_at: string
+  creator_id: number | null
+  title: string
+  handle: string
+  description: string | null
+  items_count: number | null
+}
+
+/**
+ * Project tags junction model
+ */
+export interface ProjectTag {
+  project_id: number
+  tag_id: number
+}
+
+/**
+ * Transformed project with nested tags
+ */
+export interface ProjectWithTags extends Omit<Project, 'project_tags'> {
+  tags: Tag[]
+}
+
+/**
+ * Database schema type
+ */
+export interface Database {
+  public: {
+    Tables: {
+      projects: {
+        Row: Project
+        Insert: Omit<Project, 'id' | 'created_at'>
+        Update: Partial<Omit<Project, 'id' | 'created_at'>>
+      }
+      tags: {
+        Row: Tag
+        Insert: Omit<Tag, 'id' | 'created_at'>
+        Update: Partial<Omit<Tag, 'id' | 'created_at'>>
+      }
+      project_tags: {
+        Row: ProjectTag
+        Insert: ProjectTag
+        Update: Partial<ProjectTag>
+      }
+    }
+    Views: {}
+    Functions: {}
+    Enums: {
+      project_stage: ProjectStage
+      tag_class: TagClass
+    }
+  }
+}