将哈希映射类型更正为TypeScript中的函数参数

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;

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

谢谢你的想法

Answer 1

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

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

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

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