在 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（或字形键）。这可能是枚举，但我不想再次复制整个结构。

谢谢你的想法

Answer 1

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

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

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

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

在 TypeScript 中将 hashmap 类型更正为函数参数

Correct hashmap typing as function argument in TypeScript

reactjs

typescript

enums

styled-components

keyof