0Pricing
TypeScript Academy · Урок

Свойства и дочерние элементы; обработчики событий; ссылки

Определяйте типизированные свойства и дочерние элементы; безопасно подключайте обработчики событий; создавайте и используйте ссылки для доступа к узлам DOM.

«Свойства и дочерние элементы; обработчики событий; ссылки» — бесплатный урок TypeScript Academy на CoddyKit. Это урок 1 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения TypeScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс TypeScript Academy содержит 3 уроков всего.

Введение

Цель: создавать типизированные React-компоненты: определять свойства (с дочерними элементами), прикреплять обработчики событий с точными типами и фокусировать поле ввода с помощью ссылок.

  • Интерфейсы типизированных свойств
  • Типы обработчиков событий
  • Ссылки для доступа к DOM

Типизированные свойства

Объявите интерфейс свойств; используйте необязательные свойства и сужайте тип с помощью литералов объединения. Значения по умолчанию храните внутри компонента.

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

Дочерние элементы

Используйте PropsWithChildren<T> (или React.PropsWithChildren), чтобы добавить в свойства типизированное место для дочерних элементов.

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

Обработчики событий

Предпочитайте React.MouseEvent<Element> и React.ChangeEvent<HTMLInputElement>. Они предоставляют типизированные цель/currentTarget.

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

Ссылки: доступ к DOM

useRef<HTMLInputElement>(null) хранит ссылку, допускающую значение null; используйте оператор опциональной цепочки для безопасного доступа к узлу 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>
  )
}

Перенаправление ссылок

forwardRef позволяет родительским компонентам получить доступ к дочернему узлу DOM. Укажите тип элемента для точной типизации.

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

Проверка типизации событий

Быстрая проверка: какой тип правильно указать для обработчика нажатия кнопки?

Повторение

Повторение: определяйте свойства (с дочерними элементами), точно типизируйте события и используйте ссылки (в том числе forwardRef) для безопасного доступа к узлам DOM.

Часто задаваемые вопросы

Урок «Свойства и дочерние элементы; обработчики событий; ссылки» бесплатный?

Да — полный текст урока «Свойства и дочерние элементы; обработчики событий; ссылки» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс TypeScript Academy, подпишись на CoddyKit PRO. Курс TypeScript Academy содержит 3 уроков всего.

Чему я научусь в уроке «Свойства и дочерние элементы; обработчики событий; ссылки»?

Определяйте типизированные свойства и дочерние элементы; безопасно подключайте обработчики событий; создавайте и используйте ссылки для доступа к узлам DOM. Ты практикуешь TypeScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать TypeScript Academy?

Предыдущий опыт не требуется. TypeScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 3.

Сколько времени занимает урок «Свойства и дочерние элементы; обработчики событий; ссылки»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке TypeScript Academy?

Да. Каждый урок TypeScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Свойства и дочерние элементы; обработчики событий; ссылки
  2. Состояние и редьюсеры; типизация Context
  3. Обобщения компонентов — введение
← Назад к TypeScript Academy