typescript

name: typescript description: > Patrones TypeScript estrictos para este portfolio (Vue 3 + Nuxt 4). Trigger: Al definir tipos, interfaces, composables tipados o props de componentes Vue. license: MIT metadata: author: blitz version: "1.0"

Interfaces planas (REQUIRED)

// ✅ ALWAYS: una interfaz por entidad, sin objetos inline
interface Project {
  _id: string
  title: string
  description?: string
  imageUrl?: string
  technologies?: string[]
  githubUrl?: string
  liveUrl?: string
}

// ❌ NEVER: objetos anidados inline
interface Project {
  meta: { githubUrl: string; liveUrl: string }  // NO
}

Nunca usar any

// ✅ unknown para tipos verdaderamente desconocidos
function parse(input: unknown): Profile {
  if (isProfile(input)) return input
  throw new Error('Invalid input')
}

// ✅ Genéricos para flexibilidad
const useSanityQuery = async <T>(query: string) => { ... }

// ❌ NEVER
function fetch(data: any): any { }

Props con defineProps tipado

// ✅ Siempre con interfaz explícita
interface Props {
  profile?: Profile | null
  projects?: Project[] | null
}
const props = defineProps<Props>()

// ❌ NEVER: runtime props sin tipos
defineProps(['profile', 'projects'])

Const types para valores fijos

// ✅ Objeto const → tipo derivado
const SECTIONS = {
  HERO: 'hero',
  ABOUT: 'about',
  PROJECTS: 'projects',
  CONTACT: 'contact',
} as const

type Section = (typeof SECTIONS)[keyof typeof SECTIONS]

// ❌ NEVER: union literal directo
type Section = 'hero' | 'about' | 'projects' | 'contact'

Type Guards

function isProfile(value: unknown): value is Profile {
  return (
    typeof value === 'object' &&
    value !== null &&
    'name' in value
  )
}

Imports de tipos

// ✅ Usar import type para tipos puros
import type { Profile } from '~/types'