0Pricing
TypeScript Academy · Aula

Props e filhos; manipuladores de eventos; refs

Defina props e filhos tipados; conecte manipuladores de eventos com segurança; crie e use refs para acessar nós DOM.

Props e filhos; manipuladores de eventos; refs é uma aula grátis de TypeScript Academy no CoddyKit. Esta é a aula 1 de 3. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de TypeScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de TypeScript Academy inclui 3 aulas no total.

Introdução

Objetivo: crie componentes React tipados: defina as Props (incluindo os filhos), associe manipuladores de eventos com tipos precisos e coloque um campo de entrada em foco usando referências.

  • Interfaces de Props tipadas
  • Tipos de manipuladores de eventos
  • Referências para acesso ao DOM

Props tipadas

Declare uma interface de Props; use Props opcionais e restrinja-as com literais de união. Mantenha os valores padrão dentro do 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>
  )
}

Filhos

Use PropsWithChildren<T> (ou React.PropsWithChildren) para adicionar um espaço tipado para filhos às suas 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>
  )
}

Manipuladores de eventos

Prefira React.MouseEvent<Element> e React.ChangeEvent<HTMLInputElement>. Eles expõem o destino e currentTarget com tipos definidos.

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

Referências: acesso ao DOM

useRef<HTMLInputElement>(null) mantém uma referência que pode ser nula; use o encadeamento opcional para acessar o nó do DOM com segurança.

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

Encaminhamento de referências

forwardRef permite que os componentes pai acessem um nó do DOM filho. Forneça o tipo do elemento para obter uma tipagem 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ção da tipagem de eventos

Verificação rápida: qual é um tipo correto para um manipulador de cliques de um botão?

Recapitulação

Recapitulação: defina as Props (incluindo os filhos), atribua tipos precisos aos eventos e use referências (incluindo forwardRef) para acessar nós do DOM com segurança.

Perguntas Frequentes

A aula “Props e filhos; manipuladores de eventos; refs” é grátis?

Sim — o texto completo de “Props e filhos; manipuladores de eventos; refs” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de TypeScript Academy, atualize para CoddyKit PRO. O curso de TypeScript Academy inclui 3 aulas no total.

O que vou aprender em “Props e filhos; manipuladores de eventos; refs”?

Defina props e filhos tipados; conecte manipuladores de eventos com segurança; crie e use refs para acessar nós DOM. Você pratica TypeScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar TypeScript Academy?

Nenhuma experiência prévia é necessária. TypeScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 3.

Quanto tempo leva a aula “Props e filhos; manipuladores de eventos; refs”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de TypeScript Academy?

Sim. Cada aula de TypeScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Props e filhos; manipuladores de eventos; refs
  2. Estado e redutores; tipagem de Context
  3. Genéricos de componentes — introdução
← Voltar para TypeScript Academy