route.query拿到的参数如何做类型推断？

Question

const route = useRoute()
const { sceneId, entry, name, mode } = route.query

每个参数的类型为string | string[]
如何能统一改成string呢？

用const sceneId = route.query.sceneId as string可以实现，但是每个参数都得这样写一遍吗?

Answer 1

为什么会有这样的需求,像上面说了,万一这样不就爆了,程序还是严谨点会比较好

Answer 2

function getQueryStringValue(query: any, key: string): string {
  const value = query[key];
  return Array.isArray(value) ? value[0] : value;
}

// 用的时候：
const route = useRoute();
const sceneId = getQueryStringValue(route.query, 'sceneId');
const entry = getQueryStringValue(route.query, 'entry');
const name = getQueryStringValue(route.query, 'name');
const mode = getQueryStringValue(route.query, 'mode');

或者：

const route = useRoute();

// 假设所有值最终都应该是 string
const queryParams = Object.entries(route.query).reduce((acc, [key, value]) => {
  acc[key] = Array.isArray(value) ? value[0] : value;
  return acc;
}, {} as { [key: string]: string });

const { sceneId, entry, name, mode } = queryParams;

Answer 3

如果你的链接上有多个同名query，route.query会返回一个数组

// www.anyurl.com?name=123&name=456

console.log(route.query) // ['123', '456']

但是绝大多数情况下我们不会这样玩。

使用的时候我们认为query的值都是string，所以全部as一下是可以的。

更方便的办法是在.d.ts文件中扩展route.query的类型

如下：

import 'vue-router'

declear module 'vue-router' {
    interface RouteLocationNormalizedLoaded {
        query: Record<string, string>
    }
}

RouteLocationNormalizedLoaded 是route的类型，扩展route.query的类型为Record<string, string>可以应对大多数场景。

如果你确定你的应用只使用有限的几个已知类型的query，也可以声明成类似如下的形式

{
    query: {
        token?: string,
        status?: '01' | '02'
    }
}