Vue3 + Ts 解决 “unknown” 问题

zzz

常见问题场景：当没有明确定义类型时，TypeScript 会将变量推断为unknown类型。
1.未定义类型的ref

1. const user = ref(null); // 类型为 Ref<null>
   
2. user.value = { name: "John", age: 30 };
   
3. // 此时访问 user.value.name 会报错：对象的类型为 "unknown"

复制代码

2.从API获取数据

1. const data = ref([]); // 类型为 Ref<never[]>
   
2. // 从 API 获取数据后赋值
   
3. data.value = await fetchData();
   
4. // 访问 data.value[0].property 会报错

复制代码

解决方案：
1.明确类型定义为ref提供泛型参数（使用TypeScript接口定义数据结构)

1. interface User {
   
2.   id: number;
   
3.   name: string;
   
4.   email: string;
   
5. }
   
6. const user = ref<User | null>(null)

复制代码

2.使用类型断言(当从外部源获取数据时，使用as关键字明确类型)

1. const userData = ref<User[]>([]);
   
2. // 从 API 获取数据时
   
3. userData.value = await fetchUsers() as User[];

复制代码

3.使用类型守卫(编写函数验证未知数据是否符合预期类型)

1. function isUser(data: unknown): data is User {
   
2.   return typeof data === 'object' &&
   
3.   data !== null &&
   
4.   'name' in data &&
   
5.   'email' in data;
   
6. }

复制代码