Vue + TypeScript 深度实战：组件类型、Props 泛型、Pinia 类型安全与 API 契约

<script setup lang="ts">
interface Props {
  title: string
  count?: number
  items: Item[]
  onUpdate?: (id: string) => void
}

// 运行时 + 编译时类型
const props = defineProps<Props>()

// 带默认值（使用 withDefaults）
const props = withDefaults(defineProps<Props>(), {
  count: 0,
  onUpdate: () => {},
})
</script>

<script setup lang="ts">
const props = defineProps({
  title: { type: String, required: true },
  count: { type: Number, default: 0 },
  items: { type: Array as PropType<Item[]>, required: true },
})
</script>

<script setup lang="ts">
const emit = defineEmits<{
  update: [value: string]           // 事件名 + 参数类型
  delete: [id: number]
  'update:modelValue': [val: boolean]  // v-model 事件
}>()

// 使用
emit('update', 'new value')
</script>

import { ref } from 'vue'

const count = ref<number>(0)           // Ref<number>
const user = ref<User | null>(null)     // Ref<User | null>
const list = ref<string[]>([])          // Ref<string[]>

// 复杂对象
interface State {
  loading: boolean
  data: Data | null
  error: Error | null
}
const state = ref<State>({
  loading: false,
  data: null,
  error: null,
})

interface FormState {
  email: string
  password: string
  errors: Record<string, string>
}

const form = reactive<FormState>({
  email: '',
  password: '',
  errors: {},
})

// form.email 类型为 string
// form.errors 类型为 Record<string, string>

const user = ref<User | null>(null)

// 类型自动推断为 string | undefined
const displayName = computed(() => user.value?.name?.toUpperCase())

// 显式声明返回类型
const userList = computed<User[]>(() => {
  return userStore.users.filter(u => u.active)
})

// stores/auth.ts
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

interface User {
  id: string
  name: string
  email: string
  role: 'admin' | 'user' | 'guest'
}

export const useAuthStore = defineStore('auth', () => {
  const user = ref<User | null>(null)
  const token = ref<string>('')

  const isLoggedIn = computed(() => !!user.value)
  const isAdmin = computed(() => user.value?.role === 'admin')

  async function login(email: string, password: string): Promise<void> {
    const res = await api.login({ email, password })
    user.value = res.user
    token.value = res.token
  }

  function logout(): void {
    user.value = null
    token.value = ''
  }

  return { user, token, isLoggedIn, isAdmin, login, logout }
})

// 使用时类型自动推导
const auth = useAuthStore()
auth.user?.name  // string | undefined
auth.login('a@b.com', 'pwd')  // 参数类型检查

// schemas/user.ts
import { z } from 'zod'

export const UserSchema = z.object({
  id: z.string().uuid(),
  name: z.string().min(1),
  email: z.string().email(),
  role: z.enum(['admin', 'user', 'guest']),
  createdAt: z.string().datetime(),
})

export type User = z.infer<typeof UserSchema>

// API 层
export async function fetchUser(id: string): Promise<User> {
  const res = await fetch(`/api/users/${id}`)
  const json = await res.json()
  return UserSchema.parse(json)  // 运行时验证
}

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "jsx": "preserve",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.vue"]
}

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

<script setup lang="ts">
const { title, count = 0 } = defineProps<Props>()  // Vue 3.4+ 支持解构
// title 和 count 是响应式的（编译时转换）
</script>