Space of React

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

0/23

Упражнение: Union из литералов — 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);
}

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

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

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

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

Задание

Union из литералов

Один литеральный тип разрешает ровно одно значение. Но у темы оформления вариантов обычно несколько, и перечислить их можно через вертикальную черту. Такой тип называется объединением (union) и означает «одно из перечисленного»:

type Direction = "up" | "down";

Переменной такого типа можно присвоить любое значение из списка, но только из него.

В задании тип пока описан слишком узко:


export type Theme = "light";

let current: Theme = "light";

current = "light";

Светлая тема есть, а тёмной нет, хотя приложение умеет обе. Из-за этого последняя строка не делает ничего полезного: переменной, в которой уже лежит "light", снова присваивается "light", потому что другого значения тип просто не допускает.

Обрати внимание, что current объявлена через let, то есть переприсваивание разрешено. Дело не в переменной, а в том, насколько узко описан тип.

Про объединения: Union Types — справочник TypeScript.

Задание

Расширь тип Theme до объединения двух литералов: "light" и "dark". Название второго значения важно, проверка ждёт именно "dark".
Измени последнюю строку так, чтобы в current попадало это второе значение.

Объявление переменной current менять не нужно.

Заодно проверь себя: попробуй присвоить current строку "blue" и посмотри на текст ошибки, после чего убери эту строку.