Typescript/Vue3 - 强制使用类型“任何”

Question

我有一个可组合的函数，它返回一个对象数组和一个接收字符串但不返回任何内容的函数。

以下代码“有效”并且不会引发任何错误。

import { ref } from "vue";
import { useRoute } from "vue-router";

interface RouterHelper {
    children: any;
    getChildrenOf: (name: string) => void;
}

export const routerHelper = (): RouterHelper => {
    const route = useRoute();
    const children = ref();

    const getChildrenOf = (name: string) => {
        children.value = route?.matched
            ?.find((r) => r.name === name)
            ?.children.filter((c) => c.alias);
    };

    return { children, getChildrenOf };
};

但是，它并不完全准确。例如，在声明 children ref 时，应该是：

const children = ref([]);

但我收到此错误：

TS2322: Type 'RouteRecordRaw[] | undefined' is not assignable to type 'never[]'.

另外，在界面中，我必须为 children 属性使用 any 而不是正确类型的 []。

请注意，我对 Typescript 很陌生，所以当我说“正确”时，请谨慎对待。

有什么方法可以让这段代码变得更好，而不是像任何方法一样使用全部捕获？

谢谢！

Answer 1

ref 最终分配给route.matched[].children 的子集，其类型为RouteRecordRaw[]。

Optional chaining（在route.matched.find(...)?.children 中）与undefined 短路，因此如果Array.prototype.find() 找不到匹配项，则引用类型将为undefined。否则，它将是RouteRecordRaw[]。

因此，引用的value 字段键入为RouteRecordRaw[] | undefined。最后，ref() 的返回值是Ref<T> 类型（其中T 是ref() 的参数类型），所以children 的类型是Ref<RouteRecordRaw[] | undefined>。

import { ref, Ref } from "vue";
import { useRoute, RouteRecordRaw } from "vue-router";

interface RouterHelper {
                         ?
    children: Ref<RouteRecordRaw[] | undefined>;
    getChildrenOf: (name: string) => void;
}

export const routerHelper = (): RouterHelper => {
    const route = useRoute();
                             ?
    const children: RouterHelper['children'] = ref([]);

    const getChildrenOf = (name: string) => {
        children.value = route.matched
            .find((r) => r.name === name)
            ?.children.filter((c) => c.alias);
    };

    return { children, getChildrenOf };
};