reactjs - Material-ui-next typescript 错误

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

2018 年 6 月 2 日更新:我不建议再固定到这些旧版本。最新版本的 React types 和 material-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 以查看实际使用的版本。