Reactjs React TypeScript-将类型参数传递给标记的模板文本_Reactjs_Typescript_Styled Components

Reactjs React TypeScript-将类型参数传递给标记的模板文本

reactjs typescript

Reactjs React TypeScript-将类型参数传递给标记的模板文本,reactjs,typescript,styled-components,Reactjs,Typescript,Styled Components,所以我在一个项目中使用React-TypeScript。我也在使用样式化组件进行样式化-下面是我的代码 import React from 'react' import styled from 'styled-components' import MediaQuery from '../utils/MediaQuery' interface ISectionHeading { headline: string subheadline: string body: string }

所以我在一个项目中使用React-TypeScript。我也在使用样式化组件进行样式化-下面是我的代码

import React from 'react'
import styled from 'styled-components'
import MediaQuery from '../utils/MediaQuery'

interface ISectionHeading {
  headline: string
  subheadline: string
  body: string
}

export default function SectionHeading({
  headline,
  subheadline,
  body
}: ISectionHeading) {
  return (
    <Wrapper>
      <Heading headline={headline}>{headline}</Heading>
      <Subheadline>{subheadline}</Subheadline>
      <Body>{body}</Body>
    </Wrapper>
  )
}

const Wrapper = styled.header`
  // Some styles...
`
const Heading = styled.h1<ISectionHeading>`
  // Some styles...

  @media ${MediaQuery.medium} {
    &:before {
      content: '${props => props.headline}';
      // Some styles...
    }
  }
`
const Subheadline = styled.h2`
  // Some styles...
`
const Body = styled.p`
  // Some styles...
`

这是一个例子

提前谢谢你的帮助

更新：所以我才知道我是否做了

副标题

和

正文

可选类型，它会成功编译。我还是不明白为什么我需要这样做吗？它在沙箱上运行良好，无需执行此操作

问题在哪里？沙盒上没有错误这很奇怪，我在沙盒上得到的唯一错误是

参数'props'隐式地有一个'any'类型，但是可以从用法中推断出更好的类型。

为什么我在VSCode上会出现大错误？因为MediaQueryI在我的本地版本上删除了

MediaQuery

，我得到了相同的错误，就像我说的，

MediaQuery

只是被替换为

minwidth:300px

。我还注意到它实际上在沙盒上不起作用，如果你把鼠标悬停在第30行的

headline

上，它说它有类型

any

，所以它甚至没有使用界面。

const Heading = styled.h1<ISectionHeading>

Failed to compile.

~/src/components/Heading.tsx
TypeScript error in ~/src/components/Heading.tsx(18,8):
No overload matches this call.
  Overload 1 of 2, '(props: Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "style" | ... 252 more ... | "onTransitionEndCapture"> & { ...; } & ISectionHeading, "headline" | ... 256 more ... | "onTransitionEndCapture"> & Partial<...>, "headline" | ... 256 more ... | "onTransitionEndCapture"> & { ...; } & { ...; }): ReactElement<...>', gave the following error.
    Type '{ children: string; headline: string; }' is missing the following properties from type 'Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "style" | ... 252 more ... | "onTransitionEndCapture"> & { ...; } & ISectionHeading, "headline" | ... 256 more ... | "onTransitionEndCapture"> & Partial<...>, "headline" | ... 256 more ... | "onTransitionEndCapture">': subheadline, body
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<"h1", any, ISectionHeading, never>): ReactElement<StyledComponentPropsWithAs<"h1", any, ISectionHeading, never>, string | ... 1 more ... | (new (props: any) => Component<...>)>', gave the following error.
    Type '{ children: string; headline: string; }' is missing the following properties from type 'Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "style" | ... 252 more ... | "onTransitionEndCapture"> & { ...; } & ISectionHeading, "headline" | ... 256 more ... | "onTransitionEndCapture"> & Partial<...>, "headline" | ... 256 more ... | "onTransitionEndCapture">': subheadline, body  TS2769

    16 |   return (
    17 |     <Wrapper>
  > 18 |       <Heading headline={headline}>{headline}</Heading>
       |        ^
    19 |       <Subheadline>{subheadline}</Subheadline>
    20 |       <Body>{body}</Body>
    21 |     </Wrapper>

"react": "^16.11.0",
"react-dom": "^16.11.0",
"react-scripts": "3.2.0",
"styled-components": "^4.4.1",
"typescript": "3.7.2"

interface ISectionHeading {
  headline: string
  subheadline?: string
  body?: string
}