时间戳

首页 > 解决方案 > 基于类型的嵌套对象的索引类型

reactjs - 基于类型的嵌套对象的索引类型

问题描述

关于这个主题已经有一些关于 SO 的答案，但它们似乎都已经过时了。我想根据给定的类型选择一个组件。我更喜欢使用typeof自动生成对象的类型。声明组件类型的正确方法是什么Comp？

const icons = {
  default: {
    coffee: IconCoffee,
  },
  service: {
    coffee: IconCoffeeService,
  },
} as const;


const Comp = icons[iconSet][iconName];

目前，收到以下错误：type 'string' can't be used to index type

标签： reactjstypescript

解决方案

默认情况下，对象字面量的类型是被编码的确切对象类型，而不是字典或TS 所称的Record类型。要使用任意字符串索引对象字面量，我们需要将其类型显式声明为记录，在本例中为嵌套记录：

const icons:
  Record<string, Record<string, React.MemoExoticComponent<(props: React.SVGProps<SVGSVGElement>) => JSX.Element>>>
  = { ... }
declare const iconSet: string;
declare const iconName: string;
const Comp = icons[iconSet][iconName];

推荐阅读