在 TypeScript 中将 hashmap 类型正确作为函数参数答案

【问题标题】：Correct hashmap typing as function argument in TypeScript在 TypeScript 中将 hashmap 类型正确作为函数参数
【发布时间】：2021-02-01 23:05:03
【问题描述】：


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

感谢您的想法

【问题讨论】：

标签： reactjs typescript enums styled-components keyof

【解决方案1】：

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

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

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

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

【讨论】：

哦，是的...我明白了。这很简单。谢谢！另一个问题：这可以被视为最佳做法吗？
@featureoffuture 你可能会有一些小的改进，比如更新的答案。