'...' expected.ts(1005) 并且没有重载匹配这个调用

Question

程序员小伙伴们好?！

在使用 TypeScript、webPack、Babel、ESLint、Styled Components 等设置 React 应用程序一天后。我非常接近..

我被两个错误困住了，我无法重新爱上它们... 那里有一些很棒的人可以为我指明正确的方向吗?。

对于第一个问题，我遵循了本指南但没有结果?： https://binyamin.medium.com/using-typescript-with-styled-components-35950e196e9c

第一期：

第二期：

eslintrc：

tsconfig：

Answer 1

这只是一个语法错误，请阅读有关 JSX in depth 的更多信息。检查prettier output。

<>
  <Wrapper appearance={appearance} />
  <Alert label="Hello" appearance="info" />
  // same ("... expected")
  <Wrapper {...{ appearance }} />
  <Alert {...{ label: "Hello", appearance: "info" }} />
</>

Answer 2

第二个问题是通过创建一个只包含包装类所需的道具的类型来解决的：

interface IWrapperTypes {
    appearance: "success" | "warning" | "info" | "danger" | "notification";
}

type WrapperTypes = IWrapperTypes;
const Wrapper = styled.div<WrapperTypes> //....