web-dev-qa-db-ja.com

Vue Typescriptでデータオブジェクトにデータタイプを設定

現在、webpackプロジェクトでTypeScriptでVue.jsを使用しています。

推奨構成 に示されているtsconfig.json 私が持っています：

"strict": true,

私のコンポーネントの1つの内部には：

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

しかし、コンパイルしようとすると、私は得る：

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

原因players: []はnever[]タイプ。

私の質問は：type Vue data object properties ??

typescriptvue.jsvuejs2
11
Plastic

ジョシュアの答えに追加するには、プレイヤーのタイプをインラインで宣言して、データが大きくなってもコードが冗長にならないようにします。

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

別のオプション：

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

dataメソッドには宣言されていない戻り値があります。

提供する場合、TypeScriptはplayersで何を期待するかを知っています。

data() {行を展開するだけです。

例えば。：

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

になる必要があります：

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

多田！プレイヤーは現在、anyの配列です。

4
Joshua Hansen

これは動作するはずです：

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

declare interface BaseComponentData {
  players: Player[]
}

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

「<>」構文を使用した型アサーションは禁止されています。代わりに「as」構文を使用してください。

次のようになります。

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