[Dúvida] Dúvida Tipagem

Salve, Cristian!

Tem mais de uma de fazer isso, e pessoalmente eu iria pra algo nessa linha:

import styled from "@emotion/styled"

interface TypographyProps {
  variant: keyof typeof styles,
  component: keyof typeof components,
  children: React.ReactNode
}

const components = {
  h1: "h1",
  h2: "h2",
  h3: "h3",
  body: "p",
}

const styles = {
  h1: `
    font-weight: 600;
    font-size: 40px;
    line-height: 49px;
  `,
  h2: `
    font-weight: 600;
    font-size: 32px;
    line-height: 39px;
  `,
  h3: `
    font-weight: 500;
    font-size: 24px;
    line-height: 29px;
  `,
  body: `
    font-weight: 500;
    font-size: 24px;
    line-height: 29px;
  `,
}

export function Typography({ variant, component, children }: TypographyProps) {
  const tag = components[component]
  const UtilizedComponent = styled[tag]`${styles[variant]}`

  return <UtilizedComponent>{children}</UtilizedComponent>
}