プロパティ「propTypes」タイプに存在しません「typeof演算FactoryMethod

Question

I次のコンポーネントを持っていると私はプロパティのいずれかを検証したいが、私はこのエラーを取得

プロパティ

『propTypes』のタイプに存在しません」typeof演算FactoryMethod

それはUpdate 1のドキュメント

//#region Imports 
import * as React from "react"; 
import styles from "./FactoryMethod.module.scss"; 
import { IFactoryMethodProps } from "./IFactoryMethodProps"; 
import { 
    IDetailsListItemState, 
    IDetailsNewsListItemState, 
    IDetailsDirectoryListItemState, 
    IDetailsAnnouncementListItemState, 
    IFactoryMethodState 
} from "./IFactoryMethodState"; 
import { IListItem } from "./models/IListItem"; 
import { IAnnouncementListItem } from "./models/IAnnouncementListItem"; 
import { INewsListItem } from "./models/INewsListItem"; 
import { IDirectoryListItem } from "./models/IDirectoryListItem"; 
import { escape } from "@microsoft/sp-lodash-subset"; 
import { SPHttpClient, SPHttpClientResponse } from "@microsoft/sp-http"; 
import { ListItemFactory} from "./ListItemFactory"; 
import { TextField } from "office-ui-fabric-react/lib/TextField"; 
import { 
    DetailsList, 
    DetailsListLayoutMode, 
    Selection, 
    IColumn 
} from "office-ui-fabric-react/lib/DetailsList"; 
import { MarqueeSelection } from "office-ui-fabric-react/lib/MarqueeSelection"; 
import { autobind } from "office-ui-fabric-react/lib/Utilities"; 
import PropTypes from "prop-types"; 
//#endregion 


export default class FactoryMethod extends React.Component<IFactoryMethodProps, IFactoryMethodState> { 
    private listItemEntityTypeName: string = undefined; 
    private _selection: Selection; 

    constructor(props: IFactoryMethodProps, state: any) { 
    super(props); 
    this.setInitialState(); 
    this._configureWebPart = this._configureWebPart.bind(this); 
    } 


    public componentWillReceiveProps(nextProps: IFactoryMethodProps): void { 
    this.listItemEntityTypeName = undefined; 
    this.setInitialState(); 
    } 

    public componentDidMount(): void { 
    this.readItemsAndSetStatus(); 
    } 

    public setInitialState(): void { 
    this.state = { 
     type: "ListItem", 
     status: this.listNotConfigured(this.props) 
     ? "Please configure list in Web Part properties" 
     : "Ready", 
     DetailsListItemState:{ 
     columns:[], 
     items:[] 
     }, 
     DetailsNewsListItemState:{ 
     columns:[], 
     items:[] 
     }, 
     DetailsDirectoryListItemState:{ 
     columns:[], 
     items:[] 
     }, 
     DetailsAnnouncementListItemState:{ 
     columns:[], 
     items:[] 
     }, 
    }; 
    } 

    private _configureWebPart(): void { 
    this.props.configureStartCallback(); 
    } 

    // reusable inline component 
    public ListMarqueeSelection = (itemState: {columns: IColumn[], items: IListItem[] }) => (
     <div> 
     <MarqueeSelection selection={ this._selection }> 
      <DetailsList 
      items={ itemState.items } 
      columns={ itemState.columns } 
      setKey="set" 
      layoutMode={ DetailsListLayoutMode.fixedColumns } 
      selection={ this._selection } 
      selectionPreservedOnEmptyClick={ true } 
      compact={ true }> 
      </DetailsList> 
     </MarqueeSelection> 
     </div> 
) 

    public render(): React.ReactElement<IFactoryMethodProps> { 
     this.readItemsAndSetStatus(); 
     switch(this.props.listName)  { 
      case "GenericList": 
      // tslint:disable-next-line:max-line-length 
      return <this.ListMarqueeSelection items={this.state.DetailsListItemState.items} columns={this.state.DetailsListItemState.columns} />; 
      case "News": 
      // tslint:disable-next-line:max-line-length 
      return <this.ListMarqueeSelection items={this.state.DetailsNewsListItemState.items} columns={this.state.DetailsNewsListItemState.columns}/>; 
      case "Announcements": 
      // tslint:disable-next-line:max-line-length 
      return <this.ListMarqueeSelection items={this.state.DetailsAnnouncementListItemState.items} columns={this.state.DetailsAnnouncementListItemState.columns}/>; 
      case "Directory": 
      // tslint:disable-next-line:max-line-length 
      return <this.ListMarqueeSelection items={this.state.DetailsDirectoryListItemState.items} columns={this.state.DetailsDirectoryListItemState.columns}/>; 
      default: 
      return null; 
     } 
    } 

    // read items using factory method pattern and sets state accordingly 
    private readItemsAndSetStatus(): void { 

    this.setState({ 
     status: "Loading all items..." 
    }); 

    const factory: ListItemFactory = new ListItemFactory(); 
    const items: IListItem[] = factory.getItems(this.props.spHttpClient, this.props.siteUrl, this.props.listName); 
    const keyPart: string = this.props.listName === "GenericList" ? "" : this.props.listName; 
    if(items != null ) 
    { 
     // the explicit specification of the type argument `keyof {}` is bad and 
     // it should not be required. 
     this.setState<keyof {}>({ 
     status: `Successfully loaded ${items.length} items`, 
     ["Details" + keyPart + "ListItemState"] : { 
      items, 
      columns: [ 
      ] 
     } 
     }); 
    } 

    } 

    private listNotConfigured(props: IFactoryMethodProps): boolean { 
    return props.listName === undefined || 
     props.listName === null || 
     props.listName.length === 0; 
    } 
} 

FactoryMethod.propTypes = { 
    listName: React.PropTypes.oneOf(["GenericList","Announcements","News"]) 
} 

に応じて私にOKになります。

アップデート2

IFactoryMethodProps

import { SPHttpClient } from "@microsoft/sp-http"; 
import IDataProvider from "./dataproviders/IDataProvider"; 

export interface IFactoryMethodProps { 
    listName: string; 
    spHttpClient: SPHttpClient; 
    siteUrl: string; 
    dataProvider: IDataProvider; 
    configureStartCallback:() => void; 
} 

Answer 1

私は、あなたがすべきだと思う：

 ⌄ 
import type { IFactoryMethodProps } from "./IFactoryMethodProps"; 

あなたはタイプの別名をインポートしているように見えるので。

https://flow.org/en/docs/types/modules/

Answer 2

あなたがpropTypesを取り付ける前に、エクスポートされる可能性がありますかのように見えます。これに

export default class FactoryMethod 

：

は、この変更しようと

FactoryMethod.propTypes = { 
    listName: React.PropTypes.oneOf(["GenericList","Announcements","News"]) 
} 

export default FactoryMethod;