語法錯誤：TypeError：無法使用 Vue 3 和 TypeScript 為枚舉讀取 null 的屬性“種類”

Question

我在 Vue 3 組件中定義一個枚舉，如下所示：

<script lang="ts">
import { defineComponent } from 'vue'

export enum PieceType
{
  None,
  Pawn,
  Rook,
  Knight,
  Bishop,
  Queen,
  King
}

export interface Piece
{
  position: Position,
  type: PieceType,
}

export interface Position
{
  row: number,
  col: number
}

export default defineComponent({
  props: {
    type: String,
    row: Number,
    col: Number
  },
  setup(props) {
    const getPiece = (piece: string) =>
    {
      console.log("Piece is:", piece)
      switch(piece)
      {
        case "R": return PieceType.Rook;
        case "K": return PieceType.Knight;
        case "B": return PieceType.Bishop;
        case "Q": return PieceType.Queen;
        case "K": return PieceType.King;
        case "P": return PieceType.Pawn;
        case "-": return PieceType.None;
        default: throw new Error("Invalid piece.")
      }
    }
    return {
      type: getPiece(props.type),
      position: {row: props.row, col: props.col}
    }
  }
})
</script>

當我將組件導入另一個組件時（組件等於 Piece）：

<script lang="ts">
import { defineComponent } from '@vue/composition-api';
import { Piece } from "../components/Piece";

export default defineComponent({
  components: [Piece],
  props: {

  },
  setup() {
    const board = 
    [
      ['R', 'N', 'B', 'Q', 'K', 'B', 'N', 'R'],
      ['P', 'P', 'P', 'P', 'P', 'P', 'P', 'P'],
      ['-', '-', '-', '-', '-', '-', '-', '-'],
      ['-', '-', '-', '-', '-', '-', '-', '-'],
      ['-', '-', '-', '-', '-', '-', '-', '-'],
      ['-', '-', '-', '-', '-', '-', '-', '-'],
      ['P', 'P', 'P', 'P', 'P', 'P', 'P', 'P'],
      ['R', 'N', 'B', 'Q', 'K', 'B', 'N', 'R']
    ];

    return { board }
  }
})
</script>

我收到以下錯誤：

Syntax Error: TypeError: Cannot read property 'kind' of null
 Occurred while linting > .\components\Piece.vue:39
    at Array.forEach (<anonymous>)
    at Array.forEach (<anonymous>)


 @ ./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/Board.vue?vue&type=script&lang=ts 3:0-44 6:15-20
 @ ./src/components/Board.vue?vue&type=script&lang=ts
 @ ./src/components/Board.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/App.vue?vue&type=script&lang=js  
 @ ./src/App.vue?vue&type=script&lang=js  
 @ ./src/App.vue  
 @ ./src/main.js  
 @ multi (webpack)-dev-server/client?http://192.168.3.235:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

錯誤發生在以下行：

case "R": return PieceType.Rook

我注意到，如果我擺脫 Enum 並用字符串替換它，那么它就可以工作，但我不明白為什么 Enum 不工作。 該錯誤沒有出現在我的 vscode 智能感知中，並且我沒有在任何地方的 for 循環中使用該組件來觸發錯誤中的“Array.ForEach”。 任何幫助，將不勝感激！

Answer 1

我的問題是我沒有運行“vue add typescript”來將 typescript 添加到項目中。 我對如何聲明組件還有其他問題，但這最終是問題所在。