X 不可分配给“字符串”类型的参数

Question

如果这很直接，我很抱歉，我是 Typescript 的新手。 我遇到了一个错误，其中“类型 '{ params: { slug: any; }; }' 的参数不能分配给类型为 'string' 的参数。

我已经将数据类型定义为pathsData数据： const pathsData : string[] = []; 但我不确定为什么我会收到该错误？

export async function getStaticPaths( slug: Array<string>,) {
    const { data } = await client.query({
        query: GET_PAGES_URI,
    })

    const pathsData : string[] = [];

    data?.pages?.nodes && data?.pages?.nodes.map( page => {
        if (! isEmpty( page?.uri )) {
            const slugs = page?.uri?.split("/").filter( pageSlug => pageSlug );

            pathsData.push({ params: { slug: slugs } })   <--- Error occurs on this line
        }
    })

    return { 
        paths: pathsData,
        fallback: true,
    }
}

我的预期结果是一个看起来像这样的对象： { params: {slug: ['foo', 'bar'] } } 。 所以我假设我将字符串数组设置为 pathsData 是不正确的。

任何帮助是极大的赞赏

Answer 1

错误是让您知道像{params: {slug: any}}这样的数据结构不能添加到字符串数组中。 您已经告诉 typescript 'pathsData' 是一个字符串数组，因此它会期望添加一个字符串。 'slug' 是 'any' 的原因是因为您的const slugs没有定义数据类型。

在打字稿中，类型必须匹配。 所以字符串数组被限制为只有字符串。 相反，对象数组不能有字符串。 尝试类似const pathsData: {path: string}[] = []然后pathsData.push('somePath')你会得到类似的错误。 Tyepscript 通过你给它们的类型来限制变量。

你可以改变const pathsData: any[] = []; 你不会得到错误。 现在你告诉打字稿“pathsData 数组可以添加任何数据类型”。 现在您的数组可能看起来像[1, "name", true, {"name": "value"}] ：类似于您可能在 Javascript 中创建的数组。 虽然在某些情况下使用 'any' 很有用，并且可以消除您的错误，但它违背了提供类型的目的。 也就是说，如果您将所有内容都指定为“任何”类型，那么您最好只使用 Javascript。

最好的办法是为您的变量提供预期的类型。 如果您将字符串推送到数组，则pathsData: string[]如果您想要对象，则pathsData: {}[] 。

编辑：我明白你特别要求什么。 你会想要一个带有 'params' 属性的对象。 然后 'params' 将是一个具有 'slug' 属性的对象，其中 'slug' 是一个字符串数组。 然后你需要做myObj.params.slug.push('my strings') 。 但我试图了解您希望如何获得您正在寻找的数据结构。

Answer 2

您正在尝试将对象推送到字符串数组中，您可以使用以下语法：

 pathsData : any[] = []; 

因此，不推荐使用 any 类型，您应该始终尝试键入您的变量。 但它会成功。