I want to create an interface that has all the CSS properties as possible indices but it could have none, and I want to “index into” it.
This would be ideal but it is not working:
declare interface ICSSStyles {
[name: string]: ICSSStyle;
fontStyle?: ICSSStyle;
alignContent?: ICSSStyle;
color?: ICSSStyle;
}
declare interface ICSSStyle {
value: any;
weight: number;
}
let obj: ICSSStyles = {
fontStyle: {value: "italic", weight: 1000},
color: {value: "red", weight: 100}
}
for (let key in obj) {
console.log(obj[key]);
}
The error I get when I hover over alignContent is: “Property ‘alignContent’ of type ‘ICSSStyle | undefined’ is not assignable to ‘string’ index type ‘ICSSStyle’.”
All of the indices must be optional because it’s possible that any will be present or none. I also need to get to them through a string index, like the for…in loop above.
I have found similar questions Here and Here, but if they have given me the answer, I have missed it.
How can I set this up?