reactjs - چگونه میتوان props را برای کامپوننتهای Material-UI با استفاده از Typescript گسترش داد؟

من میخواهم props کامپوننت Button از Material-UI را با استفاده از تایپاسکریپت توسعه دهم تا بتوانم props اضافی را به فرزندان آن منتقل کنم.

import { NavLink } from 'react-router-dom';
import { Button } from 'material-ui';

<Button
  component={NavLink}

  // NavLink props that needs to be added to typescript declarations
  activeClassName={classes.activeButton}
  exact={true}
  to={to}
>
  {title}
</Button>

من سعی کردم اعلانهای زیر را در ./app/types/material_ui.d.ts اضافه کنم:

declare module 'material-ui' {
  interface Button {
    activeClassName?: any;
    exact?: boolean;
    to?: string;
  }
}

که خطای «TS2693: 'Button' تنها به یک نوع اشاره دارد، اما در اینجا به عنوان یک مقدار استفاده شده است.» را ایجاد میکند.

من همچنین اعلامیه را امتحان کردهام:

import * as React from 'react';

import { PropTypes, StyledComponent } from 'material-ui';
import { ButtonBaseProps } from 'material-ui/ButtonBase';

declare module 'material-ui' {
  export interface ButtonProps extends ButtonBaseProps {
    color?: PropTypes.Color | 'contrast';
    component?: React.ReactNode;
    dense?: boolean;
    disabled?: boolean;
    disableFocusRipple?: boolean;
    disableRipple?: boolean;
    fab?: boolean;
    href?: string;
    raised?: boolean;
    type?: string;

    activeClassName?: any;
    exact?: boolean;
    to?: string;
  }

  export class Button extends StyledComponent<ButtonProps> { }
}

که خطای «TS2323: نمیتوان متغیر صادر شده 'Button' را دوباره اعلام کرد» را ایجاد میکند.

فایل tsconfig.json من چنین به نظر میرسد:

{
  "compilerOptions": {
    ...
    "paths": {      
      "history": ["./node_modules/@types/history/index"],
      "redux": ["./node_modules/@types/redux/index"],
      "react": ["./node_modules/@types/react/index"],
      "*": ["./app/types/*", "*"]
    },
  },
  ...
}

در نهایت تعریف نوع اصلی از Material-UI:

import * as React from 'react';
import { StyledComponent, PropTypes } from '..';
import { ButtonBaseProps } from '../ButtonBase';

export interface ButtonProps extends ButtonBaseProps {
  color?: PropTypes.Color | 'contrast';
  component?: React.ReactNode;
  dense?: boolean;
  disabled?: boolean;
  disableFocusRipple?: boolean;
  disableRipple?: boolean;
  fab?: boolean;
  href?: string;
  raised?: boolean;
  type?: string;
}

export default class Button extends StyledComponent<ButtonProps> {}

من از material-ui نسخه 1.0.0-beta.8 همراه با react نسخه 15.6.1، react-router-dom نسخه 4.2.2 و typescript نسخه 2.5.2 استفاده میکنم.

پاسخ شماره ۱

کمی دیر است، اما این هم یک راه حل دیگر است. همچنین به مستندات MUI استفاده از prop کامپوننت مراجعه کنید. دکمه زیر از کامپوننت Link استفاده میکند. همچنین از props خاص Link با نوعهای آنها استفاده میکند. همچنین props مخصوص خود را نیز اضافه میکند.

import React from 'react'
import MuiButton, {ButtonProps} from '@material-ui/core/Button'

interface ButtonOptions {
  // your custom options with their types
}

const Button = <C extends React.ElementType>(props: ButtonProps<C, {component?: C}> & ButtonOptions ) => {
  return <MuiButton {...props}>{props.children}</MuiButton>
}

export default Button
     
// use like this:  
import {Link} from 'react-router-dom'
<Button component={Link} to={'/somelocation'}>

پاسخ شماره ۲

import React, { FC } from 'react';

import { Button, ButtonProps } from '@material-ui/core';

interface IProps extends ButtonProps {} // your custom props

const ButtonHco: FC<IProps> = ({
  variant,
  color,
  children,
  size,
  disabled
}) => {
  return (
    <Button variant={variant} color={color} size={size} disabled={disabled}>
      {children}
    </Button>
  );
};

export default ButtonHco;