Space of React

TypeScript для начинающих

0/23

Упражнение: Опциональное поле — TypeScript для начинающих | Max Roslow | Space of React

Counter.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { useState } from 'react';
 
// Счётчик кликов
export function Counter() {
  const [count, setCount] = useState(0);
 
  return (
    <button onClick={() => setCount(count + 1)}>
      Кликов: {count}
    </button>
  );
}
 
// TODO: добавьте сброс счётчика
function reset() {
  setCount(0);
}

требуется вход

Войдите, чтобы решать задание

Онлайн-редактор кода, разбор решения и отметки о прогрессе доступны после входа.

Войти Создать аккаунт — бесплатно

Задание

Опциональное поле

Все поля объектного типа по умолчанию обязательные: если поле объявлено, объект без него не соберётся.

Именно на это компилятор и ругается в задании:

export type User = {
  name: string;
  email: string;
};

export const u1: User = {
  name: "Макс",
  email: "max@gmail.com"
};

export const u2: User = {
  name: "Аня"
};

Ошибка на u2: тип требует email, а его нет. Тип нужно сделать честнее: в реальном приложении почта может быть не указана, и это нормальное состояние, а не ошибка.

Для таких полей в TypeScript есть отдельная запись: поле помечается как необязательное, и тогда его можно не передавать. Важное следствие: тип значения у необязательного поля автоматически расширяется, к нему добавляется undefined, поэтому читать такое поле без проверки нельзя.

Подробнее: Optional Properties — справочник TypeScript.

Задание

Сделай так, чтобы name в типе User остался обязательным, а email стал необязательным: объект u2 без почты должен собираться без ошибок. Сами объекты u1 и u2 менять не нужно.