TypeScriptのincludesでエラーが出てしまう

Question

実現したいこと

今百人一首の下の句を覚えるアプリを作成しています。
純粋にクイズをやる部分と、復習パート（クイズ部分に☆マークを付け、それが押下されたものを復習パートに持っていく）に別れています。

発生している問題・分からないこと

復習対象にマークを付ける機能、そして、マークの表示更新のincludesのところでエラーが発生しています。

エラーメッセージ

app.ts:20:35 - error TS2550: Property 'includes' does not exist on type 'number[]'. Do you need to change your target library? Try changing the 'lib' compiler option to 'es2016' or later.
20             isFavorite: favorites.includes(k.number) // お気に入りフラグを設定
app.ts:101:19 - error TS2550: Property 'includes' does not exist on type 'number[]'. Do you need to change your target library? Try changing the 'lib' compiler option to 'es2016' or later.
101     if (favorites.includes(currentKaruta.number)) {

該当のソースコード

// ページ読み込み時にJSONデータを取得
fetch('karuta.json')
    .then(response => response.json())
    .then((data: Karuta[]) => {
        karutaList = data.map(k => ({
            ...k,
            isFavorite: favorites.includes(k.number) // お気に入りフラグを設定
        }));
        nextQuestion();
    });

function updateFavoriteButton() {
    const favoriteButton = document.getElementById('favoriteButton')!;
    if (!currentKaruta) return;

    if (favorites.includes(currentKaruta.number)) {
        favoriteButton.textContent = '★';
        favoriteButton.style.color = 'gold';
    } else {
        favoriteButton.textContent = '☆';
        favoriteButton.style.color = 'gray';
    }
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

moduleとlibのバージョンの問題であることが読み取れたため、tsconfig.jsonをES2020に修正していますが、それでもエラーが出続けます。
それともmoduleとlibのバージョンの問題ではないのでしょうか？どなたかお知恵を拝借願いたいです。

補足

TypeScriptのバージョン

• 5.8.2

Node.jsのバージョン

• 18.14.0

Comments

[maisumakun]

TypeScriptのコンパイル環境は、どのような方法で構築・実行していますか？

[jimunomado]

コンパイル環境はvscode上で行っており、ターミナルからコマンドを打っております。

[maisumakun]

tsconfig.jsonの内容と、入力したコマンドも示していただけませんでしょうか。

[jimunomado]

jsonの内容は以下です（コメントアウトされているものは除いて掲載しています）

```json
{
"compilerOptions": {
"target": "ES2020", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
"lib": [
"ES2020",
"DOM"
],
"module": "ESNext", /* Specify what module code is generated. */
"forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
/* Type Checking */
"strict": true, /* Enable all strict type-checking options. */
"skipLibCheck": true /* Skip type checking all .d.ts files. */
}
}
```

また入力コマンドは `tsc app.ts`です。

Answer 1

皆様から様々なご提案をいただいた中申し訳ないのですが、includesを使わない方法に変更しました。。

type Karuta = {
    number: number;
    upper: string;
    lower: string;
};

let karutaList: Karuta[] = [];
let currentKaruta: Karuta | null = null;
let favoriteList: number[] = loadFavorites();
let correctCount = 0;
let totalCount = 0;

// JSONデータを読み込む
fetch('karuta.json')
    .then(response => response.json())
    .then((data: Karuta[]) => {
        karutaList = data;
        nextQuestion();
    });

function nextQuestion() {
    const upperText = document.getElementById('upperText')!;
    const choicesDiv = document.getElementById('choices')!;
    const result = document.getElementById('result')!;
    const nextButton = document.getElementById('nextButton')!;
    const favoriteButton = document.getElementById('favoriteButton')!;

    result.textContent = '';
    choicesDiv.innerHTML = '';

    // ランダムに1首選ぶ
    if (karutaList.length === 0) return;
    currentKaruta = karutaList[Math.floor(Math.random() * karutaList.length)];

    // `null` でないことを保証
    if (!currentKaruta) return;

    upperText.textContent = currentKaruta.upper;

    // 下の句の4択を生成（正解+不正解3つ）
    const wrongChoices = karutaList
        .filter(k => k.number !== currentKaruta!.number)
        .sort(() => Math.random() - 0.5)
        .slice(0, 3)
        .map(k => k.lower);

    const allChoices = [...wrongChoices, currentKaruta.lower].sort(() => Math.random() - 0.5);

    allChoices.forEach(choice => {
        const button = document.createElement('button');
        button.textContent = choice;
        button.onclick = () => checkAnswer(choice);
        choicesDiv.appendChild(button);
    });

    // お気に入りボタンの状態を更新（`includes()` を使わない方法）
    let isFavorite = false;
    for (let i = 0; i < favoriteList.length; i++) {
        if (favoriteList[i] === currentKaruta.number) {
            isFavorite = true;
            break;
        }
    }
    favoriteButton.textContent = isFavorite ? '★' : '☆';

    nextButton.style.display = 'none';
}

function checkAnswer(selected: string) {
    const result = document.getElementById('result')!;
    const nextButton = document.getElementById('nextButton')!;
    const scoreDisplay = document.getElementById('scoreDisplay')!;

    if (!currentKaruta) return;

    totalCount++;

    if (selected === currentKaruta.lower) {
        correctCount++;
        result.innerHTML = `正解！🎉`;
        result.style.color = 'green';
    } else {
        result.innerHTML = `残念！正解は「${currentKaruta.lower}」`;
        result.style.color = 'red';
    }

    // 正答率を更新
    const accuracy = totalCount > 0 ? ((correctCount / totalCount) * 100).toFixed(1) : '0';
    scoreDisplay.textContent = `成績: ${correctCount} / ${totalCount} （正答率: ${accuracy}%）`;

    nextButton.style.display = 'inline-block';
}

// お気に入りを保存
function saveFavorites() {
    localStorage.setItem('favorites', JSON.stringify(favoriteList));
}

// お気に入りを読み込む（型を保証）
function loadFavorites(): number[] {
    const data = JSON.parse(localStorage.getItem('favorites') || '[]');
    return Array.isArray(data) ? data.map(num => Number(num)) : [];
}

// お気に入り登録・削除（`includes()` を使わない方法）
function toggleFavorite() {
    const favoriteButton = document.getElementById('favoriteButton')!;
    if (!currentKaruta) return;

    let index = -1;
    for (let i = 0; i < favoriteList.length; i++) {
        if (favoriteList[i] === currentKaruta.number) {
            index = i;
            break;
        }
    }

    if (index !== -1) {
        // すでに登録されている場合は削除
        favoriteList.splice(index, 1);
        favoriteButton.textContent = '☆';
    } else {
        // 新規追加
        favoriteList.push(currentKaruta.number);
        favoriteButton.textContent = '★';
    }
    saveFavorites();
}

// 「次の問題」ボタン
document.getElementById('nextButton')!.addEventListener('click', nextQuestion);
document.getElementById('favoriteButton')!.addEventListener('click', toggleFavorite);