Here is the current code I am working with:
interface sizes {
[key: string]: Partial<CSSStyleDeclaration>[];
}
export const useStyleBlocks = (
resolution = 'large',
blocks = [{}]
): Partial<CSSStyleDeclaration>[] => {
const starterBlock = [] as Partial<CSSStyleDeclaration>[];
const handleBlocks = (key: sizes): Partial<CSSStyleDeclaration>[] => {
for (let i = 0; i < blocks.length; i++) {
// The error occurs on this line specifically at [key]
// A computed property name must be of type 'string', 'number', 'symbol', or 'any'
starterBlock.push({ [key]: blocks });
}
return starterBlock;
};
switch (resolution) {
case 'small':
// Another error appears here
// Argument of type 'string' is not assignable to parameter of type 'sizes'
handleBlocks('small');
break;
default:
handleBlocks({});
break;
}
return starterBlock;
};
The explanation of errors can be found commented within the code above ^
Any suggestions or ideas?
UPDATE:
If I modify the function handleBlocks like so:
const handleBlocks = (key: string): Partial<CSSStyleDeclaration>[] => {
for (let i = 0; i < blocks.length; i++) {
/* NOW I ENCOUNTER A NEW ERROR:
Argument of type '{ [x: string]: {}[]; }' is not assignable to parameter of type 'Partial<CSSStyleDeclaration>'.
Index signatures are incompatible.
Type '{}[]' is not assignable to type 'string'.ts(2345) */
starterBlock.push({ [key]: blocks });
}
return starterBlock;
};
With that adjustment, the error in the switch statement no longer persists.