0Pricing
TypeScript Academy · Lezione

Props e children; gestori degli eventi; refs

Definisca props e children tipizzati; colleghi i gestori degli eventi in sicurezza; crei e utilizzi refs per accedere ai nodi DOM.

Props e children; gestori degli eventi; refs è una lezione TypeScript Academy gratuita su CoddyKit. Questa è la lezione 1 di 3. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento TypeScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso TypeScript Academy include 3 lezioni in totale.

Introduzione

Obiettivo: creare componenti React tipizzati, definire le props (incluso children), associare gestori degli eventi con tipi precisi e portare un input al focus usando le ref.

  • Interfacce per props tipizzate
  • Tipi dei gestori degli eventi
  • Ref per l'accesso al DOM

Props tipizzate

Dichiari un'interfaccia delle props; utilizzi props opzionali e le restringa con valori letterali di un'unione. Mantenga i valori predefiniti all'interno del componente.

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

Children

Utilizzi PropsWithChildren<T> (oppure React.PropsWithChildren) per aggiungere uno slot children tipizzato alle props.

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

Gestori degli eventi

Preferisca React.MouseEvent<Element> e React.ChangeEvent<HTMLInputElement>. Espongono target/currentTarget tipizzati.

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

Ref: accesso al DOM

useRef<HTMLInputElement>(null) mantiene una ref nullable; utilizzi l'optional chaining per accedere in sicurezza al nodo DOM.

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

Inoltro delle ref

forwardRef consente ai componenti padre di accedere a un nodo DOM figlio. Specifichi il tipo dell'elemento per una tipizzazione precisa.

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" />
}

Verifica della tipizzazione degli eventi

Verifica rapida: qual è un tipo corretto per un gestore del clic di un pulsante?

Riepilogo

Riepilogo: definisca le props (incluso children), tipizzi gli eventi con precisione e utilizzi le ref (incluso forwardRef) per accedere in sicurezza ai nodi DOM.

Domande Frequenti

La lezione «Props e children; gestori degli eventi; refs» è gratuita?

Sì — il testo completo di «Props e children; gestori degli eventi; refs» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso TypeScript Academy, passa a CoddyKit PRO. Il corso TypeScript Academy include 3 lezioni in totale.

Cosa imparerò in «Props e children; gestori degli eventi; refs»?

Definisca props e children tipizzati; colleghi i gestori degli eventi in sicurezza; crei e utilizzi refs per accedere ai nodi DOM. Eserciti TypeScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare TypeScript Academy?

Non è richiesta alcuna esperienza precedente. TypeScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 3.

Quanto tempo richiede la lezione «Props e children; gestori degli eventi; refs»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione TypeScript Academy?

Sì. Ogni lezione TypeScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Props e children; gestori degli eventi; refs
  2. Stato e reducer; tipizzazione del Context
  3. Generics dei componenti — introduzione
← Torna a TypeScript Academy