TypeScript中useFetch出现TS2339属性不存在警告的简化解决方法

核心思路：利用useFetch的泛型参数指定返回数据类型 #

不用手动给解构的每个变量声明类型，直接给useFetch传入API响应的具体类型即可，这是最简洁的解决方式：

1. 先定义API返回数据的具体类型（替换你之前的any，更安全）

// 完全匹配接口实际返回结构来定义
interface ApiResponse {
  success: boolean;
  models: any[]; // 建议把any换成models的实际类型，比如Model[]，更符合类型安全
}

2. 调用useFetch时传入泛型参数

const { data, pending, refresh, error } = useFetch<ApiResponse>(() => '/api/abc')

这样处理后，TypeScript会自动推导data的类型为Ref<ApiResponse | null | undefined>（具体取决于你使用的框架中useFetch的实现），访问data.value?.success和data.value?.models时就不会再出现TS2339错误，而且pending、refresh、error的类型也会自动继承useFetch的默认正确类型，不用再手动写any。

为什么比原有写法更简洁？ #

• 避免了手动给解构的每个变量声明繁琐的联合类型
• 利用useFetch的泛型能力自动推导类型，代码更简洁易维护
• 明确了API返回数据的结构，比用any更符合TypeScript的类型安全原则

内容的提问来源于stack exchange，提问作者Lawyer Kenny