0Pricing
TypeScript Academy · Ders

Özellikler ve alt öğeler; olay işleyicileri; ref'ler

Türleri belirlenmiş özellikleri ve alt öğeleri tanımlayın; olay işleyicilerini güvenle bağlayın; DOM düğümlerine erişmek için ref'ler oluşturup kullanın.

Özellikler ve alt öğeler; olay işleyicileri; ref'ler, CoddyKit'te ücretsiz bir TypeScript Academy dersidir. Bu, 3 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 3 dersten oluşur.

Giriş

Hedef: Türleri belirlenmiş React bileşenleri oluşturun: özellikleri (alt öğelerle birlikte) tanımlayın, olay işleyicilerini kesin türlerle bağlayın ve başvurular kullanarak bir input'a odaklanın.

  • Türleri belirlenmiş özellik arayüzleri
  • Olay işleyicisi türleri
  • DOM erişimi için başvurular

Türleri belirlenmiş özellikler

Bir özellik arayüzü bildirin; isteğe bağlı özellikleri kullanın ve birleşim sabitleriyle türü daraltın. Varsayılanları bileşenin içinde tutun.

import React from "react"

interface BadgeProps {
  text: string
  color?: "primary" | "success" | "warning"
}

export function Badge({ text, color = "primary" }: BadgeProps) {
  const bg = color === "success" ? "#16a34a" : color === "warning" ? "#d97706" : "#2563eb"
  return <span style={{ backgroundColor: bg, color: "white", padding: 4, borderRadius: 6 }}>{text}</span>
}

export default function App() {
  return (
    <div style={{ display: "grid", gap: 8 }}>
      <Badge text="Saved" color="success" />
      <Badge text="Warn" color="warning" />
    </div>
  )
}

Alt öğeler

Özelliklerinize türü belirlenmiş bir alt öğe yuvası eklemek için PropsWithChildren<T> (veya React.PropsWithChildren) kullanın.

import React, { PropsWithChildren } from "react"

type CardProps = PropsWithChildren<{ title: string }>

function Card({ title, children }: CardProps) {
  return (
    <div style={{ border: "1px solid #e5e7eb", padding: 12, borderRadius: 8 }}>
      <h3 style={{ margin: 0 }}>{title}</h3>
      <div>{children}</div>
    </div>
  )
}

export default function App() {
  return (
    <Card title="Dashboard">
      <p>Children are typed automatically.</p>
    </Card>
  )
}

Olay işleyicileri

React.MouseEvent<Element> ve React.ChangeEvent<HTMLInputElement> kullanmayı tercih edin. Bunlar türleri belirlenmiş hedef/currentTarget değerlerini sunar.

import React from "react"

export default function App() {
  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    console.log("clicked", e.currentTarget.name)
  }

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    console.log("value", e.target.value)
  }

  return (
    <div style={{ display: "grid", gap: 8 }}>
      <input name="n" onChange={handleChange} placeholder="Type here" />
      <button name="ok" onClick={handleClick}>Confirm</button>
    </div>
  )
}

Başvurular: DOM erişimi

useRef<HTMLInputElement>(null) null olabilir bir başvuruyu korur; DOM düğümüne güvenli şekilde erişmek için isteğe bağlı zincirleme kullanın.

import React, { useRef } from "react"

export default function App() {
  const inputRef = useRef<HTMLInputElement>(null)

  const focusInput = () => {
    inputRef.current?.focus()
  }

  return (
    <div style={{ display: "grid", gap: 8 }}>
      <input ref={inputRef} placeholder="Focus me" />
      <button onClick={focusInput}>Focus</button>
    </div>
  )
}

Başvuruları iletme

forwardRef, üst bileşenlerin alt bileşendeki DOM düğümüne erişmesini sağlar. Kesin tür tanımlaması için öğe türünü sağlayın.

import React, { forwardRef } from "react"

type TextInputProps = { label: string }

const TextInput = forwardRef<HTMLInputElement, TextInputProps>(function TextInput({ label }, ref) {
  return (
    <label style={{ display: "grid", gap: 4 }}>
      <span>{label}</span>
      <input ref={ref} />
    </label>
  )
})

export default function App() {
  const setRef = (el: HTMLInputElement | null) => { if (el) el.focus() }
  return <TextInput ref={setRef} label="Auto focus" />
}

Olay türleri kontrolü

Hızlı kontrol: Bir düğme tıklama işleyicisi için doğru tür nedir?

Özet

Özet: Özellikleri (alt öğelerle birlikte) tanımlayın, olaylarınızın türlerini kesin şekilde belirleyin ve DOM düğümlerine güvenli erişmek için başvuruları (forwardRef dahil) kullanın.

Sıkça Sorulan Sorular

“Özellikler ve alt öğeler; olay işleyicileri; ref'ler” dersi ücretsiz mi?

Evet — “Özellikler ve alt öğeler; olay işleyicileri; ref'ler” 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 3 dersten oluşur.

“Özellikler ve alt öğeler; olay işleyicileri; ref'ler” dersinde ne öğreneceğim?

Türleri belirlenmiş özellikleri ve alt öğeleri tanımlayın; olay işleyicilerini güvenle bağlayın; DOM düğümlerine erişmek için ref'ler oluşturup kullanın. 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, 3 dersinin 1. dersidir.

“Özellikler ve alt öğeler; olay işleyicileri; ref'ler” 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.

Bu kursun tüm dersleri

  1. Özellikler ve alt öğeler; olay işleyicileri; ref'ler
  2. Durum ve azaltıcılar; Context türlerini belirleme
  3. Bileşen genelleri — giriş
← TypeScript Academy Sayfasına Dön