CODEWITHSUNDEEP
reactjstypescript
Selina
Selina

Reputation: 153

Type 'any[]' is not assignable to type '[]'

I have a third party component that is type []/ But I have a state var that must be type any.

I cannot pass that to the component as it gives this error: Type 'any[]' is not assignable to type '[]'.

Is there any way to convert the TYPE any[] to [] and then pass it?

This is the component that I cannot touch:

 <Component xxx={branchesShow}/>

the type of xxx is this:
    export default interface PropsType {
      xxx?:[];
    }

And I do not want to change it or touch it. it works fine when I do send data directly from api call to it. But since I need to filter it, it gives me type issues....

Upvotes: 0

Views: 14155

Answers (2)

Selina
Selina

Reputation: 153

yes the problem was I had this in the type: branches?:[]

This was not making it array. was just forcing it to be 0 array. changed to this and it worked.

Thanks... branches?:Array<{}>;

Upvotes: 3

Alex Wayne
Alex Wayne

Reputation: 187034

The full error you are probably getting is this:

const myArr = [1,2,3] as any[]
const jsx = <Component xxx={myArr} />
// Type 'any[]' is not assignable to type '[]'.
//  Target allows only 0 element(s) but source may have more.(2322)

Playground

Note that second line of the error message.

The type [] specifically means an array with zero elements. It's delcaring a tuple (an array of fixed length with each position having a specific type), not an array of arbitrary length. The type any[] is an array type and may have any number of elements, so typescript will not allow it to be assigned here.

Which means that given these props:

export default interface PropsType {
  xxx?:[];
}

The only values assignable to that prop are an empty array [], or undefined. If you try to to assign an array type to that prop typescript will yell at you because that array might not be empty.

Assigning anything besides an empty array is a type error, according to the author of this third party component.

I would advise you to check the documentation of that third party component in order to be sure you are using it correctly.

Upvotes: 1

Related Questions