TS2604: при импорте кнопки «material-ui» из одной упаковки в другую

Question

Моя команда внедряет новый интерфейс для нашего приложения и решила перейти от стандартного реагирования на машинопись.Я довольно новичок в разработке и застрял в этом вопросе в течение нескольких дней.По сути, у нас есть два репозитория, один из которых содержит наши компоненты, а другой связывает их вместе для внешнего интерфейса.Мы соединяем их через ссылку lerna / yarn.

Проблема, с которой я сталкиваюсь, заключается в импорте нашей версии компонента кнопки Material-UI из другой библиотеки, а также в некоторые другие компоненты.При этом он не скомпилируется.

Код в библиотеке компонентов компилируется правильно.Однако мы получаем эту ошибку только при импорте ее в другое приложение.

Я пытался решить эту проблему несколькими способами, сначала изменив файл Button.d.ts в нашей папке dist / внутри компонента, изменив его.тип экспортируемого ReactComponent, изменение интерфейса на класс и т. д. Во-вторых, изменение tsconfig.json для включения настройки нескольких параметров, доступных через документы, изменения пути «types» и т. д.

Вотчто я считаю соответствующими файлами в библиотеке компонентов:

Button.d.ts:

import React from 'react';
import { ButtonProps as MuiButtonProps } from '@material-ui/core/Button';
export interface ButtonProps extends MuiButtonProps {
    defaultMargin?: boolean;
    classes: {
        root: string;
    };
}
declare const _default: React.ComponentType<Pick<React.PropsWithChildren<ButtonProps>, "disabled" || "mini" & import("@material-ui/core/styles").StyledComponentProps<"root">>;
export default _default;

Button.tsx:

import React, { Fragment } from 'react';
import clsx from 'clsx';
import { withStyles, createStyles } from '@material-ui/core/styles';
import { default as MuiButton, ButtonProps as MuiButtonProps } from '@material-ui/core/Button';

export interface ButtonProps extends MuiButtonProps {
  defaultMargin?: boolean,
  classes: {
    root: string
  }
};

const styles = () => createStyles({
  root: {
    margin: '1.5em'
  }
});

const Button: React.SFC<ButtonProps> = (props: ButtonProps) => {
  return (
    <Fragment>
      <MuiButton
        className={clsx({
          [props.classes!.root]: props.classes!.root
        })} {...props}>
      </MuiButton>
    </Fragment>
  )
};

Button.defaultProps = {
  variant: 'contained',
  color: 'primary',
  size: 'medium',
  disabled: false
};

export default withStyles(styles)(Button);

tsconfig.json:

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": { "*": ["types/*"] },
    "outDir": "types"
  },
  "declaration": true,
  "include": ["src", "types"],
  "types": "dist/core/src/index.d.ts",
  "main": "dist/index.js",
  "files": [
    "dist/core/src/index.d.ts"
  ]
}

И здесь, в основной библиотеке приложения

App.tsx:

import React, { Component } from 'react';
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { Button } from '@our-company/our-component-library-core'
import { Grid } from '@our-company/our-component-library-layout'
import { get } from 'lodash'
import './App.css';
import authenticationActions from '../reducers/authentication/actions'
import userActions from '../reducers/user/actions'
type Props = {
  authDispatch: {
    login: (args: any) => any,
    logout: () => any
  },
  userDispatch: {
    fetchUser: () => any
  },
  user: object
}

type State = {
  count: number;
}
class App extends Component<Props, State> {
  componentDidMount () {
    this.props.authDispatch.login({email: 'email@email.com', password: '123456789'})
    this.props.userDispatch.fetchUser()
    this.props.authDispatch.logout()
  }
  render() {
    const { user } = this.props

    return (
      <div className="App">
        <header className="App-header">
        <Grid container>
          <Button variant="contained" color="primary">HELLO </Button>
          <h1>{ get(user, ['user', 'attributes', 'email']) }</h1>
        </Grid>

        </header>

      </div>
    );
  }
}

function mapStateToProps (state: any) {
  const {
    user
  } = state

  return {
    user
  }
}
function mapDispatchToProps (dispatch: any) {
  return {
    userDispatch: bindActionCreators(userActions, dispatch),
    authDispatch: bindActionCreators(authenticationActions, dispatch)
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App)

Я ожидаю, что код скомпилируется, однако он завершится неудачно с

ERROR in [at-loader] ./src/app/App.tsx:37:12 
    TS2604: JSX element type 'Button' does not have any construct or call signatures.

Answer 1

Вы экспортируете созданный вами компонент кнопки:

const Button

Экспорт является экспортом по умолчанию:

export default withStyles(styles)(Button);

Каким бы ни был результат вызова withStyles, это не то, что можно использовать в качестве элемента JSX.