// 定義一個按鈕組件
// 使用類型字面量定義 props
const props = defineProps<{
  size: 'small' | 'medium' | 'large'
  disabled?: boolean
  loading?: boolean
}>()

// 在模板中直接使用
// 現(xiàn)在有了完整的類型提示和檢查

// 使用 withDefaults 輔助函數(shù)設置默認值
interface ButtonProps {
  size: 'small' | 'medium' | 'large'
  disabled?: boolean
  loading?: boolean
}

const props = withDefaults(defineProps<ButtonProps>(), {
  size: 'medium',
  disabled: false,
  loading: false
})

// 運行時聲明與類型聲明結合
const props = defineProps({
  // 運行時聲明
  label: {
    type: String,
    required: true
  },
  // 類型聲明
  count: {
    type: Number,
    default: 0
  }
})

// 定義類型
interface Props {
  label: string
  count?: number
}

// 這種寫法在某些復雜場景下很有用

// 定義表單組件的事件
// 使用類型字面量定義 emits
const emit = defineEmits<{
  // submit 事件攜帶一個表單數(shù)據對象
  submit: [formData: FormData]
  // cancel 事件不攜帶數(shù)據
  cancel: []
  // input 事件攜帶字符串值
  input: [value: string]
}>()

// 在方法中觸發(fā)事件
function handleSubmit() {
  const formData = gatherFormData()
  // TypeScript 會檢查 formData 是否符合 FormData 類型
  emit('submit', formData)
}

function handleCancel() {
  // 不傳遞參數(shù)，符合類型定義
  emit('cancel')
}

// 使用接口定義事件類型
interface FormEvents {
  submit: (data: FormData) => void
  cancel: () => void
  validate: (isValid: boolean, errors: string[]) => void
}

const emit = defineEmits<FormEvents>()

// 在驗證方法中觸發(fā)復雜事件
function performValidation() {
  const isValid = validateForm()
  const errors = getValidationErrors()
  
  // TypeScript 確保我們傳遞正確的參數(shù)類型
  emit('validate', isValid, errors)
}

// 定義表格組件的 props 和 emits
interface TableProps {
  data: any[]
  columns: Column[]
  searchable?: boolean
  pagination?: boolean
}

const props = defineProps<TableProps>()

// 事件定義基于 props 的某些特性
const emit = defineEmits<{
  // 只有當 searchable 為 true 時才會有 search 事件
  search: [query: string]
  // 只有當 pagination 為 true 時才會有 pageChange 事件
  pageChange: [page: number]
  // 始終存在的選擇事件
  rowSelect: [row: any]
}>()

// 在搜索方法中條件性觸發(fā)事件
function handleSearch(query: string) {
  if (props.searchable) {
    // TypeScript 知道這個事件是有效的
    emit('search', query)
  }
}

// 定義一個通用的列表組件
interface ListProps<T> {
  items: T[]
  keyField: keyof T
  renderItem?: (item: T) => any
}

// 使用泛型定義 props
function defineListProps<T>() {
  return defineProps<ListProps<T>>()
}

// 在具體組件中使用
interface User {
  id: number
  name: string
  email: string
}

// 為 User 類型特化組件
const props = defineListProps<User>()

// 異步操作組件的完整類型定義
interface AsyncProps {
  data?: any
  loading?: boolean
  error?: string | null
}

interface AsyncEmits {
  retry: []
  reload: [force?: boolean]
  success: [data: any]
}

const props = defineProps<AsyncProps>()
const emit = defineEmits<AsyncEmits>()

// 在異步操作完成時觸發(fā)事件
async function fetchData() {
  try {
    const result = await api.fetch()
    emit('success', result)
  } catch (error) {
    // 錯誤處理
  }
}

// 錯誤的做法：試圖在運行時使用類型
const props = defineProps<{
  count: number
}>()

// 這在運行時是 undefined，因為類型信息在編譯時就被移除了
console.log(props.count.type) // undefined

// 正確的做法：使用運行時聲明
const props = defineProps({
  count: {
    type: Number,
    required: true
  }
})

// 定義帶有可選參數(shù)的事件
const emit = defineEmits<{
  // 第二個參數(shù)是可選的
  search: [query: string, options?: SearchOptions]
}>()

// 使用時要注意參數(shù)順序
function handleSearch(query: string) {
  // 可以只傳遞必填參數(shù)
  emit('search', query)
}

function handleAdvancedSearch(query: string, options: SearchOptions) {
  // 也可以傳遞所有參數(shù)
  emit('search', query, options)
}

// 使用類型別名簡化復雜類型
type UserProfile = {
  personal: {
    name: string
    age: number
  }
  preferences: {
    theme: 'light' | 'dark'
    language: string
  }
}

const props = defineProps<{
  profile: UserProfile
}>()

// 這樣既保持了類型安全，又讓代碼更清晰

// 父組件提供數(shù)據
const props = defineProps<{
  theme: 'light' | 'dark'
  locale: string
}>()

// 基于 props 提供全局配置
provide('appConfig', {
  theme: props.theme,
  locale: props.locale
})

// 子組件注入并使用
const config = inject('appConfig')

const props = defineProps<{
  items: any[]
  filter: string
}>()

const emit = defineEmits<{
  filtered: [results: any[]]
}>()

// 監(jiān)聽 props 變化并觸發(fā)事件
watch(() => props.filter, (newFilter) => {
  const filtered = filterItems(props.items, newFilter)
  emit('filtered', filtered)
})

// 基于 props 計算衍生數(shù)據
const sortedItems = computed(() => {
  return props.items.sort(sortFunction)
})

const props = defineProps<{
  // 對于大型配置對象，使用 shallowRef 避免不必要的響應式開銷
  config: AppConfig
  // 對于頻繁變化的數(shù)據，保持深度響應式
  items: any[]
}>()

import type { PropType } from 'vue'

const props = defineProps({
  // 使用 PropType 進行運行時類型驗證
  complexData: {
    type: Object as PropType<ComplexData>,
    required: true,
    validator: (value: ComplexData) => {
      return validateComplexData(value)
    }
  }
})