如何将常量指定为另一个类型中某个键的类型？

这个问题我之前也碰到过，TypeScript的类型检查就是这么严谨——虽然你清楚clickedItem肯定是datasetResponse的合法键，但它没明确接收到这个信息，所以才会抛出错误。下面给你两个关键的解决步骤，亲测有效：

• 第一步：给clickedItem加上精确的类型约束
  在你的DatasetChildrenFilterItemsProps类型定义里，把clickedItem的类型指定为keyof datasetResponse。这个keyof操作符会自动提取datasetResponse的所有键作为联合类型，也就是"address_1" | "address_2" | "city"，这样TypeScript就明确知道clickedItem只能是这三个值之一了。

• 第二步：用括号语法访问对象属性
  你之前用的data.clickedFilterItem是点语法，这种语法只适用于固定的属性名字面量，而clickedFilterItem是变量，所以得改成括号语法data[clickedFilterItem]。这样TypeScript就能正确关联到你要访问的属性了。

给你贴个修改后的完整代码示例，看着更清楚：

首先修正Props的类型定义：

// 先明确你的Props类型
type DatasetChildrenFilterItemsProps = {
  data: /* 这里填入你原本的data类型 */;
  clickedItem: keyof datasetResponse; // 核心类型约束
};

export type datasetResponse = {
  address_1?: string;
  address_2?: string;
  city?: string;
};

然后修正组件内的代码：

import { useState } from 'react';

export default function DatasetFilterItems({
  data,
  clickedItem,
}: DatasetChildrenFilterItemsProps) {
  const [open, setOpen] = useState(false);
  const clickedFilterItem = clickedItem;
  // 注意这里用括号语法，同时确保peopleData的类型是datasetResponse[]
  const filteredList = peopleData.map((item) => item[clickedFilterItem]); 
}

另外补充一句：如果你的peopleData还没明确类型为datasetResponse[]，最好也加上这个定义，这样整个类型检查会更严谨，避免其他潜在的类型错误。

备注：内容来源于stack exchange，提问作者user19701195