不能在没有引用的情况下命名类型

Question

我的项目的设置是tsdx (基于Rollup和Typescript)。

在我的IDE (vscode)中工作一切看起来都很好，甚至运行yarn tsc也没有错误。

当我运行yarn build (即tsdx build)时，会得到以下错误：

(typescript) Error: /home/me/dev/app/src/components/alert/Alert.tsx(36,7): semantic error TS2742: The inferred type of 'AlertContainer' cannot be named without a reference to '@emotion/serialize/node_modules/csstype'. This is likely not portable. A type annotation is necessary.
Error: /home/me/dev/app/src/components/alert/Alert.tsx(36,7): semantic error TS2742: The inferred type of 'AlertContainer' cannot be named without a reference to '@emotion/serialize/node_modules/csstype'. This is likely not portable. A type annotation is necessary.

错误中引用的代码是：

type AlertContainerProps = {
  theme: any
};
const AlertContainer = styled(animated.div)<AlertContainerProps>`
  ${(props) => props.theme.primaryView}
  ...
`;

...

type AlertContentProps = Pick<React.ComponentProps<typeof AlertContainer>, 'style'> & {
  status?: string
};

我做错了什么？我怎么才能修好它？

我尝试了这解决方案，但没有成功。

Answer 1

这帮了我

import { StyledComponent } from '@emotion/styled';
import type { BoxProps } from '@mui/material/Box';
import Box from '@mui/material/Box';
import { styled } from '@mui/material/styles';

export const BoxStyled: StyledComponent<BoxProps> = styled(Box)(({ theme }) => ({ .......