0

这是我非常简单的组件：

import React, { ReactChild, ElementType } from 'react'
import styled from '@emotion/styled'

type WrapperPropsType = {
  size?: SizeType
}

type ButtonPropsType = {
  as?: ElementType<any>,
  size?: SizeType,
  children?: ReactChild
}

const Wrapper = styled.button<WrapperPropsType>((props: WrapperPropsType) => ({
  fontSize: FontSize[props.size],
}))

const Button = ({ as, size, children }: ButtonPropsType) => {
  return (
    <Wrapper as={as} size={size}>
        { children }
    </Wrapper>
  )
}

我的.tsconfig：

{
  "compilerOptions": {
    "types": ["node", "@emotion/react"],
    "declaration": true,
    "declarationDir": "build",
    "module": "esnext",
    "target": "es5",
    "sourceMap": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"],
  "exclude": [
    "node_modules",
    "build",
    "src/**/*.test.tsx"
  ]
}

但是在编译时我得到下一个错误：

错误：src/components/Button/Button.tsx(18,30)：语义错误 TS2339：类型“{主题？：主题；作为？：元素类型；} & Pick<DetailedHTMLProps<ButtonHTMLAttributes, HTMLButtonElement>, "form" | ... 265 更多... | "onTransitionEndCapture"> & { ...; }'。

我究竟做错了什么？谢谢你的帮助

软件包版本： @emotion/react版本：11.1.2 @emotion/styled版本：11.0.0 typescript版本：4.1.3

4

2 回答 2

1

我设法通过替换rollup-plugin-typescript2为@rollup/plugin-typescript. 代码中没有错误。

于 2020-12-21T21:56:54.230 回答
0

您已定义但未使用它size。WrapperPropsType添加它，它会工作

const Button = ({ as, size, children }: ButtonPropsType & WrapperPropsType) => {
于 2020-12-21T01:51:33.577 回答