TypeScript中如何使用变量作为对象属性名遍历对象中的数组？

你的代码逻辑本身是正确的，问题出在TypeScript的类型推断限制上。theFrames中的字符串值默认会被推断为宽泛的string类型，而TypeScript无法确认这个string是AgendaState的合法属性键，所以会阻止你直接用state[typeFrame]访问数组。

解决这个问题只需要让TypeScript明确theFrames的属性值是AgendaState的合法键即可，有两种常用方式：

方式1：给theFrames添加类型注解 #

直接约束theFrames的值为AgendaState的键类型（keyof AgendaState）：

interface Task {
    id: number;
    title: string;
}

interface AgendaState {
    todayTasks: Task[];
    nextTasks: Task[];
}

const state: AgendaState = {
    todayTasks: [
        { id: 1, title: 'Task Title' },
        { id: 2, title: 'Task Title 2' },
    ],
    nextTasks: [
        { id: 3, title: 'Task Title 3' },
        { id: 4, title: 'Task Title 4' },
    ]
};

// 添加类型注解，指定值为AgendaState的合法键
const theFrames: Record<string, keyof AgendaState> = {
    TODAY: 'todayTasks',
    NEXT: 'nextTasks'
};

const typeFrame = theFrames.TODAY;

const task: Task = { id: 1, title: 'Replace Task Title' }
// 现在可以正常调用map/filter方法
const replacedTaskList = state[typeFrame].map(t => t.id === task.id ? task : t);
const filteredTaskList = state[typeFrame].filter(t => t.id !== task.id);

方式2：用as const断言锁定theFrames的类型 #

通过as const让TypeScript推断出theFrames的具体字符串值，而不是宽泛的string：

interface Task {
    id: number;
    title: string;
}

interface AgendaState {
    todayTasks: Task[];
    nextTasks: Task[];
}

const state: AgendaState = {
    todayTasks: [
        { id: 1, title: 'Task Title' },
        { id: 2, title: 'Task Title 2' },
    ],
    nextTasks: [
        { id: 3, title: 'Task Title 3' },
        { id: 4, title: 'Task Title 4' },
    ]
};

// 用as const断言，让TypeScript识别具体的字符串值
const theFrames = {
    TODAY: 'todayTasks',
    NEXT: 'nextTasks'
} as const;

const typeFrame = theFrames.TODAY;

const task: Task = { id: 1, title: 'Replace Task Title' }
// 类型推断正常，可调用数组方法
const replacedTaskList = state[typeFrame].map(t => t.id === task.id ? task : t);
const filteredTaskList = state[typeFrame].filter(t => t.id !== task.id);

两种方式都能解决类型不匹配的问题，让你顺利用变量作为属性名访问对象中的数组并执行遍历操作。

内容的提问来源于stack exchange，提问作者dashadow