TS2604：将“material-ui”按钮从一个包导入到另一个包时

Question

我的团队正在为我们的应用程序实现一个新的前端，并决定从标准的 react 切换到 typescript。我在开发方面相当新，并且已经在这个问题上停留了好几天。本质上，我们有两个存储库，一个保存我们的组件，另一个将它们联系在一起以用于前端应用程序。我们通过 lerna/yarn 链接连接这些。

我面临的问题在于从其他库导入我们版本的 material-ui 按钮组件时，并且也适用于其他几个组件。这样做时编译失败。

组件库中的代码编译正确。但是，我们仅在将其导入其他应用程序时才会收到此错误。

我尝试了几件事来尝试解决这个问题，首先修改组件内 dist/ 文件夹中的 Button.d.ts 文件，更改导出的 ReactComponent 的类型，将接口更改为类等。其次，修改tsconfig.json 包括调整通过文档可用的多个选项、更改“类型”路径等。

以下是我认为组件库中的相关文件：

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 元素的东西。