X is not assignable to parameter of type 'string'-CodePudding

I apologize if this is pretty straight forward, i'm newer to Typescript. I am running into an error where the "Argument of type '{ params: { slug: any; }; }' is not assignable to parameter of type 'string'.

I've defined the data type to pathsData with: const pathsData : string[] = []; but am unsure why i am receiving that error?

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,
    }
}

My expected result would by an object that looks like this: { params: {slug: ['foo', 'bar'] } }. So I assume I'm setting the array of strings to pathsData is incorrect.

Any help is greatly appreciated

CodePudding user response：

The error is letting you know a data structure like {params: {slug: any}} can't be added onto an array of strings. You've told typescript 'pathsData' is an array of strings, so it will expect a string to be added. The reason 'slug' is 'any' here is because your const slugs doesn't have a data type defined.

In tyepscript types have to match up. So an array of strings is constrained to only have strings. Adversely, an array of objects can't have a string on it. Try something like const pathsData: {path: string}[] = [] and then pathsData.push('somePath') and you will get a similar error. Tyepscript is constraining variables by the types you have given them.

You could change const pathsData: any[] = []; and you wouldn't get the error. Now you are telling typescript "the array of pathsData can have any data type added to it". Now your array could look like [1, "name", true, {"name": "value"}]: similar to arrays you may create in Javascript. While using 'any' is useful in some cases, and could get rid of your error, it defeats the purpose of providing types. That is, if you assign everything a type of 'any' you might as well just use Javascript.

The best thing is to give the expected type to your variable. If you are pushing strings to the array then pathsData: string[] if you want objects then pathsData: {}[].

Edit: I see what you are specifically asking for. You would want an object with a 'params' property. Then 'params' would be an object with a 'slug' property, where 'slug' is an array of strings. Then you would need to do myObj.params.slug.push('my strings'). But I'm trying to understand how you expect to get the data structure you are looking for.

CodePudding user response：

You are trying to push an object in a string array, you could use this syntax:

 pathsData : any[] = [];

Therefore, using the any type is not recomended, you should always try to type your variables. But it will do the trick.