reactjs - Typescript和带有复杂prop类型接口(interface)的React

我对react和typescript都不熟悉，到目前为止，我一直在用react开发一个项目。我现在正在把这个项目添加/转换成打字稿，并且在我的转换过程中碰到了一堵墙，尽管在Google上做了几次尝试，但还是没能找到答案。我为组件定义了以下道具：

interface Item {
    Text: JSX.Element,
    Link: string
}

interface TCLBProps {
    Icon: JSX.Element,
    Header: string,
    Items: Item[]
}

const TwoColumnLinkBlock: React.FC<TCLBProps> = (props) => {

然后我有另一个组件（在另一个文件中）试图调用上面定义的TwoColumnLinkBlock组件。

<TwoColumnLinkBlock
    Icon={<Resources color="brand" size="medium" />}
    Header="Inputs & Incoming Data"
    Items={linkSet1}
/>

链接集1定义为：

let linkSet1 : Item[] = [
       {Text: <span><b>Test</b></span>, Link: "/TestPage"},
       {Text: <span><b>Test2</b></span>, Link: "/TestPage2"},
    ];

typescript告诉我它找不到项。如果我导出项并将其导入此处，则会告诉我“item指的是一个值，但在此处用作类型。”
我对这个过程有什么误解？我的接口声明不正确吗？
编辑：示例https://codesandbox.io/s/youthful-mirzakhani-0ggwn
这是我一直使用的相同结构。您可以看到，尽管typescript编译并运行，但当它在index.tsx中使用时，它在widgetitem上犹豫不决。在我的VisualStudio副本中，我在同一行上得到上面描述的错误。

最佳答案

根据您的代码框中提供的代码，您具有src/components/Widget/index.tsx文件：

import Widget from "./widget";
import WidgetItem from "./widget";

export { Widget };
export { WidgetItem };

export default Widget;

以及src/components/Widget/widget.tsx文件：

export interface WidgetItem {
  Text: JSX.Element;
  Link: string;
}

// Other contents

export default widget;

组件（widget）是默认导出，因此使用import AnyNameYoudLike from "./widget"导入。但是interface WidgetItem是一个命名的导出，只能以import { WidgetItem } from "./widget"的确切名称导入。
注意第一个index.tsx文件中的前两个导入。这些都是不同的名称，但它们都导入相同的默认组件。WidgetItem是一个命名导入，因此必须导入为import { WidgetItem } from "./widget";。
所以导出的WidgetItem实际上也是组件（而不是接口）。
Here is the Codesandbox with the fix。