样式化的组件 Typescript 接口未定义

Question

我正在添加 styled-components 来响应 typescript 项目。在我声明 interface 并添加到我创建的样式组件之前，一切看起来都很好。

import styled from 'styled-components';

const Flex = styled.div`
    display: flex;
    flex-direction: ${props => props.direction};
`;

上面的工作正常。

后来，我给这个添加了这样的接口。

interface FlexProps {
    direction?: 'row' | 'column';
}

const Flex = styled.div<FlexProps>`
    display: flex;
    flex-direction: ${props => props.direction};
`;

我的页面因此错误而损坏。 Uncaught ReferenceError: FlexProps is not defined 来自浏览器控制台。

这是我的包的版本。

"styled-components": "^4.3.2",
"@types/styled-components": "^4.1.18",
"babel-loader": "^8.0.0-beta.0",
"babel-plugin-styled-components": "^1.10.6",
"typescript": "~3.2.1",

Answer 1

把div上的接口去掉，放到你的箭头函数里。

这样

const Flex = styled.div`
    display: flex;
    flex-direction: ${(props: FlexProps) => props.direction};
`;