Question

我创建了一个默认的VS2017 react-redux模板并尝试添加material-ui-next组件，我收到以下错误：

ERROR in [at-loader] ./node_modules/material-ui/BottomNavigation/BottomNavigationButton.d.ts:6:74 TS2344: Type '"onChange"' does not satisfy the constraint '"className" | "style" | "component" | "classes" | "innerRef" | "centerRipple" | "disableRipple" |...'. 
ERROR in [at-loader] ./node_modules/material-ui/ButtonBase/ButtonBase.d.ts:6:13 TS2694: Namespace 'React' has no exported member 'AnchorHTMLAttributes'. 
ERROR in [at-loader] ./node_modules/material-ui/Snackbar/Snackbar.d.ts:10:18 TS2430: Interface 'SnackbarProps' incorrectly extends interface 'Pick<HTMLAttributes<HTMLDivElement> & Partial<TransitionHandlers> & { classes: any; }, "defaultCh...'. Type 'SnackbarProps' is not assignable to type 'Pick<HTMLAttributes<HTMLDivElement> & Partial<TransitionHandlers> & { classes: any; }, "defaultCh...'. Types of property 'action' are incompatible. Type 'ReactElement<any> | ReactElement<any>[]' is not assignable to type 'string'. Type 'ReactElement<any>' is not assignable to type 'string'.

这是我的代码：

```

import * as React from 'react';
import { Link, RouteComponentProps } from 'react-router-dom';
import { connect } from 'react-redux';
import { ApplicationState } from '../store';
import * as PetGiftboxProbabilitiesState from 
'../store/PetGiftboxProbabilities';
import { GridList, GridListTile } from 'material-ui/GridList';

// At runtime, Redux will merge together...
type PetGiftboxProbabilityProps =
PetGiftboxProbabilitiesState.PetGiftboxProbabilitiesState
& typeof PetGiftboxProbabilitiesState.actionCreators    
& RouteComponentProps<{}>;

class FetchData extends React.Component<PetGiftboxProbabilityProps, {}> {
componentWillMount() {
    // This method runs when the component is first added to the page
    this.props.requestPetGiftboxProbabilities();
}
public render() {
    return <div>
        <h1>Pet giftbox forecast</h1>
        {this.renderForecastsTable()}
    </div>;
}
private renderForecastsTable() {
    return <GridList cellHeight={160}>
        {this.props.petGiftboxProbabilities.map(pet =>
            <GridListTile key={pet.petId}>
                <img className="pet-image" src={pet.imageUrl} alt=
 {pet.petName} />
            </GridListTile>
        )}
    </GridList>;
 }
}

export default connect(
(state: ApplicationState) => state.PetGiftboxProbabilities,
PetGiftboxProbabilitiesState.actionCreators          
)(FetchData as any) as typeof FetchData;

我的代码出了什么问题？提前谢谢。

Answer 1

2014年6月2日更新：我不建议再固定这些旧版本了。最新版本的React类型和材料-ui应该可以协同工作，尽管到目前为止还有一个不同的输入问题，修复暂挂具有一个简单的解决方法：https://github.com/mui-org/material-ui/issues/11656

我当前的设置（@material-ui/core的下一个版本应该解决由TS 2.9引起的问题）：

"@material-ui/core": "^1.1.0",
"@types/react": "^16.3.16",
"typescript": "^2.9.1"

我遇到了同样的问题。在Type 'ReactType' is not generic (material-ui@next)中的回答指出了我正确的方向，但这里是我需要更新的特定包和版本：

"@types/react": "16.0.34",
"@types/react-dom": "16.0.34",
"@types/react-router": "4.2.0",
"@types/react-router-dom": "4.2.2",
"react": "16.0.34",
"react-dom": "16.0.34",
"react-router-dom": "4.2.2",

您可以尝试手动更新package.json中的内容，然后运行npm upgrade，或删除node_modules并重新安装。它最终为我工作，虽然它是一个迂回的路径安装/升级/头撞约40分钟，然后才最终编译。我还建议检查node_modules/@types/react/package.json以查看实际使用的版本，如果遇到问题。

Answer 2

npm upgrade为我工作 - 我开始使用纱线，但当我搬到Material-UI-next时很快就切换了。

Material-ui-next打字稿错误

2 个答案: