Vue3中泛型使用unknown優(yōu)于any問題

更新時間：2025年10月27日 09:12:01 作者：BillKu

在Vue3中,建議優(yōu)先使用`unknown`而不是`any`,因為`unknown`提供了更好的類型安全保證,在組件Props、組合式函數(shù)、事件處理和類型守衛(wèi)中使用`unknown`,可以有效避免運行時錯誤,保持TypeScript的類型安全優(yōu)勢

兩者的區(qū)別

any

完全繞過 TypeScript 的類型檢查
可以賦值給任何類型，任何類型也可以賦值給它
失去了類型安全性

unknown

類型安全的 any
不能直接操作，需要先進行類型檢查或類型斷言
保持了類型安全性

在 Vue3 中的使用場景

使用any的情況（盡量避免）

// ? 不推薦 - 失去類型安全
function dangerousFunction<T = any>(value: T) {
  // 可以直接操作 value，但可能運行時出錯
  return value.someProperty // 可能不存在
}

// ? 更好的做法 - 使用 unknown 并進行類型檢查
function safeFunction<T = unknown>(value: T) {
  if (typeof value === 'object' && value !== null && 'someProperty' in value) {
    return (value as { someProperty: any }).someProperty
  }
  return undefined
}

Vue3 中的最佳實踐

1. 組件 Props

interface Props {
  // 對于不確定的數(shù)據(jù)結(jié)構(gòu)
  externalData: unknown
  // 對于已知結(jié)構(gòu)使用具體類型
  userData: User
}

defineComponent<Props>({
  props: {
    externalData: {
      type: Object as PropType<unknown>,
      required: true
    },
    userData: {
      type: Object as PropType<User>,
      required: true
    }
  },
  setup(props) {
    // 使用前進行類型檢查
    if (isUserData(props.externalData)) {
      // 現(xiàn)在可以安全使用
      console.log(props.externalData.name)
    }
  }
})

2. 組合式函數(shù)

// 靈活的泛型，默認為 unknown
function useFetch<T = unknown>(url: string) {
  const data = ref<T>()
  const error = ref<unknown>() // 錯誤信息也用 unknown
  
  try {
    // ... 獲取數(shù)據(jù)
  } catch (e) {
    error.value = e
  }
  
  return { data, error }
}

// 使用時指定具體類型
const { data: user } = useFetch<User>('/api/user')

3. 事件處理

// 事件處理器使用 unknown
function handleEvent(event: unknown) {
  // 進行類型守衛(wèi)檢查
  if (isCustomEvent(event)) {
    console.log(event.detail)
  }
}

類型守衛(wèi)輔助函數(shù)

// 創(chuàng)建類型守衛(wèi)
function isUser(data: unknown): data is User {
  return (
    typeof data === 'object' &&
    data !== null &&
    'id' in data &&
    'name' in data
  )
}

function isError(error: unknown): error is Error {
  return error instanceof Error
}