Space of React

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

0/23

Упражнение: Extends в interface — 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);
}

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

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

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

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

Задание

extends в interface

interface описывает форму объекта так же, как объектный type, но умеет наследоваться: интерфейс может расширить другой и добавить к его полям свои.

В задании два интерфейса объявлены независимо друг от друга:

export interface User {
  name: string;
}

export interface Admin {
  role: string;
}

export const a: Admin = {
  name: "Макс",
  role: "lead"
};

Компилятор ругается на name: в Admin объявлено только поле role, поэтому имя оказывается лишним свойством. По смыслу же администратор это пользователь с дополнительной ролью, и связь между двумя интерфейсами нужно выразить в самом коде, а не дублировать поле name руками.

Наследование как раз про это: производный интерфейс получает все поля родителя и объявляет только то, что добавляет от себя. Расширять можно и несколько интерфейсов сразу, перечислив их через запятую.

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

Задание

Свяжи интерфейсы так, чтобы Admin включал поле name из User и добавлял своё поле role. Само поле name в Admin дублировать не нужно, объект a менять тоже.