TypeScript Vue：使用 keyof 获取 Ref 对象中的键-js教程-PHP中文网

TypeScript Vue：使用 keyof 获取 Ref 对象中的键

霞舞

发布： 2025-10-04 14:46:09

原创

195人浏览过

typescript vue：使用 keyof 获取 ref 对象中的键

本文旨在解决在使用 TypeScript 和 Vue 开发时，如何正确使用 keyof 操作符来获取 Ref 对象中的键的问题。通过分析常见错误用法，并提供清晰的代码示例，帮助开发者理解 keyof 的正确使用方式，从而避免类型错误，提升代码质量和可维护性。

在使用 TypeScript 和 Vue 开发时，经常会遇到需要从 Ref 对象中获取键的情况。keyof 操作符可以帮助我们获取一个类型的所有公共属性名，但如果不理解其工作原理，很容易出现类型错误。本文将详细讲解如何正确使用 keyof 操作符来获取 Ref 对象中的键。

常见错误用法及分析

假设我们有以下 Ref 对象：

立即学习“前端免费学习笔记（深入）”；

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

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

type Players = Ref<{ 1: Player, 2: Player }>;

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

登录后复制

我们想要定义一个 activePlayerId，其类型为 Players 对象的键，并尝试使用以下方式：

// 错误用法 1
const activePlayerId = ref<keyof Players>(1);

// 错误用法 2
const activePlayerId = ref<keyof Ref<Players>>(1);

登录后复制

以上两种方式都会导致 TypeScript 报错：TS2345: Argument of type '1' is not assignable to parameter of type 'keyof Players'.

错误原因：

keyof Players 返回的是 Players 类型的所有公共属性名，也就是 Ref 类型的属性，而不是我们期望的 1 或 2。Ref<Players> 同理。我们混淆了类型和值。

正确的解决方案

北极象沉浸式AI翻译

免费的北极象沉浸式AI翻译 - 带您走进沉浸式AI的双语对照体验

查看详情

更简洁且易于维护的方式是将 players 定义为一个数组，并单独跟踪 activePlayerId：

const players = ref([
  {
    id: 1,
    name: "Player 1",
    questionIds: [],
    modifierIds: [],
  },
  {
    id: 2,
    name: "Player 2",
    questionIds: [],
    modifierIds: [],
  },
]);

const activePlayerId = ref(1);

登录后复制

然后，可以使用 computed 属性来获取当前激活的玩家：

const activePlayer = computed(() => players.value.find((player) => player.id === activePlayerId.value));

登录后复制

如果确定始终会有一个玩家被选中，可以使用类型断言来告诉 TypeScript，activePlayer 不可能为 undefined：

const activePlayer = computed(() => players.value.find((player) => player.id === activePlayerId.value) as Player);

登录后复制

代码示例

以下是完整的代码示例：

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

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

const players = ref([
  {
    id: 1,
    name: "Player 1",
    questionIds: [],
    modifierIds: [],
  },
  {
    id: 2,
    name: "Player 2",
    questionIds: [],
    modifierIds: [],
  },
]);

const activePlayerId = ref(1);

const activePlayer = computed(() => players.value.find((player) => player.id === activePlayerId.value) as Player);

// 示例：打印当前激活的玩家的名字
console.log(activePlayer.value.name);

登录后复制

注意事项