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

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

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

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

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

Задание

Литеральный тип

Типом может быть не только «любая строка», но и одно конкретное значение. Такой тип называется литеральным:

type

Yes

"yes"

;

Переменной типа Yes можно присвоить только строку "yes", любая другая строка будет ошибкой.

В задании тип размечен слишком широко:


export type Theme = string;

export const current: Theme = "light";

Формально ошибки нет, код компилируется. Но string разрешает что угодно: "dark", "lihgt" с опечаткой, пустую строку. Для темы оформления это плохое описание, потому что множество допустимых значений на самом деле конечно.

Литеральные типы это как раз способ сузить его до перечисления. Здесь нужно самое узкое: ровно одно допустимое значение.

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

Задание

Сузь тип Theme так, чтобы единственным допустимым значением была строка "light". Значение current менять не нужно.