Question

我正在开发一个反应库，例如MyLib，所以我想为我的lib用户提供propTypes。但是，将打字稿和样式化组件结合使用，会导致以下错误：

Property 'propTypes' does not exist on type 'StyledComponent<"div", any, ScrollerProp, never>'.ts(2339)

根据以下代码库，我应该为Scroller声明什么类型？（目前，我只能使用any类型来解决编译错误）

MyLib.d.ts

export type ScrollerProp = {
  maxHeight: number,
}

MyLib.tsx

import PropTypes from 'prop-types'
import styled from 'styled-components'

const Scroller: any = styled.div<ScrollerProp>`
  overflow-x: auto;
  overflow-y: visible;
  max-width: 100%;
  float: left;
  width: auto;
  ${({ maxHeight }) => maxHeight && css`
    max-height: ${maxHeight}px;
  `}
`

Scroller.propTypes = {
  maxHeight: PropTypes.number,
}

Answer 1

我会做这样的事情

import PropTypes from 'prop-types'
import styled from 'styled-components'

const ScrollerStyle: any = styled.div<ScrollerProp>`
  overflow-x: auto;
  overflow-y: visible;
  max-width: 100%;
  float: left;
  width: auto;
  ${({ maxHeight }) => maxHeight && css`
    max-height: ${maxHeight}px;
  `}
`;

const Scroller = (props: any) => <ScrollerStyle {...props} />;

Scroller.propTypes = {
  maxHeight: PropTypes.number,
};

注意：我几乎不了解TS，所以我不确定'props：'部分是否正确，但是您明白了。

Answer 2

我有类似的问题，即使不是同一个问题。对我有用的是：

import styled from 'styled-components'

const Scroller: any = styled.div<{maxHeight: number}>`
  overflow-x: auto;
  overflow-y: visible;
  max-width: 100%;
  float: left;
  width: auto;
  ${({ maxHeight }) => maxHeight && css`
    max-height: ${maxHeight}px;
  `}
`

使用我的类型作为外部定义不起作用，但直接使用它。按照Styled components Docs - Using custom props

如何为样式组件声明“ propTypes”？

MyLib.d.ts

MyLib.tsx

2 个答案: