'...' 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. Check prettier output 的更多信息。

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

Answer 2

第二个问题通过创建一个只包含包装器中所需道具的类型得到解决 class:

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

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

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

'...' expected.ts(1005) and No overload matches this call

typescript

reactjs

eslint

styled-components