vue.js typescriptでエラーが表示される

Question

vue.jsとtypescriotでテトリスのゲームを作成しているのですが、
エラーが表示され具体的な解決法がわかりません。

エラー画面。

vueページ

<script lang="ts" setup>
//状態管理を行うため reactive 関数を読み込む
import { reactive } from "vue";

//テトリミノを扱うため Tetromino クラスや TETROMINO_TYPE を読み込む
import { Tetromino, TETROMINO_TYPE } from '../common/Tetromino';

//テトリスのフィールドを扱うためのFieldクラスを読み込む
import { Field } from '../common/Field";

//適宣テトリスのフィールドを保持する
let staticField = new Field();

//テトリミノ落下中のテトリスのフィールドを保持する
const tetris = reactive({
  field:new Field(),
});

//落下中のテトリミノの状態を保持する
const tetromino = reactive({
  //テトリミノの状態を保持する
  current: Tetromino.random(),
  //テトリミノの位置を保持する
  position:{x: 3,y: 0},
});

//マス目の状態を元に対応したテトリミノの識別子(クラス名）を取得する
const classBlockColor = (x: number, y: number): string => {
  //y行目 x行目のマス目の状態を取得する
  const type = tetris.field.data[_y][_x];

  //テトリスのフィールドのマス目が空白以外なら、テトリミノの識別子を返却する
  if(type > 0) {
  return Tetromino.id(type as TETROMINO_TYPE);
}

//テトリスのフィールドのマス目が空白であれば、
//落下中のテトリミノの描画範囲をチェックする
const{x,y} = Tetromino.position;
const{data} = tetromino.current;

//落下中のテトリミノの描画範囲のマス目をチェックする
//マス目が空白以外であれば、対応するテトリミノの識別子を返却する
if(y <=_y &&_y < y + data.length) {
  const cols = data[_y - y];
    if(x <= x &&_x < x + cols.length) {
    if(cols[_x -x] > 0) {
      return Tetromino.id(cols[_x -x] as TETROMINO_TYPE);
      }
    }
  }

  //上記いずれの条件にも当てはまらなければ、空白を返却する
  return"";
  }

  setlnterval(() => {
    //2.テトリスを遊んでいる最中のフィールドを
    //テトリミノ出現直前のテトリスのフィールドに置き換える
    tetris.field = Field.deepCopy(staticField);

    //3.落下中のテトリミノの位置を1マス下げる
    tetromino.position.y++;

    //4.テトリスのフィールドに落下中のテトリミノの状態を反映する
    //2~4の処理を1秒毎に繰り返す
    tetris.field.update(tetromino.current.data,tetromino.position);
  },1*1000 /* 1秒ごと */);

  //1.テトリミノの状態を即時反映させることで、
  //テトリスのプレイ直後から画面上にテトリミノを出現させる
  tetris.field.updata(tetromino.current.data,tetromino.position);
</script>

<template>
  <h1>プレイ画面</h1>
  <h2>ユーザ名:{{ $route.query.name }}</h2>

  <div class="container">
    <!--
    2. script タグ内で定義した field 変数の二次元配列を、
    Vue のテンプレート構文で繰り返し呼び出し、フィールドのマス目を描画する
  -->
    <table class="field" style="border-collapse: collapse">
      <!--
      2.1. 行の数だけ繰り返し、tr タグでマスを表示する行を描画する
      :key には、行のインデックスを指定する
    -->
      <tr v-for="(row, y) in tetris.field.data" :key="y">
        <!-- テトリスのフィールドの各マス目にその状態を描画する (0: 空白, 1: I-テトリミノ, etc.) -->
        <!--
        2.2. 列の数だけ繰り返し、tr タグでマスを描画する
        :key には、行と列のインデックスを指定する
      -->
        <td
          class="block"
          v-for="(col, x) in row"
          :key="() => `${x}${y}`"
          :class="classBlockColor(x, y)"
        />
      </tr>
    </table>
  </div>
</template>

<!-- スタイルシートに SCSS 記法 (Sass) を利用する -->
<style lang="scss" scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: stretch;
}

.field {
  border: ridge 0.4em #2c3e50;
  border-top: none;
}

.block {
  width: 1em;
  height: 1em;
  border: 0.1px solid #95a5a6;

  /*
    各テトリミノに対応した色を扱うクラス定義
    .block-i, .block-o のようにクラスが定義される
    */
  &-i {
    background: #3498db;
  }
  &-o {
    background: #f1c40f;
  }
  &-t {
    background: #9b59b6;
  }
  &-j {
    background: #1e3799;
  }
  &-l {
    background: #e67e22;
  }
  &-s {
    background: #2ecc71;
  }
  &-z {
    background: #e74c3c;
  }
}
</style>

/各テトリミノのデータ構造を表す二次元配列
const tetrominos = [
  [
    [0],
  ],
  [
    [1,1,1,1],
  ],
  [
    [2,2],
    [2,2],
  ],
  [
    [0,3,3],
    [3,3,0],
  ],
  [
    [4, 4, 0],
    [0, 4, 4],
  ],
  [
    [0, 0, 5],
    [5, 5, 5],
  ],
  [
    [6, 0, 0],
    [6, 6, 6],
  ],
  [
    [0, 7, 0],
    [7, 7, 7],
  ],
];

const TETROMINO_TYPE = {
  I:1,// I-テトリミノ（水色）
  O:2,// O-テトリミノ（黄色）
  S:3,// S-テトリミノ（緑）
  Z:4,// Z-テトリミノ（赤）
  J:5,// J-テトリミノ（青）
  L:6,// L-テトリミノ（オレンジ）
  T:7,// T-テトリミノ（紫）
} as const;

//上記で定義したキーに対応する値で型を定義する
export type TETROMINO_TYPE = typeof TETROMINO_TYPE[keyof typeof TETROMINO_TYPE];

//プログラム上でテトリミノを扱うためのクラス定義
export class Tetromino {
  //クラス変数でテトリミノの種類を持つ
  private type: TETROMINO_TYPE

  //コンストラクターの引数にはテトリミノの種類を指定する
  constructor(type:TETROMINO_TYPE) {
    this.type = type;
  }

  //各テトリミノに対応したcssクラス名(識別子を取得する)関数
  static id(type:TETROMINO_TYPE):string {
    switch(type) {
      case TETROMINO_TYPE.I:
        return "block-i";
      case TETROMINO_TYPE.O:
        return"block-o";
      case TETROMINO_TYPE.S:
        return"block-s";
      case TETROMINO_TYPE.Z:
        return"block-z";
      case TETROMINO_TYPE.J:
        return"block-j";
      case TETROMINO_TYPE.L:
        return"block-I";
      case TETROMINO_TYPE.T:
        return"block-t";
      default:
        return"";
    }
  }

  //自身のテトリミノの２次元配列を取得する
  get data():number[][] {
    return tetrominos[this.type];
  }

  //ランダムな種類のテトリミノを取得する
  static random(): Tetromino {
    //1-7までの数値を取得する(空白以外のテトリミノの種類を取得する)
    const tetrominoTypes = tetrominos.length - 1;
    const type = Math.floor(Math.random()*tetrominoTypes) + 1;

    //typeの種類をTETROMINO_TYPEとして扱う
    return new Tetromino(type as TETROMINO_TYPE);
  }
}

vueファイルの
Tetrominoを記述していることろで、
Unknown word
と忠告が表示、
Tetromino.tsファイルでは、
const tetrominosで
tetrominos": Unknown word.
と忠告が表示されております。

vue.typescriotど素人で上記２つの忠告でどのような記述に変更すれば良いのか、エラー画面からどこのコードを読み解決に導けば良いのか？
ご教授いただいてもよろしいでしょうか？

vue@3.2.37
typescript@4.6.4

Comments

[airRnot]

Unknown wordの忠告は恐らくCode Spell Checkerという拡張機能によるものなのでここでは関係ないですね

Answer 1

import { Field } from '../common/Field";

この部分を

import { Field } from '../common/Field';

にしてみてはいかがでしょうか。

Comments

[airRnot]

ちなみに、エラー画面の一番上の赤い行を読むとどのような原因でエラーが発生しているのかが分かりますよ！
今回で言うと
「Unterminated string constant.」
ですね。

[iiii]

具体的なエラー表示の見方、解決方法をご教授いただきありがとうございました！