React/Reduxプロジェクトでは、reduxのconnect decoratorによって渡されたプロパティをTypescriptに認識させる方法を教えてください。

Question

次のコンポーネントがあると、不足しているisUpdating小道具に関するエラーが発生します。どうすれば修正できますか？

Error:(87, 27) TS2322:Type '{ name: "Fred"; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes> & Reado...'. Type '{ name: "Fred"; }' is not assignable to type 'Readonly'. Property 'isUpdating' is missing in type '{ name: "Fred"; }'.

interface ContaineeProps { 
    name: string; 
    isUpdating: string; 
} 

const Containee = (props: ContaineeProps) => <span>{props.name}</span>; 

interface MapStateToProps { 
    isUpdating: boolean; 
} 
const mapStateToProps = state => ({ isUpdating: state.years.yearsUpdating }); 

const ConnectedContainee = connect<MapStateToProps, null, ContaineeProps>(mapStateToProps)(Containee); 


interface Container { 
    name: string; 
} 

class Container extends React.Component<Container, {}> { 
    render() { 
    return (
     <ConnectedContainee name="Fred" /> 
    ) 
    } 
} 

編集：この質問はReduxの/反応/ typescriptですアプリケーションと、このエラーの理由について以下のベストプラクティスについての詳細です。私はいつも2つの場所で指定された小道具の型情報を必要としなければならないのですか？（コンポーネントの小道具のインターフェースとmapStateToProps関数のインターフェース）？

Answer 1

受け取ったコンパイルエラーが正しいです。 ContaineePropsにはプロパティーisUpdatingが含まれているため、コンポーネントは使用時にこのプロパティが渡されることが想定されています。

<ConnectedContainee name="Fred" isUpdating="testing" />

isUpdatingがContaineePropsにあるべきかどうか疑問がありますか？そうでない場合は、単純に削除して、コンパイルエラーがなくなるはずです。

ここにあることを予定している場合は、インターフェイスにisUpdating小道具が既にあるように別の名前を付けることをおすすめします。

更新

私はあなたのコメントを理解していれば、正しくあなたのコンポーネント内でそれにアクセスできるようにするには、あなたのContaineePropsにisUpdating小道具を追加しました。これを行うには、両方のプロキシインターフェイスにプロパティを追加する必要はありませんが、実際には機能するとは思われません...

コンポーネントを両方のインターフェイスに統合する必要があります親コンポーネントから渡された小道具とreduxからマップされた小道具を含むインターフェース。ここ

は、例えば次のとおり

interface AllProps extends MapStateToProps, ContaineeProps {} 

const Containee = (props: AllProps) => <span>{props.name} {props.isUpdating}</span>; 

又は

const Containee = (props: ContaineeProps & MapStateToProps) => <span>{props.name} {props.isUpdating}</span>; 

props.isUpdatingは現在Reduxのストアからマッピングされたプロパティを指します。 isUpdatingの値をローカルに保存する場合は、コンポーネントのローカル状態を使用します。