首页 > 解决方案 > Typescript in material-ui "An interface may only extend a class or another interface."

问题描述

I have a React/typescript-project, with material-ui. After updating material-ui I get the error message:

"An interface may only extend a class or another interface."

pointing at the export-line, below. First of all, whats the actual error, is this valid, but for another typescript version or is there a serious error/mismatch in material-ui/typescript/react-package combination?... second of all, how do I fix it?

...
type SystemProps = PropsFor<BoxStyleFunction>;
type ElementProps = Omit<React.HTMLAttributes<HTMLElement>, keyof SystemProps>;

export interface BoxProps extends ElementProps, SystemProps {   //<-- error on this line
  // styled API
  component?: React.ElementType;
  clone?: boolean;
  // workaround for https://github.com/mui-org/material-ui/pull/15611
  css?: SystemProps;
}

declare const Box: React.ComponentType<BoxProps>;

export default Box;

This is my package.json:

{
  "name": "webclient",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@aspnet/signalr": "^1.0.3",
    "@fortawesome/fontawesome-svg-core": "^1.2.15",
    "@fortawesome/free-regular-svg-icons": "^5.7.2",
    "@fortawesome/free-solid-svg-icons": "^5.7.2",
    "@fortawesome/react-fontawesome": "^0.1.4",
    "@material-ui/core": "^4.0.0",
    "@material-ui/icons": "^3.0.2",
    "@types/history": "^4.7.2",
    "@types/material-ui": "^0.21.6",
    "@types/signalr": "^2.2.35",
    "copyfiles": "^2.1.0",
    "mobx": "^5.1.0",
    "mobx-react": "^5.2.6",
    "mobx-react-devtools": "^6.0.3",
    "mobx-react-router": "^4.0.5",
    "react": "^16.5.0",
    "react-dom": "^16.5.0",
    "react-fontawesome": "^1.6.1",
    "react-iframe": "^1.5.0",
    "react-loading-screen": "0.0.17",
    "react-router-bootstrap": "^0.24.4",
    "react-circular-progressbar": "2.0.2",
    "react-router-dom": "^4.3.1",
    "react-scripts-ts": "2.17.0",
    "rimraf": "^2.6.2"
  },
  "scripts": {
    "start": "react-scripts-ts start",
    "build": "rimraf ../wwwroot/* && react-scripts-ts build && copyfiles ./build/**/* ../wwwroot/ -u 1",
    "eject": "react-scripts-ts eject"
  },
  "devDependencies": {
    "@types/node": "^10.9.4",
    "@types/react": "^16.4.13",
    "@types/react-dom": "^16.0.7",
    "typescript": "^3.0.3"
  }
}

标签: reactjstypescriptmaterial-ui

解决方案


推荐阅读