Say I have the following snippet:
interface State {
alarms: Alarm[];
}
export default class Alarms extends React.Component<{}, State> {
state = {
alarms: []
};
Since I am trying to set alarms: [] Typescript doesn't like it, as [] != Alarm[]. I found that I can use alarms: new Array<Alarm>() which initializes an empty typed array, however I don't really like this syntax - is there an easier/better approach?
The problem is that when you create a field in a class the compiler will type that field accordingly (either using the explicit type or an inferred type from the initialization expression such as in your case).
If you want to redeclare the field, you should specify the type explicitly :
export default class Alarms extends React.Component<{}, State> {
state: Readonly<State> = {
alarms: []
};
}
Or set the state in the constructor:
export default class Alarms extends React.Component<{}, State> {
constructor(p: {}) {
super(p);
this.state = {
alarms: []
};
}
}
You could also cast the array to the expected type, but if there are a lot of fields it would be better to let the compiler check the object literal for you.
setState() in constructor? It seems to be possible to just use this.state = {...} here.extends clause and on the state (as Readonly<State>) but either solution should work :)
constructor()." reactjs.org/docs/react-component.html#constructorWould
alarms: [] as Alarm[]
work for Typescript and for you ?
See this question on how you can cast arrays in Typescript : TypeScript casting arrays
Declaration:
alarms: Array<Alarm>
Initialization in state :
this.setState({
var1:'',
var2:''
});
I prefer the above declaration
