Question

我的团队正在为我们的应用程序实现一个新的前端，并决定从标准响应转换为打字稿。我在开发方面还很陌生，已经在这个问题上停留了几天。本质上，我们有两个存储库，一个存储着我们的组件，另一个将它们绑定在一起以用于前端应用程序。我们通过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调用的结果是 not 可以用作JSX元素的东西。

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

1 个答案: