时间戳

首页 > 解决方案 > React TypeScript - 将类型参数传递给标记的模板文字

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

问题描述

所以我在一个项目中使用 React TypeScript。我还在使用 Styled Components 进行样式设置 - 这是我的代码。

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...
`

正如文档中所建议的那样，我正在尝试将我的类型参数从接口传递到样式化组件。

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"

这是一个CodeSandBox。

我在这里先向您的帮助表示感谢！

更新：所以我只是想通如果我做了subheadline和body 可选类型，它编译成功。我仍然不明白为什么我需要这样做？如果不这样做，它可以在沙盒上正常工作。

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

标签： reactjstypescriptstyled-components

解决方案

推荐阅读