Jss Typescript cannot accept value of array

[heyymarco]

hi, after i upgrading jss to v 10.6.0, my code break!

It seem the typescript definition is wrong. See the TS code below:

const otherStyle1: JssStyle = {
    background: 'red',
    opacity: 5,
};
const otherStyle2: JssStyle = {
    background: 'red',
    opacity: 5,
};
const test = createUseStyles({
    main: {
        extend: otherStyle1 // FINE, otherStyle1 is acceptable JssValue
    },
});
const test2 = createUseStyles({
    main: {
        extend: [otherStyle1, otherStyle2]  // <== TYPESCRIPT ERROR HERE
    },
});

It seem the prop value only accept string, number, another style, but not an array <prop name: string> : <prop value: (string | number | function)>

in jss however, the extend is a special prop name. We should either passing a single value or an array of value, so the TS definition should be: <prop name: string> : <prop value: (string | number | function | (string | number | function)[])>

to temporary workaround the problem, I just force the prop value as non array:

const test2 = createUseStyles({
    main: {
        extend: [otherStyle1, otherStyle2] as JssStyle
    },
});

[ITenthusiasm]

@heyymarco Hmmmmm. This does seem a little strange to me. However, I'm able to use string arrays without any errors in our test file.

Do you have a reproducible repo or a code sandbox that we could use by any chance?

[heyymarco]

it works in javascript but error in typescript. TS is aware of the type of variables.

[ITenthusiasm]

Hey @heyymarco. What I was saying was that both JS and TS seem to work fine in our tests. That's why I was asking if you had a reproducible repo or code sandbox that we could use.

Otherwise, it's not readily apparent if this is an actual bug.

[heyymarco]

here I reproduce the error: https://codesandbox.io/s/flamboyant-vaughan-mk079?file=/src/App.tsx

the error: Type 'JssStyle<any, undefined>[]' is not assignable to type 'false | (string & {}) | (number & {}) | (string | number | (string | number)[])[] | Observable<false | (string & {}) | { alignContent?: (string & {}) | ...

[ITenthusiasm]

Thank you!!!

[ITenthusiasm]

Mkay. So the issue isn't that TypeScript is rejecting arrays. It's specifically that TypeScript is rejecting an array of objects.

@kof Can you confirm whether or not properties are supposed to be able to accept arrays of objects in the JS API? (Maybe with an example or doc link too? I wasn't aware of this functionality.)

[ITenthusiasm]

If something does need to be fixed, I think it's probably in the JssValue's type, under jss/src/index.d.ts

[heyymarco]

the extend is a special prop than other props. It should accept a single value or multiple values (an array).