Vue3中泛型使用unknown优于any问题

// 泛型组件 - 使用 unknown
defineComponent<{ data: unknown }>({
  props: {
    data: {
      type: Object as PropType<unknown>,
      required: true
    }
  }
})

// 组合式函数 - 使用 unknown
function useAsyncData<T = unknown>() {
  const data = ref<T>()
  // ... 逻辑
  return { data }
}

// 处理不确定的 API 响应
async function fetchData(): Promise<unknown> {
  const response = await fetch('/api/data')
  return response.json()
}

// ❌ 不推荐 - 失去类型安全
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
}

interface Props {
  // 对于不确定的数据结构
  externalData: unknown
  // 对于已知结构使用具体类型
  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)) {
      // 现在可以安全使用
      console.log(props.externalData.name)
    }
  }
})

// 灵活的泛型，默认为 unknown
function useFetch<T = unknown>(url: string) {
  const data = ref<T>()
  const error = ref<unknown>() // 错误信息也用 unknown
  
  try {
    // ... 获取数据
  } catch (e) {
    error.value = e
  }
  
  return { data, error }
}

// 使用时指定具体类型
const { data: user } = useFetch<User>('/api/user')

// 事件处理器使用 unknown
function handleEvent(event: unknown) {
  // 进行类型守卫检查
  if (isCustomEvent(event)) {
    console.log(event.detail)
  }
}

// 创建类型守卫
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
}