TypeScript Academy · Ders

Çok biçimli bileşenler; as özellikleri

as özelliğine sahip çok biçimli bir Button bileşeni oluşturun; yerleşik/DOM özelliklerini birleştirin; ref türlerini forwardRef ve ComponentRef ile belirleyin.

Çok biçimli bileşenler; as özellikleri, CoddyKit'te ücretsiz bir TypeScript Academy dersidir. Bu, 1 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, TypeScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. TypeScript Academy kursu toplamda 1 dersten oluşur.

Giriş

Hedef: button, a veya bir olarak özelliği aracılığıyla herhangi bir öğe olarak oluşturulabilen tek bir çok biçimli Button oluşturun; bunu yaparken özellik ve başvuru türlerini koruyun.

T türünü React.ElementType ile kısıtlama
Özellikleri güvenli şekilde birleştirme
İletilen başvurunun türünü belirleme

Temel türler

OwnProps ile başlayın ve PolymorphicProps<T, P> yardımcı programını kullanarak T için yerleşik özellikleri kendi özelliklerinizle birleştirin.

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)

Çok biçimli Button

Bileşen varsayılan olarak button değerini kullanır ancak as değerini kabul eder. Başvuru türü T ile değişir (örneğin, "a" için HTMLAnchorElement).

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

Kullanım örnekleri

as="a" olduğunda, href gibi yerleşik özellikler kullanılabilir hale gelir ve başvurunun türü HTMLAnchorElement olarak belirlenir.

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

Varyantlar

Çok biçimli bileşeni sarmalasanız bile esnekliği koruyabilirsiniz. Özelliklerini devralmak için ComponentProps<typeof Button> kullanın.

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

İpuçları

İpuçları:

T türünü React.ElementType ile kısıtlayın.
Özellik adı çakışmalarını çözmek için Omit kullanın.
Başvuruyu forwardRef ile iletin ve türünü React.ComponentRef<T> olarak belirleyin.

Çok biçimli tür kontrolü

Hızlı kontrol: Başvurusunu ileten çok biçimli bir bileşen hangi tür tanımlamasıyla doğru şekilde modellenir?

Özet

Özet: as özelliğine sahip çok biçimli bir Button oluşturdunuz, yerleşik özellikleri güvenli şekilde birleştirdiniz ve tüketicilerin doğru otomatik tamamlama desteği alması için iletilen başvurunun türünü belirlediniz.

Sıkça Sorulan Sorular

“Çok biçimli bileşenler; as özellikleri” dersi ücretsiz mi?

Evet — “Çok biçimli bileşenler; as özellikleri” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve TypeScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. TypeScript Academy kursu toplamda 1 dersten oluşur.

“Çok biçimli bileşenler; as özellikleri” dersinde ne öğreneceğim?

as özelliğine sahip çok biçimli bir Button bileşeni oluşturun; yerleşik/DOM özelliklerini birleştirin; ref türlerini forwardRef ve ComponentRef ile belirleyin. TypeScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

TypeScript Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te TypeScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 1 dersinin 1. dersidir.

“Çok biçimli bileşenler; as özellikleri” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu TypeScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her TypeScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

← TypeScript Academy Sayfasına Dön