打字稿/反應：模塊沒有導出成員

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'.

關於我應該如何處理的任何建議？

我已經使用查找類型按也試過這樣的文章，但沒有喜悅。

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.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";