TypeScript Academy · Lektion

Polymorphe Komponenten; as-Props

Erstellen Sie eine polymorphe Button-Komponente mit einer as-Prop, führen Sie intrinsische DOM-Props zusammen und typisieren Sie Refs mit forwardRef und ComponentRef .

Polymorphe Komponenten; as-Props ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 1. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des TypeScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der TypeScript Academy-Kurs umfasst insgesamt 1 Lektionen.

Einführung

Ziel: Erstellen Sie einen einzigen polymorphen Button, der über eine as-Prop als button, a oder beliebiges anderes Element gerendert werden kann – bei gleichzeitiger Beibehaltung der Props- und Ref-Typen.

Beschränken Sie T auf React.ElementType.
Führen Sie Props sicher zusammen.
Typisieren Sie die weitergeleitete Ref.

Grundlegende Typen

Beginnen Sie mit OwnProps und einer Hilfsdefinition PolymorphicProps<T, P>, die die intrinsischen Props für T mit Ihren eigenen zusammenführt.

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)

Polymorpher Button

Die Komponente verwendet standardmäßig button, akzeptiert aber as. Der Ref-Typ ändert sich mit T (z. B. HTMLAnchorElement für "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

Verwendungsbeispiele

Wenn as="a" gesetzt ist, werden intrinsische Props wie href verfügbar, und die Ref wird als HTMLAnchorElement typisiert.

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>
  )
}

Varianten

Sie können die polymorphe Komponente umschließen und ihre Flexibilität trotzdem beibehalten. Verwenden Sie ComponentProps<typeof Button>, um ihre Props zu übernehmen.

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>
  )
}

Tipps

Tipps:

Beschränken Sie T auf React.ElementType.
Verwenden Sie Omit, um Kollisionen bei Prop-Namen aufzulösen.
Leiten Sie die Ref mit forwardRef weiter und typisieren Sie sie als React.ComponentRef<T>.

Prüfung der polymorphen Typisierung

Schnelltest: Welche Typisierung modelliert eine polymorphe Komponente, die ihre Ref weiterleitet, korrekt?

Zusammenfassung

Zusammenfassung: Sie haben einen polymorphen Button mit einer as-Prop erstellt, intrinsische Props sicher zusammengeführt und die weitergeleitete Ref typisiert, sodass Consumer die korrekte IntelliSense-Unterstützung erhalten.

Häufig gestellte Fragen

Ist die Lektion „Polymorphe Komponenten; as-Props“ kostenlos?

Ja — der vollständige Text von „Polymorphe Komponenten; as-Props“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des TypeScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der TypeScript Academy-Kurs umfasst insgesamt 1 Lektionen.

Was lerne ich in „Polymorphe Komponenten; as-Props“?

Erstellen Sie eine polymorphe Button-Komponente mit einer as-Prop, führen Sie intrinsische DOM-Props zusammen und typisieren Sie Refs mit forwardRef und ComponentRef . Du übst TypeScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um TypeScript Academy zu starten?

Keine Vorkenntnisse erforderlich. TypeScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 1.

Wie lange dauert die Lektion „Polymorphe Komponenten; as-Props“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser TypeScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede TypeScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

← Zurück zu TypeScript Academy