TypeScript中React组件参数如何复用glyphs键类型替代string类型

这问题我太熟悉了！你完全可以借助TypeScript的类型推导能力，直接从glyphs对象提取它的键类型，不用手动重复定义枚举或者键列表。这里给你最简洁的实现方案：

核心思路 #

利用keyof typeof操作符，从glyphs对象的类型中提取所有键的联合类型，再把这个类型赋值给IconProps里的glyph字段。另外要注意给glyphs加上as const断言，让TypeScript把对象的键和值都识别为字面量类型，而不是宽泛的string类型。

修改后的完整代码 #

import React from 'react';
import styled from 'styled-components';

const IconWrapper = styled.Text` font-family: MyFont; `;

// 加as const固定键和值的字面量类型
const glyphs = { 
  'logo': '\ue94e', 
  'minus': '\ue900', 
  'plus': '\ue901', 
  // 后续新增图标直接在这里加就行，类型会自动更新
} as const;

// 从glyphs对象自动提取键的联合类型
type IconGlyph = keyof typeof glyphs;

interface IconProps { 
  glyph: IconGlyph; // 这里用自动推导的类型替换原来的string
}

const Icon: React.FC<IconProps> = ({ glyph }) => {
  return ( <IconWrapper>{glyphs[glyph]}</IconWrapper> );
};

export default Icon;

为什么要加as const？ #

如果不加as const，TypeScript会把glyphs的类型推断为{ [key: string]: string }，这时候keyof typeof glyphs就会变成string，起不到限制传入值的作用。加上as const后，TypeScript会将对象的每个键和值都视为只读的字面量，比如glyphs的类型会变成：

{
  readonly logo: "\ue94e";
  readonly minus: "\ue900";
  readonly plus: "\ue901";
  // ...其他图标
}

这样keyof typeof glyphs就会得到具体的键名联合类型：'logo' | 'minus' | 'plus' | ...，完美实现你想要的类型校验和自动提示效果。

额外优势 #

以后你需要新增或删除图标时，只需要修改glyphs对象，对应的IconGlyph类型会自动同步更新，完全不用手动维护类型定义，既减少了重复代码，又避免了类型和对象结构不一致的问题。

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