Typescript et React définissant l’état initial avec un tableau vide typé

Question

Dis que j'ai l'extrait suivant:

interface State {
  alarms: Alarm[];
}
export default class Alarms extends React.Component<{}, State> {
  state = {
    alarms: []
  };

Depuis que je tente de définir alarms: [] TypeScript ne l'aime pas, comme [] != Alarm[]. J'ai trouvé que je pouvais utiliser alarms: new Array<Alarm>(), qui initialise un tableau typé vide, mais je n'aime pas trop cette syntaxe - existe-t-il une approche plus simple/meilleure?

Answer 1

Le problème est que lorsque vous créez un champ dans une classe, le compilateur le saisira en conséquence (en utilisant le type explicite ou un type inféré à partir de l'expression d'initialisation, comme dans votre cas).

Si vous souhaitez redéclarer le champ, vous devez spécifier le type explicitement:

export default class Alarms extends React.Component<{}, State> {
    state: Readonly<State> = {
        alarms: []
    };
}

Ou définissez l'état dans le constructeur:

export default class Alarms extends React.Component<{}, State> {
    constructor(p: {}) {
        super(p);
        this.state = {
            alarms: []
        };
    }
}

Vous pouvez également convertir le tableau en type attendu, mais s'il y a beaucoup de champs, il serait préférable de laisser le compilateur vérifier le littéral de l'objet pour vous.

Answer 2

Aurait

alarms: [] as Alarm[]

travailler pour TypeScript et pour vous?

Voir cette question sur la manière de convertir des tableaux en TypeScript: Tableaux de type TypeScript