コンポーネントをラップしてその小道具のインターフェイスを継承する方法

Question

通常のボタンが持つすべての小道具を受け入れて渡すために、Buttonコンポーネントを拡張してその小道具のインターフェイスタイプを拡張したいと思います。下の例では、onClick関数から約束を受け取ったボタンを作成し、それが解決するのを待つ間にローダーを表示します。

私の問題は、コンパイラがButtonPropsを見つける場所を知らず、おそらく独自の名前空間で定義されているということです。

どういうわけか、その定義を自分のコンポーネント用に拡張することはできますか？私は "タイプ"のような小道具を再定義して、それらを通過させる必要はないと思っています。

import React from 'react'; 
import { Button } from 'antd'; 

// extend interface already defined in antd 
interface ButtonProps { 
    onClick: (event: any) => Promise<any>; 
} 

interface AsyncButtonState { 
    loading: boolean; 
} 

export class AsyncButton extends React.Component< 
    ButtonProps, 
    AsyncButtonState 
> { 
    public state = { 
    loading: false, 
    }; 

    public render() { 
    return (
     <Button 
     {...this.props} 
     onClick={this.handleClick} 
     loading={this.state.loading} 
     /> 
    ); 
    } 

    private handleClick = async evt => { 
    this.setState({ loading: true }); 
    await this.props.onClick(evt); 
    this.setState({ loading: false }); 
    }; 
} 

export default AsyncButton; 

---- EDIT ----

私はantdからButtonPropsインタフェースをインポートする方法を見つけました。今私はそれを拡張する方法を理解する必要があります。

import { ButtonProps } from 'antd/lib/button'; 

interface ButtonProps { 
    onClick: (event: any) => Promise<any>; 
    children: React.ReactNode; 
} 

これは、インポートことわざのためのエラーを与える：

Answer 1

うまく動作します。

import { Button } from 'antd'; 
import { ButtonProps } from 'antd/lib/button'; 

interface AsyncButtonState { 
    loading: boolean; 
} 

interface AsyncButtonProps extends ButtonProps { 
    onClick: (event: any) => Promise<any>; 
    foo?: string; 
} 

約束を返すのonClickハンドラは、すでに現在のButtonPropsインタフェースと互換性があったので、私はそれが私のために必要とされていないと思います。しかしこれは、fooと呼ばれる別のオプションの支柱を追加することを示しています。

Answer 2

私はこの作品は希望、typescriptです精通していないよ「ButtonPropsのローカル宣言とimport宣言の競合」？

interface ButtonProps { 
    onClick: (event: any) => Promise<any>; 
    ...Button.propTypes 
} 

は、我々はES6で同様のことを行うと、それは結局非常に簡単であることが判明し

const propTypes = { 
    something: PropTypes.string, 
    ...Button.propTypes 
} 

MyButton.propTypes = propTypes;