Question

我试图将prop类型从一个视图组件导出到另一个容器组件，并将它们用作状态类型定义：

// ./Component.tsx
export type Props {
    someProp: string;
}

export const Component = (props: Props ) => {
    ...etc
}

// ./AnotherComponent.tsx
import { Component, Props as ComponentProps } from "./Component";

type Props = {}

type State = ComponentProps & {};

class AnotherComponent extends React.Component<Props, State> {
    state: State;
    ...etc
}

但是我要进入控制台：

Module '"./Component "' has no exported member 'Props'.

关于我应该如何处理的任何建议？

我也尝试按照this的文章使用查找类型，但没有乐趣。

Answer 1

尝试类似这样的方法。基本上扩展了Props组件，以包括所需的导入。

export interface IProps extends PropsOfYouChoiceThatYouImport {
 morePropsHere
}

也不要将道具纳入国家，这完全是错误的IMO。做这样的事情：


interface IProps extends YourDesiredProps {
  someProp: string | null;
  // etc
}

interface IState {
  something: boolean
  // etc
}

export class ComponentName extends Component<IProps, IState> {
  // Define you state, and props here. You need to initialize the correct IState 
  // and IProps above
}

对于控制台错误，我不确定您可以这样做。尝试创建一个名为Types或Interfaces的文件夹。然后导出那个。

并根据需要将其导入为命名导出或默认导出，在两个文件中。既然你想重用它。告诉我是否有帮助。如果您编写了一个快速的代码沙盒，我可以对其进行更多研究。

基本上我建议将其放入单独的文件中

export type Props {
    someProp: string;
}

Answer 2

如果您检查node_modules/react/index.d.ts的React类型（React.Component），则结构如下：

class Component<P, S> {...}

其中P等于道具，S表示状态。您不应该混合道具和状态。

要解决您的TypeScript错误，请将type更改为interface：

export interface Props {
  someProp: string;
}

Answer 3

缺少成员导出的问题是我有一个中间索引文件，TypeScript在导出类型时似乎无法使用：

// ./Component/index.tsx
export { Component, Props } from "./js/Component";

当我更改导入以使用文件的确切路径而不是尝试通过索引文件导入时，它选择了它：

// ./AnotherComponent/js/AnotherComponent.tsx
import { Props as ComponentProps} from "./Component/js/Component";

打字稿/反应：模块没有导出成员

3 个答案: