简单样式组件和Typescript安装程序类型检查错误

Question

我目前正在将Typescript安装到一个存储库中，该存储库具有现有的Webpack和Babel设置，其中包括Styled Components。

由于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的版本没有正确对齐(。

Answer 1

我发现了这个问题。

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