TypeScriptのArrayのfilterでデータを絞り込むプログラムに挑戦します！

<template>
  <div>
    <table>
      <tbody>
        <tr v-for="(item, index) in filteredItems" :key="index">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.city }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
type Item = {
  [key: string]: string | number | boolean | undefined;
};

// サンプルデータ
const items: Array<Item> = [
  { id: 1, name: "Alice", age: 25, city: "Okinawa", disp: false },
  { id: 2, name: "Taro", age: 33, city: "Osaka", disp: false },
  { id: 3, name: "Ponkotsu", age: 35, city: "Fukuoka", disp: false },
  { id: 4, name: "Hanako", age: 40, city: "Tokyo", disp: false },
  { id: 5, name: "Latte", age: 21, city: "Nagoya", disp: false },
  { id: 6, name: "Honey", age: "", city: "", disp: true },
];

// 検索条件の型
type SearchCondition = {
  key: string;
  value: string | number | boolean;
  matchType: 1 | 2 | 3 | 4 | 5;
  range?: { min: number; max: number };
  disp?: boolean
};

// 検索条件の定義
const searchConditions: SearchCondition[] = [
  { key: "name", value: "A", matchType: 1, range: undefined, disp: true  }, // 前方一致
  { key: "city", value: "Tokyo", matchType: 2, range: undefined, disp: undefined  }, // 完全一致
  { key: "name", value: "kot", matchType: 3, range: undefined, disp: undefined  }, // 部分一致
  { key: "age", matchType: 4, value: "", range: { min: 20, max: 30 }, disp: undefined  }, // 範囲検索
  { key: "disp", matchType: 5, value: true, range: undefined, disp: undefined } , // 真偽
];

// フィルタリング関数 (OR検索)
const filteredItems = items.filter((item) =>
  searchConditions.some((condition) => {
    const itemValue = item[condition.key];

    switch (condition.matchType) {
      case 1: // 前方一致
        return (
          typeof itemValue === "string" &&
          itemValue.startsWith(condition.value as string)
        );
      case 2: // 完全一致
        return itemValue === condition.value;
      case 3: // 部分一致
        return (
          typeof itemValue === "string" &&
          itemValue.includes(condition.value as string)
        );
      case 4: // 範囲検索
        if (typeof itemValue === "number" && condition.range) {
          return (
            itemValue >= condition.range.min &&
            itemValue <= condition.range.max
          );
        }
      case 5: // 真偽
        return (
          typeof itemValue === "boolean" &&
          itemValue === condition.value
        );
      default:
        return false;
    }
  })
);
</script>