'...' expected.ts(1005) 并且没有重载匹配此调用答案

【问题标题】：'...' expected.ts(1005) and No overload matches this call'...' expected.ts(1005) 并且没有重载匹配此调用
【发布时间】：2021-07-11 13:29:15
【问题描述】：

各位程序员你好？？？？！

在使用 TypeScript、webPack、Babel、ESLint、Styled Components 等设置 React 应用程序一天之后。我已经很接近了..

我被两个错误困住了，我无法解决它们...... 那里有一些很棒的人可以指出我正确的方向吗？？？？。

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

第一期：

第二期：

eslintrc:

tsconfig:

【问题讨论】：

下次请避免发布代码图片，发布带有格式的实际代码。 How do I ask a good question?
当然，我认为图片会更容易被忽略:)

标签： reactjs typescript eslint styled-components

【解决方案1】：

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

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

【讨论】：

谢谢，这解决了第一个问题?，我会说看起来有点奇怪，但我想我只是不熟悉 React 和传播运算符?

【解决方案2】：

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

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

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

【讨论】：