如何为Nuxt 3中getQuery(event)的year查询参数添加类型定义

你之前的写法报错，是因为getQuery(event)返回的QueryObject类型里，所有属性都是可选的，且值的类型为string | string[] | undefined，但你定义的queryInterface要求year是必填的number，两者类型不兼容，所以TypeScript抛出了错误。

下面是几种可行的解决方式：

方式一：类型断言+类型转换 #

直接对查询结果做类型断言，再将字符串类型的year转换为数字，同时处理可选情况：

export default defineEventHandler(async (event) => {
  // 断言year为可选字符串类型
  const { year } = getQuery(event) as { year?: string };
  // 转换为数字，若不存在则设为undefined
  const parsedYear = year ? Number(year) : undefined;

  // 验证转换后的数字是否有效
  if (parsedYear && !isNaN(parsedYear)) {
    // 执行剩余逻辑
  }
});

方式二：类型守卫+参数验证 #

通过自定义类型守卫，确保参数符合预期类型，适合需要严格校验的场景：

export default defineEventHandler(async (event) => {
  // 定义预期的参数类型
  interface ValidatedQuery {
    year?: number;
  }

  // 自定义类型守卫函数
  function isValidQuery(obj: unknown): obj is ValidatedQuery {
    if (typeof obj !== 'object' || obj === null) return false;
    const year = (obj as ValidatedQuery).year;
    return year === undefined || (typeof year === 'number' && !isNaN(year));
  }

  const rawQuery = getQuery(event);
  // 先将字符串类型的year转换为数字
  const parsedQuery = {
    ...rawQuery,
    year: rawQuery.year ? Number(rawQuery.year) : undefined
  };

  if (isValidQuery(parsedQuery)) {
    const { year } = parsedQuery;
    // 执行剩余逻辑
  }
});

方式三：直接标注可选类型 #

如果不需要严格校验，仅需类型提示，可以直接给解构的year标注可选字符串类型，再手动转换：

export default defineEventHandler(async (event) => {
  const { year }: { year?: string } = getQuery(event);
  const yearNum = year ? parseInt(year, 10) : undefined;

  if (yearNum && !isNaN(yearNum)) {
    // 执行剩余逻辑
  }
});

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