0Pricing
TypeScript Academy · Aula

Componentes polimórficos; props as

Crie um componente Button polimórfico com uma prop as; combine props intrínsecas/DOM; tipifique refs usando forwardRef e ComponentRef .

Componentes polimórficos; props as é uma aula grátis de TypeScript Academy no CoddyKit. Esta é a aula 1 de 1. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de TypeScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de TypeScript Academy inclui 1 aulas no total.

Introdução

Objetivo: crie um Button polimórfico que possa ser renderizado como button, a ou qualquer elemento por meio de uma propriedade que define o elemento, preservando os tipos das Props e da referência.

  • Restrinja T a React.ElementType
  • Combine Props com segurança
  • Tipifique a referência encaminhada

Tipos básicos

Comece com OwnProps e um utilitário PolymorphicProps<T, P> que combina as Props intrínsecas de T com as suas próprias.

import React from "react"

type OwnProps = {
  variant?: "solid" | "outline"
  children: React.ReactNode
}

type PolymorphicProps<T extends React.ElementType, P> = {
  as?: T
} & P & Omit<React.ComponentPropsWithoutRef<T>, keyof P | "as">

// Example: Omit avoids prop collisions (e.g., our OwnProps vs intrinsic props)

Button polimórfico

O componente usa button por padrão, mas aceita as. O tipo da referência muda com T (por exemplo, HTMLAnchorElement para "a").

import React, { forwardRef } from "react"

type OwnProps = { variant?: "solid" | "outline"; children: React.ReactNode }

type PolymorphicProps<T extends React.ElementType, P> = { as?: T } & P & Omit<React.ComponentPropsWithoutRef<T>, keyof P | "as">

const ButtonInner = <T extends React.ElementType = "button">(
  { as, variant = "solid", children, ...rest }: PolymorphicProps<T, OwnProps>,
  ref: React.ForwardedRef<React.ComponentRef<T>>
) => {
  const Component = (as || "button") as React.ElementType
  const style = variant === "outline" ? { border: "1px solid #333", padding: 8 } : { background: "#2563eb", color: "white", padding: 8, borderRadius: 6 }
  return <Component ref={ref} style={style} {...rest}>{children}</Component>
}

export const Button = forwardRef(ButtonInner) as <T extends React.ElementType = "button">(
  props: PolymorphicProps<T, OwnProps> & { ref?: React.Ref<React.ComponentRef<T>> }
) => JSX.Element

Exemplos de uso

Quando as="a", Props intrínsecas como href ficam disponíveis e a referência é tipada como HTMLAnchorElement.

import React, { useRef } from "react"
import { Button } from "./Button"

export default function App() {
  const btnRef = useRef<HTMLButtonElement>(null)
  const linkRef = useRef<HTMLAnchorElement>(null)

  return (
    <div style={{ display: "grid", gap: 8 }}>
      <Button ref={btnRef} onClick={() => alert("clicked")}>Save</Button>
      <Button as="a" ref={linkRef} href="#docs" variant="outline">Docs</Button>
    </div>
  )
}

Variantes

Você pode envolver o componente polimórfico e ainda manter a flexibilidade. Use ComponentProps<typeof Button> para herdar suas Props.

import React from "react"
import { Button } from "./Button"

export function DangerButton(props: Omit<React.ComponentProps<typeof Button>, "variant">) {
  return <Button {...props} style={{ background: "#dc2626", color: "white", padding: 8, borderRadius: 6 }} />
}

// Works with polymorphism too
export default function App() {
  return (
    <div style={{ display: "grid", gap: 8 }}>
      <DangerButton>Delete</DangerButton>
      <DangerButton as="a" href="#confirm">Delete link</DangerButton>
    </div>
  )
}

Dicas

Dicas:

  • Restrinja T a React.ElementType.
  • Use Omit para resolver colisões entre nomes de Props.
  • Encaminhe a referência com forwardRef e tipifique-a como React.ComponentRef<T>.

Verificação da tipagem polimórfica

Verificação rápida: qual tipagem modela corretamente um componente polimórfico que encaminha sua referência?

Recapitulação

Recapitulação: você criou um Button polimórfico com uma propriedade as, combinou Props intrínsecas com segurança e tipificou a referência encaminhada para que os consumidores recebam sugestões corretas.

Perguntas Frequentes

A aula “Componentes polimórficos; props as” é grátis?

Sim — o texto completo de “Componentes polimórficos; props as” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de TypeScript Academy, atualize para CoddyKit PRO. O curso de TypeScript Academy inclui 1 aulas no total.

O que vou aprender em “Componentes polimórficos; props as”?

Crie um componente Button polimórfico com uma prop as; combine props intrínsecas/DOM; tipifique refs usando forwardRef e ComponentRef . Você pratica TypeScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar TypeScript Academy?

Nenhuma experiência prévia é necessária. TypeScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 1.

Quanto tempo leva a aula “Componentes polimórficos; props as”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de TypeScript Academy?

Sim. Cada aula de TypeScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

← Voltar para TypeScript Academy