typescript - Bir bileşeni nasıl sarmalar ve props arayüzünü nasıl devralırsınız

Normal Button'ın sahip olduğu tüm prop'ları kabul etmek ve iletmek için bir Button bileşenini genişletmek ve prop arayüzü türünü genişletmek istiyorum. Aşağıdaki örnekte, onClick işlevinden bir promise alan ve çözülmesini beklerken yükleyici gösteren bir buton oluşturdum.

Benim sorunum, derleyicinin ButtonProps'u nerede bulacağını bilmemesi gibi görünüyor ve muhtemelen kendi ad alanında tanımlanmıştır.

O tanımı bir şekilde alıp kendi bileşenim için genişletebilir miyim? "type" gibi özellikleri yeniden tanımlamak istemiyorum, sadece iletmek istiyorum.

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;

---- DÜZENLEME ----

antd'den ButtonProps arayüzünü içe aktarmanın bir yolunu buldum. Şimdi sanırım sadece bunu nasıl genişleteceğimi çözmem gerekiyor.

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

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

Bu, import için şu hatayı veriyor: "import bildirimi, ButtonProps'un yerel bildirimi ile çelişiyor"

----- YENİDEN DÜZENLE ----

Bunu şu şekilde çözerdim

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;
}

... ama şimdi ButtonProps'un artık bir arayüz (interface) olarak değil, bir tür (type) olarak dışa aktarılmış gibi görünüyor. Şimdi ne olacak?

Cevap #1

Sonunda oldukça kolay olduğu ortaya çıktı.

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;
}

Bir promise döndüren onClick işleyicisi zaten mevcut ButtonProps arayüzü ile uyumluydu, bu yüzden bence benim için gerekli değil. Ama bu, foo adlı başka bir isteğe bağlı özellik eklemeyi gösteriyor.

Cevap #2

Artık Antd props tür olarak ihraç edildiğine göre, bunu çözmenin yolu şu gibi görünüyor:

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

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

export class AsyncButton extends React.Component<
  AsyncButtonProps & ButtonProps,
  AsyncButtonState
> {
  public render() {
    return (
      <Button
        {...this.props}
        onClick={this.handleClick}
        loading={this.state.loading}
      />
    );
  }
}