如何通过函数形参动态访问类型

Question

我有如下内容:

const activeFormDesign = {
fields: {
},
elements: {
},
groups: {
},
layouts: {
section: SectionLayout,
header: Header,
title: Title,
description: Description,
goal: Goal,
},
};

layouts的每一个属性都是一个具有不同道具的功能组件。我的目标是，某人可以通过提供键来访问给定布局的FC，并且返回的FC将知道它应该具有哪些道具。

我想我可以这样做:

export function getLayoutTemplate(type: keyof typeof activeFormDesignTemplate['layouts']): FC<typeof activeFormDesignTemplate['layouts'][type] {
return activeFormDesignTemplate.layouts[type];
}
const Goal = getLayoutTemplate('goal');
<Goal />

参数类型工作得很好。但是返回类型会抛出一个错误，即"类型"不能用作索引类型。我的意思是……这是有道理的。我知道真正的动态类型是无法推断的。但是如果我静态地输入它，就像在getLayoutTemplate('goal')中一样，我认为它可以。

我觉得有一种方法可以做到这一点，但我还没有完全弄清楚，并将感谢任何帮助!

Answer 1

假设SectionLayout,Header等已经是React.FC类型，您只需要在K上使函数泛型，并删除返回类型周围的React.FC。

export function getLayoutTemplate<
K extends keyof typeof activeFormDesign["layouts"]
>(type: K): typeof activeFormDesign['layouts'][K] {
return activeFormDesign.layouts[type];
}

参数type现在是K类型，您可以使用K来索引返回类型的typeof activeFormDesign['layouts']。

但是你需要在运行时找到一种方法将SectionLayout,Header等转换成React.FC如果它们是而不是类型的React.FC 游乐场

---