TypeScript Academy · Lekcja

Komponenty polimorficzne; props as

Budowanie polimorficznego komponentu Button z propem as, łączenie props intrinsic/DOM oraz typowanie refs za pomocą forwardRef i ComponentRef

Komponenty polimorficzne; props as to bezpłatna lekcja TypeScript Academy na CoddyKit. To lekcja 1 z 1. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej TypeScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs TypeScript Academy zawiera 1 lekcji w sumie.

Wprowadzenie

Cel: Utworzyć jeden polimorficzny przycisk Button, który może renderować się jako button, a lub dowolny element za pomocą propu as, zachowując przy tym typy propsów i refów.

Ograniczenie T do React.ElementType
Bezpieczne łączenie propsów
Typowanie przekazywanego refa

Typy bazowe

Zacznij od OwnProps i narzędzia PolymorphicProps<T, P>, które łączy propsy wbudowane dla T z własnymi propsami.

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)

Polimorficzny Button

Komponent domyślnie używa button, ale akceptuje as. Typ refa zmienia się wraz z T (np. HTMLAnchorElement dla "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

Przykłady użycia

Gdy as="a", dostępne stają się propsy wbudowane, takie jak href, a ref jest typowany jako 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>
  )
}

Warianty

Możesz opakować komponent polimorficzny i nadal zachować jego elastyczność. Użyj ComponentProps<typeof Button>, aby odziedziczyć jego propsy.

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

Wskazówki

Wskazówki:

Ogranicz T do React.ElementType.
Użyj Omit, aby rozwiązać konflikty nazw propsów.
Przekazuj ref za pomocą forwardRef i typuj go jako React.ComponentRef<T>.

Sprawdzanie typowania polimorficznego

Szybkie sprawdzenie: które typowanie poprawnie modeluje komponent polimorficzny przekazujący ref?

Podsumowanie

Podsumowanie: Utworzyłeś polimorficzny Button z propem as, bezpiecznie połączyłeś propsy wbudowane i otypowałeś przekazywany ref, dzięki czemu kod korzystający z komponentu otrzymuje poprawne podpowiedzi.

Często zadawane pytania

Czy lekcja „Komponenty polimorficzne; props as” jest bezpłatna?

Tak — pełny tekst „Komponenty polimorficzne; props as” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu TypeScript Academy, przejdź na CoddyKit PRO. Kurs TypeScript Academy zawiera 1 lekcji w sumie.

Co nauczysz się w „Komponenty polimorficzne; props as”?

Budowanie polimorficznego komponentu Button z propem as, łączenie props intrinsic/DOM oraz typowanie refs za pomocą forwardRef i ComponentRef Ćwiczysz TypeScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć TypeScript Academy?

Nie wymagamy żadnego doświadczenia. TypeScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 1.

Ile czasu zajmuje lekcja „Komponenty polimorficzne; props as”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji TypeScript Academy?

Tak. Każda lekcja TypeScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

← Powrót do TypeScript Academy