web-dev-qa-db-fra.com

Définir le type de données dans Vue objet de données avec Typescript

J'utilise actuellement Vue.js avec TypeScript dans un projet de webpack.

Comme indiqué dans le Configuration recommandée dans mon tsconfig.json J'ai:

"strict": true,

À l'intérieur d'un de mes composants, j'ai:

declare interface Player {
    cod: string,
    param: string
  }

export default Vue.extend({
    name: 'basecomponent',
    data() {
      return {
        players: []
      };
    },
    created() 
      let self = this
      axios.get('fetch-data')
        .then((response) => {
          let res: Players[] = response.data;
          for(let i = 0; i < res.length; i++){
              self.players.Push(res[i]);
          }
        })
        .catch((error: string) => {
          console.log(error);
       });
    },
 });

mais quand j'essaye de compiler j'obtiens:

 error TS2345: Argument of type 'Player' is not assignable to parameter of type 'never'.

Parce que je crois players: [] a never[] type.

Ma question est: comment puis-je déduire le type Vue propriétés de l'objet de données ??

typescriptvue.jsvuejs2
11
Plastic

Pour ajouter à la réponse de Joshua, vous voudrez peut-être déclarer le type de joueurs en ligne afin que votre code ne devienne pas trop verbeux à mesure que vos données augmentent.

data() {
  return {
    players: [] as Player[]
  };
},

une autre option:

data() {
  return {
    players: new Array<Player>()
  };
},
22
Michael Wilson

Votre méthode data a une valeur de retour non déclarée.

Si vous en fournissez un, TypeScript saura à quoi s'attendre avec players.

Il vous suffit de développer la ligne data() {.

par exemple.:

data() {
  return {
    players: []
  };
},

doit devenir:

data() : {
  people: Array<any>, // if possible, replace `any` with something more specific
} {
  return {
    players: []
  };
},

Tada! joueurs est désormais de type Array de tout.

4
Joshua Hansen

Cela devrait fonctionner:

declare interface Player {
  cod: string,
  param: string
}

declare interface BaseComponentData {
  players: Player[]
}

export default Vue.extend({
  name: 'basecomponent',
  data(): BaseComponentData {
    return {
      players: []
    };
  },
})
2
Ore4444

L'affirmation de type utilisant la syntaxe '<>' est interdite. Utilisez plutôt la syntaxe 'as'.

Il ressemblera à ceci:

players: [] as Player[]
2
Илья Карев