typescript
Patrones TypeScript estrictos para este portfolio (Vue 3 + Nuxt 4). Trigger: Al definir tipos, interfaces, composables tipados o props de componentes Vue.
Installation
Follow the repository instructions for this skill and your agent. Review the files and dependencies before adding it to your workflow.
View source ↗GuidesSkill instructions
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'
Examples
Read the usage examples in the source repository.
View source ↗Source history
- Indexed on
- 2026-03-11
- Index updated
- 2026-03-11
- Branch
- main
Index and sync dates describe this directory. View the source repository for code history.
GitHub ↗chat Comments (0)
Sign in to join the discussion and leave a comment.
No comments yet. Be the first to share your thoughts!