reactjs - 在 TypeScript 中将 hashmap 类型正确作为函数参数

Question

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

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

const glyphs = {
  'logo': '\ue94e',
  'minus': '\ue900',
  'plus': '\ue901',
...
};

interface IconProps {
  glyph: string;
}

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

export default Icon;

我需要而不是glyph: string传递显式类型enum（或 keyof 字形）。那可能是枚举，但我不想再次复制整个结构。

谢谢你的想法

标签： reactjstypescriptenumsstyled-componentskeyof

Answer 1

您可以使用keyof关键字组合typeof来缩小类型

const Icon = ({ glyph: keyof typeof glyphs }) => {

为了可读性，您可以定义另一种类型，如下所示：

type GlyphIcon  = keyof typeof glyphs;
const Icon = ({ glyph: GlyphIcon  }) => {