如何在TypeScript中解构RouteParams并解决类型匹配报错？

方法1：通过unknown中转断言 #

按照TypeScript的提示，先把route.params断言为unknown再转为自定义的Params类型，可绕过类型重叠检查：

interface Params {
  year: string
  month: string
}
const { year, month } = route.params as unknown as Params

方法2：添加类型守卫校验 #

如果想兼顾类型安全和运行时参数合法性检查，可以编写类型守卫函数，确认参数存在后再解构：

interface Params {
  year: string
  month: string
}

function isParams(obj: unknown): obj is Params {
  return typeof obj === 'object' && obj !== null 
    && 'year' in obj && typeof (obj as Params).year === 'string'
    && 'month' in obj && typeof (obj as Params).month === 'string';
}

if (isParams(route.params)) {
  const { year, month } = route.params;
  // 此处year和month会被自动推断为string类型
} else {
  // 处理参数缺失的异常场景
  throw new Error('路由参数缺失year或month');
}

方法3：利用vue-router的泛型（推荐） #

vue-router的useRoute支持泛型参数，直接指定路由参数类型后，route.params会自动匹配自定义类型，无需额外断言：

import { useRoute } from 'vue-router';

interface Params {
  year: string
  month: string
}

// 给useRoute指定泛型，params会自动推断为Params类型
const route = useRoute<{ params: Params }>();
const { year, month } = route.params;

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