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

Posted 2023-03-13

【中文标题】简单样式的组件和 Typescript 设置类型检查错误

【英文标题】：Simple Styled Components and Typescript Setup Typechecking Error

【发布时间】：2021-08-04 21:11:02

【问题描述】：

我目前正在将 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 中不同版本的样式化组件以及不同版本的 @types/react 和 @types/styled-components。

我有点纠结于我还能研究什么或可以用什么来调试问题。

我猜这是依赖关系图问题（@types 的版本没有正确对齐）。

【参考方案1】：

我发现了问题。

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