reactjs - 简单样式组件和 Typescript 设置类型检查错误

Question

我目前正在将 Typescript 安装到包含样式组件的现有 Webpack 和 Babel 设置的存储库中。
由于 Babel 会负责编译，所以我配置了 tsc执行 typechecking只要。但是，使用定义样式化组件 div 的简单 Typescript React 组件，tsc给我以下错误:

core/ui/NoticeBanner/index.tsx:33:6 - error TS2786: 'BannerContainer' cannot be used as a JSX component.
  Its return type 'ReactElement<Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<...>> & { ...; }, never> & Partial<...>, "theme"> & { ...; }, string | JSXElementConstructor<...>>' is not a valid JSX element.
    Type 'ReactElement<Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<...>> & { ...; }, never> & Partial<...>, "theme"> & { ...; }, string | JSXElementConstructor<...>>' is missing the following properties from type 'Element': nodeName, attributes, children

33     <BannerContainer>
        ~~~~~~~~~~~~~~~

core/ui/NoticeBanner/index.tsx:41:8 - error TS2786: 'BannerText' cannot be used as a JSX component.
  Its return type 'ReactElement<Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<...>> & { ...; }, never> & Partial<...>, "theme"> & { ...; }, string | JSXElementConstructor<...>>' is not a valid JSX element.

41       <BannerText>{message}</BannerText>

这是有问题的组件:

import React from 'react';

import AlertWarning from 'material-ui/svg-icons/alert/warning';
import ActionInfo from 'material-ui/svg-icons/action/info';

import styled from 'styled-components';

const BannerContainer = styled.div`
  background-color: rgba(243, 209, 121, 0.23);
  padding: 10px 30px;
  margin: 40px 0px;
  flex-direction: row;
  display: flex;
  align-items: center;
`;

const BannerText = styled.div`
  margin-left: 13px;
  font-size: 18px;
  font-weight: 400;
  color: #333333 !important;
  line-height: 140.28% !important;
`;

interface NoticeBannerProps {
  message: string;
  status: string;
}

const NoticeBanner = (props: NoticeBannerProps) => {
  const { message, status } = props;
  return (
    <BannerContainer>
      <div style={{ display: 'flex' }}>
        {status === 'failed' ? (
          <AlertWarning className="alert-icon" color="#dc3545" />
        ) : (
          <ActionInfo className="info-icon" color="#8F2C87" />
        )}
      </div>
      <BannerText>{message}</BannerText>
    </BannerContainer>
  );
};

export default NoticeBanner;

依赖版本

"@types/react": "16.9.30",
"@types/styled-components": "^5.1.9",
"react": "16.8.6",
"styled-components": "^5.3.0",
"typescript": "4.2.4",

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "allowJs": true,
    "jsx": "react",
    "noEmit": true,
    "isolatedModules": true,
    "strict": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "baseUrl": "./",
    "paths": {
      "~/*": ["*"]
    }
  },
  "exclude": ["node_modules", "__mocks__", "**/*.spec.js", "test", "public", "dist"]
}

我在 v5 中尝试了不同版本的 Styled Components 以及 @types/react 的不同版本。和 @types/styled-components .
我对我可以查看的其他内容或可以用来调试问题的内容有些困惑。
我猜这要么是一个依赖图问题(@types 的版本没有正确对齐)。

Answer 1

我想通了这个问题。
我的存储库正在使用 yarn 工作区，并且有一个与它自己无关的文件夹 node_modules导致问题的文件夹。将其添加到 tsconfig.json的 exclude配置选项解决了这个问题。