语法错误：TypeError：无法使用 Vue 3 和 TypeScript 读取 Enum 的 null 属性“种类”答案

【问题标题】：Syntax Error: TypeError: Cannot read property 'kind' of null for Enum using Vue 3 and TypeScript语法错误：TypeError：无法使用 Vue 3 和 TypeScript 读取 Enum 的 null 属性“种类”
【发布时间】：2021-07-12 22:21:50
【问题描述】：

我在 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”。任何帮助将不胜感激！

【问题讨论】：

标签： node.js typescript lint vuejs3

【解决方案1】：

我的问题是我没有运行“vue add typescript”来将 typescript 添加到项目中。我对如何声明组件还有其他问题，但这最终是问题所在。

【讨论】：