Question

我对React和Typescript都是陌生的，到目前为止，我一直只在使用React进行项目。我现在正在将项目添加/转换为Typescript的过程中，并且在转换过程中遇到了障碍，尽管进行了几次谷歌搜索尝试都无法找到答案。我为组件定义了以下道具：

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}
/>

linkSet1定义为：

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

Typescript告诉我找不到项目。如果我导出项目并将其导入此处，则会被告知“项目是指一个值，但在此处被用作类型。”

我对这个过程有什么误解？我的接口声明不正确吗？

编辑：示例https://codesandbox.io/s/youthful-mirzakhani-0ggwn

这遵循我一直使用的相同结构。您可以看到，尽管它可以编译并运行，但是当在Index.tsx中使用TypeScript时，它却在WidgetItem上停滞不前。在我的Visual Studio副本中，我在同一行收到上述错误。

Answer 1

根据“代码”和“框”中提供的代码，您的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。

Typescript和带有复杂prop类型接口的React

1 个答案: