TypeScript Academy · Урок

Типизация свойств компонентов React

Определяйте интерфейсы свойств и выбирайте между FC и явными типами возвращаемых значений

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

Добро пожаловать

В этом уроке рассматривается типизация свойств компонентов React с помощью TypeScript.

Интерфейс свойств компонента

Определите интерфейс свойств для компонентов React, чтобы документировать API компонента и обеспечить его соблюдение.

interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;
}

function Button({ label, onClick, disabled }: ButtonProps) {
  return <button onClick={onClick} disabled={disabled}>{label}</button>;
}

FC и явный тип возвращаемого значения

React.FC автоматически добавляет дочерние элементы и другие типы. Явно заданный тип возвращаемого значения (JSX.Element | null) часто понятнее.

const Card: React.FC<{title: string}> = ({ title }) => <div>{title}</div>;

// Or explicit:
function Card2({ title }: { title: string }): JSX.Element {
  return <div>{title}</div>;
}

Типизация useState

useState выводит тип из начального значения. Укажите параметр типа, если начальное значение равно null или неоднозначно.

const [count, setCount] = useState(0);           // number
const [name, setName] = useState('');            // string
const [user, setUser] = useState<User | null>(null); // explicit

Типизация useReducer

useReducer лучше всего работает с типом действия на основе размеченного объединения.

type Action = { type: 'increment' } | { type: 'decrement' } | { type: 'reset'; value: number };
function reducer(state: number, action: Action): number {
  switch (action.type) {
    case 'increment': return state + 1;
    case 'decrement': return state - 1;
    case 'reset': return action.value;
  }
}

Типизация useRef для DOM

Для useRef с элементами DOM требуется аргумент типа. Инициализируйте его значением null, поскольку элемента ещё не существует.

const inputRef = useRef<HTMLInputElement>(null);

// Use:
if (inputRef.current) {
  inputRef.current.focus();
}

Типизация обработчиков событий

Типы событий React включают React.ChangeEvent, React.MouseEvent и React.FormEvent.

function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
  console.log(e.target.value);
}
function handleClick(e: React.MouseEvent<HTMLButtonElement>) {
  e.preventDefault();
}

Обобщённые компоненты

Обобщённые компоненты принимают параметр типа для создания гибких и типобезопасных списков и элементов выбора.

function List<T extends { id: number }>({ items }: { items: T[] }) {
  return <ul>{items.map(i => <li key={i.id}>{JSON.stringify(i)}</li>)}</ul>;
}

forwardRef с TypeScript

forwardRef требует параметров типа и для типа элемента ссылки, и для свойств.

const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ label, ...props }, ref) => (
    <label>{label}<input {...props} ref={ref} /></label>
  )
);

Типы возвращаемых значений пользовательских хуков

Явно задавайте тип возвращаемых значений пользовательских хуков, чтобы избежать вывода any[] для возвращаемых кортежей.

function useToggle(init: boolean): [boolean, () => void] {
  const [state, setState] = useState(init);
  return [state, () => setState(s => !s)];
}

Контекст с TypeScript

Задайте тип контекста React с помощью объединения, включающего undefined, чтобы потребители были вынуждены проверять наличие контекста.

const AuthContext = React.createContext<User | undefined>(undefined);
function useAuth(): User {
  const ctx = useContext(AuthContext);
  if (!ctx) throw new Error('useAuth must be used within AuthProvider');
  return ctx;
}

Быстрая проверка

Какой тип является правильным для ссылки на элемент ввода HTML?

Итоги

Задавайте типы свойств React с помощью интерфейсов, useState — с помощью параметров типа, событий — с помощью типов событий React, ссылок — с помощью обобщённых типов элементов DOM, а forwardRef — с помощью двух параметров типа. Обобщённые компоненты позволяют создавать повторно используемый типобезопасный пользовательский интерфейс.

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

Урок «Типизация свойств компонентов React» бесплатный?

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

Чему я научусь в уроке «Типизация свойств компонентов React»?

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

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

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

Сколько времени занимает урок «Типизация свойств компонентов React»?

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

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

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

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

← Назад к TypeScript Academy