makeStyles() 使用 Typescript 引发错误

Question

晚上好， 我正在尝试将我的 JS react 应用程序转换为 React Typescript，但我遇到了一个很长的错误。我不知道如何克服这一点。下面是它引用的文件中的代码以及我是如何实现它的，以及错误。

我是 Typescript 的新手，我尝试过其他 Stackoverflow 帖子中的其他解决方案，但没有一个有效。我最初使用的是creatStyles()，但这似乎也不起作用。

如果我将useStyles 的实现更改为

//const useStyles = makeStyles<DefaultTheme>((theme: Theme) => {createStyles(appStyle)});

然后我得到的错误告诉我theme:Theme => void

感谢任何指导

TypeScript error in /Users/augustshah/Documents/Coding-Tools-new/Projects/Payment-Dashboard/src/layouts/Admin.tsx(43,30):
Argument of type '(theme: Theme) => { wrapper: { position: string; top: string; height: string; }; mainPanel: { maxHeight: string; width: string; overflowScrolling: string; transition: string; overflow: string; position: string; float: string; }; content: { ...; }; container: { ...; }; map: { ...; }; }' is not assignable to parameter of type 'Styles<Theme, {}, "content" | "map" | "wrapper" | "mainPanel" | "container">'.
  Type '(theme: Theme) => { wrapper: { position: string; top: string; height: string; }; mainPanel: { maxHeight: string; width: string; overflowScrolling: string; transition: string; overflow: string; position: string; float: string; }; content: { ...; }; container: { ...; }; map: { ...; }; }' is not assignable to type 'StyleRulesCallback<Theme, {}, "content" | "map" | "wrapper" | "mainPanel" | "container">'.
    Call signature return types '{ wrapper: { position: string; top: string; height: string; }; mainPanel: { maxHeight: string; width: string; overflowScrolling: string; transition: string; overflow: string; position: string; float: string; }; content: { ...; }; container: { ...; }; map: { ...; }; }' and 'StyleRules<{}, "content" | "map" | "wrapper" | "mainPanel" | "container">' are incompatible.
      The types of 'wrapper' are incompatible between these types.
        Type '{ position: string; top: string; height: string; }' is not assignable to type 'CSSProperties | CreateCSSProperties<{}> | PropsFunc<{}, CreateCSSProperties<{}>>'.
          Type '{ position: string; top: string; height: string; }' is not assignable to type 'CreateCSSProperties<{}>'.
            Types of property 'position' are incompatible.
              Type 'string' is not assignable to type 'PositionProperty | PropsFunc<{}, PositionProperty>'.  TS2345

    41 |   </Switch>
    42 | );
  > 43 | const useStyles = makeStyles((theme: Theme) => (appStyle(theme)));
       |                              ^
    44 | 
    45 | 
    46 |  //const useStyles = makeStyles<DefaultTheme>((theme: Theme) => {createStyles(appStyle)});

Admin.tsx

const useStyles = makeStyles((theme: Theme) => (appStyle(theme)));



export default function Admin({ ...rest }) {
  // styles
  //const classes = useStyles();
  const theme = useTheme<Theme>();
  const classes = useStyles(theme);

 
  return (
    <div className={classes.wrapper}>
      {handleSideBarLogin() ?
     null :  <Sidebar
     routes={routes}
     logoText={"02DesignStudio"}
     logo={logo}
     image={image}
     handleDrawerToggle={handleDrawerToggle}
     open={mobileOpen}
     color={color}
     {...rest}
    />
      }
    </div>
  );
}

AdminStyle.tsx

import {
  drawerWidth,
  transition,
  container
} from "../../material-dashboard-react";

const appStyle = theme => ({
  wrapper: {
    position: "relative" as "relative",
    top: "0",
    height: "100vh"
  },
  mainPanel: {
    [theme.breakpoints.up("md")]: {
      width: `calc(100% - ${drawerWidth}px)`
    },
    overflow: "auto",
    position: "relative",
    float: "right",
    ...transition,
    maxHeight: "100%",
    width: "100%",
    overflowScrolling: "touch"
  },
  content: {
    marginTop: "70px",
    padding: "30px 15px",
    minHeight: "calc(100vh - 123px)"
  },
  container,
  map: {
    marginTop: "70px"
  }
});

export default appStyle;

通天塔

module.exports = api => {
    api.cache.forever();
    return {
      "presets": [
        [ "@babel/preset-env", {
          "targets": {
            "node": "8.10"
          }
        }, '@babel/preset-typescript']
      ],
      plugins: [
        "add-react-displayname",
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-proposal-object-rest-spread"
      ]
    };
  }

TSconfig

{
 
  "compilerOptions": {
    "target": "es2016",
    "module": "esnext",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": false,
    "skipLibCheck": true,
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "baseUrl": "./",
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "keyofStringsOnly": true,
    "typeRoots": [
      "./src"
    ],
    "types": [
      "react",
      "jest",
      "node"
    ],
    "jsx": "react"
  },
  "include": [
    "src/*"
  ],
  "exclude": [
    "node_modules",
  ],
}

新错误

src/assets/jss/material-dashboard-react/layouts/adminStyle.tsx
  Line 9:26:  Parsing error: Unexpected token, expected ","

   7 | const appStyle = theme => ({
   8 |   wrapper: {
>  9 |     position: "relative" as "relative",
     |                          ^
  10 |     top: "0",
  11 |     height: "100vh"
  12 |   },

Answer 1

让我们看看那个错误。 虽然它很长，但 Typescript 有助于深入了解我们遇到的确切类型不匹配。 看着

The types of 'wrapper' are incompatible between these types.
Types of property 'position' are incompatible

我们知道键 wrapper.position 是类型不匹配的根源。

进一步查看类型错误的最后一行：

Type 'string' is not assignable to type 'PositionProperty | PropsFunc<{}, PositionProperty>'

我们看到 Typescript 与我们的类型 string 不匹配 PositionProperty 是什么。

PositionProperty是一组允许的字符串，比如relative和absolute，但是typescript认为我们的类型是string，虽然我们将position定义为"relative"：

const appStyle = theme => ({
wrapper: {
  position: "relative",

这是因为 Typescripts type widening。 我们需要告诉 typescript 我们想要这里的特定类型。 将分配更改为

const appStyle = theme => ({
wrapper: {
  position: "relative" as "relative", // Tells typescript to use "relative" as type

应该修正你的错误。

Answer 2

import {withStyles} from 'materialui/core/styles'
const decorate = withStyles({
  container: {
    position: 'absolute',
    // ...
  },
}