Vue 3 TypeScript：正确管理响应式对象中的活动项ID类型

interface Player {
    id: number;
    name: string;
    questionIds: number[];
    modifierIds: number[];
}

// 玩家列表，使用对象形式，键为玩家ID
type PlayersMap = Ref<{ [key: number]: Player }>;

const playersMap: PlayersMap = ref({
    1: { id: 1, name: 'Player 1', questionIds: [], modifierIds: [] },
    2: { id: 2, name: 'Player 2', questionIds: [], modifierIds: [] }
});

// 尝试使用 keyof PlayersMap 来声明 activePlayerId
// const activePlayerId = ref<keyof PlayersMap>(1); // ❌ 错误！

import { ref, computed } from 'vue';

interface Player {
    id: number;
    name: string;
    questionIds: number[];
    modifierIds: number[];
}

// 将玩家列表存储为响应式数组
const players = ref<Player[]>([
    { id: 1, name: 'Player 1', questionIds: [], modifierIds: [] },
    { id: 2, name: 'Player 2', questionIds: [], modifierIds: [] }
]);

// 声明一个独立的响应式变量来存储活动玩家的ID
const activePlayerId = ref<number>(1); // 初始值为1

// 使用计算属性来获取当前活动的玩家对象
const activePlayer = computed<Player | undefined>(() => {
    return players.value.find(player => player.id === activePlayerId.value);
});

// 如果确定 activePlayerId 总是指向一个存在的玩家，可以使用类型断言
const activePlayerGuaranteed = computed<Player>(() => {
    const foundPlayer = players.value.find(player => player.id === activePlayerId.value);
    // 假设我们确保了 foundPlayer 永远不会是 undefined
    return foundPlayer as Player;
});

import { ref, computed, type Ref } from 'vue';

interface Player {
    id: number;
    name: string;
    questionIds: number[];
    modifierIds: number[];
}

// 1. 定义玩家列表，使用响应式数组
const players: Ref<Player[]> = ref([
    { id: 1, name: 'Player 1', questionIds: [], modifierIds: [] },
    { id: 2, name: 'Player 2', questionIds: [], modifierIds: [] },
    { id: 3, name: 'Player 3', questionIds: [], modifierIds: [] }
]);

// 2. 独立声明活动玩家的ID
const activePlayerId: Ref<number> = ref(1);

// 3. 使用计算属性获取活动玩家对象
const activePlayer = computed<Player | undefined>(() => {
    console.log(`Calculating active player for ID: ${activePlayerId.value}`);
    return players.value.find(player => player.id === activePlayerId.value);
});

// 示例用法
console.log("初始活动玩家:", activePlayer.value?.name); // Player 1

// 改变活动玩家ID
activePlayerId.value = 2;
console.log("新的活动玩家:", activePlayer.value?.name); // Player 2

// 尝试一个不存在的ID
activePlayerId.value = 99;
console.log("不存在的活动玩家:", activePlayer.value); // undefined

// 如果确定存在，使用类型断言的例子
const activePlayerGuaranteed = computed<Player>(() => {
    const foundPlayer = players.value.find(player => player.id === activePlayerId.value);
    // 在实际应用中，这里需要有逻辑来确保 foundPlayer 不为 undefined
    // 例如，如果 activePlayerId 总是从 players 列表中有效ID中选择
    if (!foundPlayer) {
        // 可以抛出错误，或者返回一个默认玩家，取决于业务逻辑
        console.warn(`Player with ID ${activePlayerId.value} not found, returning default.`);
        return players.value[0]; // 示例：返回第一个玩家作为默认
    }
    return foundPlayer;
});

activePlayerId.value = 1;
console.log("确保存在的活动玩家:", activePlayerGuaranteed.value.name); // Player 1