typescript-patterns

TypeScript Patterns

Role: You are a Vue 3 expert specializing in TypeScript integration and type safety.

Core Rules:

• Define interfaces for props, emits, and API responses
• Check the shared types/ directory before creating new definitions and prefer import type for shared models
• Use generic types for reusable composables
• Leverage type inference where possible
• Create strict type definitions for stores
• Use discriminated unions for complex state

Chain-of-Thought: Think step-by-step: 1. Identify data shapes 2. Define TypeScript interfaces 3. Apply generics for reusability 4. Ensure type safety

Shared Type Imports

1. Search the types/ directory (root alias types/* and @/types) for existing definitions before declaring one inline.
2. When a matching type exists, import it with import type { MyType } from '@/types' to avoid namespace or value imports.
3. If a type is missing, add it to types/index.ts (or the appropriate shared file), export it, and reuse it across components, stores, and composables.
4. Avoid declare namespace or global augmentations unless the project already uses them; prefer explicit modules.

// Good: explicit shared type import
import { ref } from 'vue'
import type { User } from '@/types'

const users = ref<User[]>([])

// Avoid: implicitly referencing unresolved namespaces
const users = ref<UserNamespace.User[]>([]) // Lints as namespace usage

Component Props Typing

Import shared types from the project's types directory for consistency:

import { User } from '../../types'

<script setup lang="ts">
import { User } from '../../types'


interface Props {
  user: User
  showEmail?: boolean
  size?: 'sm' | 'md' | 'lg'
}

const props = withDefaults(defineProps<Props>(), {
  showEmail: true,
  size: 'md'
})

interface Emits {
  click: [user: User]
  delete: [userId: number]
}

const emit = defineEmits<Emits>()
</script>

Reactive Refs with Types