Typescript 为什么makeStyles和createStyles必须分开(材质UI+;类型脚本)?

Typescript 为什么makeStyles和createStyles必须分开(材质UI+;类型脚本)?,typescript,material-ui,Typescript,Material Ui,我一直在使用Material UI需要的这种结构来处理TypeScript问题,每次我想要设计一个组件的样式时,我都需要记住如何将两个不同的函数组合成一个钩子(我可以用一个片段来解决它,但我从来没有感觉对): 因此,我当然试图通过将其抽象为1个函数来使其更为枯燥,但我似乎不明白如何使类型为此工作。以下是我笨拙的尝试: const makeUseStyles = (styleFunc: (th: Theme) => CSSProperties | CreateCSSProperties<

我一直在使用Material UI需要的这种结构来处理TypeScript问题,每次我想要设计一个组件的样式时,我都需要记住如何将两个不同的函数组合成一个钩子(我可以用一个片段来解决它,但我从来没有感觉对):

因此,我当然试图通过将其抽象为1个函数来使其更为枯燥,但我似乎不明白如何使类型为此工作。以下是我笨拙的尝试:

const makeUseStyles = (styleFunc: (th: Theme) => CSSProperties | CreateCSSProperties<{}>) =>
  makeStyles((theme: Theme) => {
    const st = styleFunc(theme);
    return createStyles(st);
  });
而由
makeUseStyles
返回的函数突然需要一个类型为
(值:JSSFontface,索引:number,数组:JSSFontface[])=>未知的必需参数
props


因此,我假设,由于我的尝试失败了,这就是为什么首先需要两个独立的函数来安抚TypeScript,但编译器会指定抽象(这感觉就像在我尝试干涸一点我的样式代码的那一刻它一直在做一样),这让我很困扰。所以我的问题是:为什么?

当您使用或升级到TypeScript版本>3.4时,您不需要调用createStyle。在此版本中可用的可以克服类型加宽。根据,函数
createStyles
将在MaterialUI v5中删除(尽管尚未从v5.0.0-alpha.23中删除)


我确实没有经历过任何类型的扩大,这也得到了一项研究的证实。文档一定要更新。

我使用的是TypeScript 4.1.2。从你的回答中我不清楚这应该如何解决这个问题。简言之:不再需要像使用类型加宽那样使用createStyle™ 使用makeStyle时不会发生这种情况。我很高兴IDE中有自动完成功能,因为我经常忘记这些函数名中的最后一个“s”。我懂了。现在我明白你想说什么了,现在我对它进行了测试,事实上,
createStyles
似乎没有必要。遗憾的是,赏金过期了
const makeUseStyles = (styleFunc: (th: Theme) => CSSProperties | CreateCSSProperties<{}>) =>
  makeStyles((theme: Theme) => {
    const st = styleFunc(theme);
    return createStyles(st);
  });
Type 'unknown' is not assignable to type 'PropsFunc<(value: JSSFontface, index: number, array: JSSFontface[]) => unknown, CreateCSSProperties<(value: JSSFontface, index: number, array: JSSFontface[]) => unknown>>'