如何为存储接口类对象的响应式数组添加正确强类型？

方法一：使用ref配合泛型（推荐） #

ref天生支持数组的响应式，加上TS泛型就能直接指定数组元素类型：

import { ref } from 'vue';
import SalesData from './你的SalesData类路径';

// 初始化空的强类型响应式数组
const salesDataList = ref<SalesData[]>([]);

数据转换与赋值

拿到HTTP返回的原始数据后，将每个数据项转换为SalesData实例，直接赋值给ref的value即可：

async function loadSalesData() {
  // 替换为实际的API请求逻辑
  const rawResponse = await fetch('/api/sales');
  const rawData = await rawResponse.json();
  
  // 映射为SalesData实例数组
  salesDataList.value = rawData.map(item => new SalesData(item));
}

方法二：使用reactive包裹带类型的对象 #

如果习惯用reactive，需要给包裹的对象明确指定类型，避免TS推断为any：

import { reactive } from 'vue';
import SalesData from './你的SalesData类路径';

// 定义包含数组的响应式状态，指定元素类型为SalesData
const salesState = reactive<{ list: SalesData[] }>({
  list: []
});

数据更新方式

同样转换数据后更新数组：

async function loadSalesData() {
  const rawData = await yourApiCall();
  salesState.list = rawData.map(item => new SalesData(item));
  
  // 也可以单个添加元素
  // salesState.list.push(new SalesData(singleItem));
}

为什么之前的写法有问题？ #

• 直接声明const arr: SalesData[] = []：这是普通数组，Vue无法追踪其变化，自然没有响应式
• reactive({})不加类型：TS会默认推断为{ [key: string]: any }，所以数组会变成any[]，失去强类型校验

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