vue.js - Postavljanje tipa podataka u Vue data objektu s Typescript

Trenutno koristim Vue.js s Typescriptom u webpack projektu.

Kao što je navedeno u Preporučenoj konfiguraciji u mojoj tsconfig.json, imam:

 "strict": true,

Unutar jedne od mojih komponenti imam:

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);
       });
    },
 });

ali kada pokušam kompajlirati, dobijem:

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

Jer vjerujem da players: [] ima never[] tip.

Moje pitanje je: kako mogu zaključiti tip svojstava Vue data objekta?

Odgovor #1

Da nadovežem na Joshuein odgovor, možda biste htjeli deklarirati tip igrača u liniji kako vaš kod ne bi postao previše opširan kako vaši podaci budu veći.

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

druga opcija:

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

Odgovor #2

Ovo bi trebalo raditi:

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

declare interface BaseComponentData {
  players: Player[]
}

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

Odgovor #3

Vaša metoda data ima nedefiniranu vrijednost povrata.

Ako navedete jedan, TypeScript će znati što očekivati s players.

Samo trebate proširiti liniju data() {.

npr.

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

treba postati:

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

Tada! players sada je tipa Array od any.

Odgovor #4

Pronašao sam drugi način koji je bliži tipičnoj sintaksi, dok kod ostaje kratak.

data() {
  return new class {
    players: Player[] = []
  }();
},

Povezani članci