Vue 3 和 Typescript - 无法访问方法中的数据属性

Question

我试图用我正在编写的方法访问我的数据，但它似乎不起作用。我收到 TS2339 Typescript 错误，指出类型中不存在该属性。TS2339: Property 'players' does not exist on type '{ onAddPlayers(): void; getPlayerPlaceholder(index: number): string; }'.       47 |   methods: {    48 |     onAddPlayers() {  > 49 |       this.games = prepareGames(this.players as PadelPlayer[]);       |                                      ^^^^^^^    50 |     },    51 |     getPlayerPlaceholder(index: number) {    52 |       const playerNumber = Number(index) + 1;这是该组件的代码：<script>import { PadelGame } from "@/models/padelGame.interface";import { getPadelPlayers, prepareGames } from "../services/americanoService";import { PadelPlayer } from "@/models/padelPlayer.interface";const padelGames: PadelGame[] = [];export default {  data() {    return {      players: getPadelPlayers(),      games: padelGames,    };  },  methods: {    onAddPlayers() {      this.games = prepareGames(this.players as PadelPlayer[]);    },    getPlayerPlaceholder(index: number) {      const playerNumber = Number(index) + 1;      return "Spelare " + playerNumber;    },  },};</script>

Answer 1

defineComponent要获得类型推断，您应该使用从 vue 导入来创建组件实例：

<script>

import { PadelGame } from "@/models/padelGame.interface";

import { getPadelPlayers, prepareGames } from "../services/americanoService";

import { PadelPlayer } from "@/models/padelPlayer.interface";

import {defineComponent} from 'vue'

const padelGames: PadelGame[] = [];

export default defineComponent({

  data() {

    return {

      players: getPadelPlayers(),

      games: padelGames,

    };

  },

  methods: {

    onAddPlayers() {

      this.games = prepareGames(this.players as PadelPlayer[]);

    },

    getPlayerPlaceholder(index: number) {

      const playerNumber = Number(index) + 1;

      return "Spelare " + playerNumber;

    },

  },

});

</script>