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 Product = {
  title: string;
};

export const item: Product = {
  title: "Книга",
  price: 500
};

Компилятор ругается на price. Причина не в том, что цена «неправильная», а в том, что тип Product о ней не знает: в нём объявлено единственное поле title. Когда объектный литерал присваивается переменной с известным типом, TypeScript проверяет не только наличие нужных полей, но и отсутствие лишних. Поле price в описании типа не встречается, значит оно лишнее.

Это тот случай, когда ошибка не в значении, а в описании: объект отражает реальность (у товара есть цена), а тип за ней не поспевает.

Задание

Дополни тип Product так, чтобы он описывал оба поля объекта item: название товара строкой и цену числом. Объект item менять не нужно.