zzz 发表于 2025-9-11 15:37:46

Vue3 + Ts 解决 “unknown” 问题

本帖最后由 zzz 于 2025-9-11 15:41 编辑

常见问题场景:当没有明确定义类型时,TypeScript 会将变量推断为unknown类型。
1.未定义类型的refconst user = ref(null); // 类型为 Ref<null>
user.value = { name: "John", age: 30 };
// 此时访问 user.value.name 会报错:对象的类型为 "unknown"2.从API获取数据const data = ref([]); // 类型为 Ref<never[]>
// 从 API 获取数据后赋值
data.value = await fetchData();
// 访问 data.value.property 会报错解决方案:
1.明确类型定义为ref提供泛型参数(使用TypeScript接口定义数据结构)interface User {
id: number;
name: string;
email: string;
}
const user = ref<User | null>(null)2.使用类型断言(当从外部源获取数据时,使用as关键字明确类型)const userData = ref<User[]>([]);
// 从 API 获取数据时
userData.value = await fetchUsers() as User[];3.使用类型守卫(编写函数验证未知数据是否符合预期类型)function isUser(data: unknown): data is User {
return typeof data === 'object' &&
data !== null &&
'name' in data &&
'email' in data;
}
页: [1]
查看完整版本: Vue3 + Ts 解决 “unknown” 问题