reactjs - Material-ui-next typescript-fejl

Jeg oprettede en standard VS2017 react-redux skabelon og prøvede at tilføje material-ui-next komponent, og jeg får følgende fejl:

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'.

Dette er min kode:

```

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;

Hvad er galt med min kode? Tak på forhånd.

Svar #1

Opdatering 2/6/2018: Jeg vil ikke længere anbefale at fastgøre til disse gamle versioner. De nyeste versioner af React-typer og material-ui burde fungere sammen, selvom der i dag er et andet typningsproblem med en løsning på vej, som har en simpel løsning: https://github.com/mui-org/material-ui/issues/11656

Min nuværende opsætning (næste version af @material-ui/core burde løse problemet forårsaget af TS 2.9):

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

Jeg havde lige det samme problem. Et svar i Type 'ReactType' er ikke generisk (material-ui@next) pegede mig i den rigtige retning, men her er de specifikke pakker og versioner, som jeg havde brug for at opdatere til:

"@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",

Du kunne prøve at opdatere dem i package.json manuelt og derefter køre npm upgrade, eller slette node_modules og geninstallere. Det endte med at virke for mig, selvom det var en omvej med installation/opgradering/hovedbankning i omkring 40 minutter, før det endelig blev kompileret. Jeg anbefaler også at tjekke node_modules/@types/react/package.json for at se, hvilken version der faktisk bliver brugt, hvis du støder på problemer.

Svar #2

npm upgrade virkede for mig - jeg startede med yarn, men skiftede hurtigt over, da jeg gik over til Material-UI-next.

Relaterede artikler