TypeScript中如何让newsLink类型的slug与text对应news键值并支持动态数组？

你的需求完全可以实现——核心是把newsLink定义为联合类型，让每个元素的slug和text强制绑定对应关系，同时支持动态构建符合类型约束的数组。

问题分析 #

你之前的泛型写法newsLink<T extends NewsKeys>，单独用可以指定某一种键值对，但如果要构建包含多种键值组合的数组，泛型需要固定某个T，没法满足动态混合不同组合的需求。而原来的非泛型newsLink类型，slug和text是松散的联合类型，会出现不匹配的情况（比如slug: 'interesting'但text: 'Регионы'）。

正确实现方式 #

通过映射news对象的所有键值对，生成每个键对应的严格类型，再组合成联合类型：

export const news = {
  interesting: "Интересно",
  regions: "Регионы",
  contradictory: "Спорно",
  important: "Важно",
  actual: "Актуально",
};

// 生成每个键对应的严格newsLink类型
type NewsLink = {
  [T in keyof typeof news]: {
    img: string;
    slug: T;
    text: typeof news[T];
  };
}[keyof typeof news];

用法示例 #

现在你可以动态构建数组，TypeScript会自动检查每个元素的slug和text是否匹配：

// 合法的数组
const newsLinks: NewsLink[] = [
  { img: '/img1.jpg', slug: 'interesting', text: 'Интересно' },
  { img: '/img2.jpg', slug: 'regions', text: 'Регионы' },
  { img: '/img3.jpg', slug: 'important', text: 'Важно' },
];

// 错误示例：text与slug不匹配，TypeScript会报错
const badNewsLinks: NewsLink[] = [
  { img: '/img.jpg', slug: 'interesting', text: 'Регионы' }, // ❌ 类型不匹配
];

为什么这个方案可行 #

• 映射类型{ [T in keyof typeof news]: ... }会为news的每个键生成一个专属的newsLink子类型
• 最后用[keyof typeof news]取出所有子类型，组合成联合类型NewsLink
• 数组NewsLink[]中的每个元素必须是联合类型中的某一种，确保slug和text严格对应

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