“...”expected.ts(1005)和No overload与此调用匹配

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