Space of React

TypeScript Дженерики для начинающих

0/23

Упражнение: Нельзя собрать T из воздуха — 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);
}

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

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

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

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

Задание

Нельзя собрать T из воздуха

Внутри дженерик-функции T это конкретный, но неизвестный тип. Ограничение подсказывает, что в нём точно есть, но не говорит, чего в нём больше нет.

В задании функция сбрасывает счётчик:

export function reset<T extends { count: number }>(state: T): T {
  return { count: 0 };
}

export const cleared = reset({ count: 5, label: "клики" });
export const label = cleared.label;

Ошибка длинная: «Type '{ count: number; }' is not assignable to type 'T'. '{ count: number; }' is assignable to the constraint of type 'T', but 'T' could be instantiated with a different subtype of constraint '{ count: number; }'».

Перевод: объект { count: 0 } подходит под ограничение, но T может оказаться шире ограничения. В вызове ниже T это { count: number; label: string }, а функция вернула бы объект без label. Тип при этом обещает, что label есть, и cleared.label в рантайме оказался бы undefined.

Компилятор здесь прав, и сигнатуру трогать не надо: T на выходе нужен, чтобы label был доступен. Неверна реализация. Значение типа T нельзя собрать из литерала, его можно только получить извне, то есть взять из аргумента.

Задание

Перепиши тело reset так, чтобы она возвращала копию переданного состояния с count, равным нулю, а все остальные поля сохраняла. Исходный объект менять нельзя. Сигнатуру и вызов не трогай.