Vue3 Composition API+TS 从route.query自动填充对象属性出现类型错误求助

问题根因 #

1. TypeScript 默认推导 Object.entries(route.query) 返回的键为通用 string 类型，无法确认该键是否是你定义的 ExpenseFilterType 的合法属性，直接作为对象索引就会触发类型不兼容错误。
2. 赋值时 TS 无法自动校验你传入的值是否匹配对应属性的类型要求，也会进一步引发类型报错。

解决方法 #

方案1：最简类型断言（适合小项目快速修复） #

直接对键做合法属性断言即可解决报错：

const initialFilter = {
  page: 1,
  search: '',
  min_date: '',
  max_date: '',
  min_price: '',
  max_price: '',
};
const filter = ref<ExpenseFilterType>(initialFilter);

Object.entries(route.query).forEach(([key, value]) => {
  // 断言key为ExpenseFilterType的合法属性
  const filterKey = key as keyof ExpenseFilterType;
  filter.value[filterKey] = filterKey === 'page' 
    ? parseInt((value as string) || '1') 
    : (value as string) || '';
});

方案2：带合法性校验（更严谨，避免多余参数污染） #

先定义合法键列表，遍历路由参数时先做校验，过滤掉不符合要求的query参数：

const initialFilter = {
  page: 1,
  search: '',
  min_date: '',
  max_date: '',
  min_price: '',
  max_price: '',
};
// 提取所有合法的filter键
const VALID_FILTER_KEYS = Object.keys(initialFilter) as Array<keyof ExpenseFilterType>;
const filter = ref<ExpenseFilterType>(initialFilter);

Object.entries(route.query).forEach(([key, value]) => {
  // 过滤非合法键的路由参数
  if (!VALID_FILTER_KEYS.includes(key as keyof ExpenseFilterType)) return;
  const filterKey = key as keyof ExpenseFilterType;
  filter.value[filterKey] = filterKey === 'page' 
    ? parseInt((value as string) || '1') 
    : (value as string) || '';
});

两种方案都可以解决当前的类型报错，方案2还能避免路由中携带的额外query参数被误写入filter对象。

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