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

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

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

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

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

Задание

Тип возврата

Тип возвращаемого значения указывается после списка параметров, через двоеточие:

function

double

(

number

)

number

{

return

;

}

В задании объявленный тип и фактический не совпадают:


export function getAge(): string {
  return 25;
}

export const age = getAge();

Компилятор ругается на return: сигнатура обещает строку, а возвращается число. Ошибка возникает внутри функции, и это как раз главная польза явной аннотации: несоответствие ловится там, где написан код, а не там, где результат потом используется.

Обрати внимание и на второе следствие. Пока функция объявлена как возвращающая string, константа age тоже считается строкой, хотя в рантайме там окажется число. Дальше по коду можно спокойно написать age.toUpperCase(), компилятор не возразит, а приложение упадёт.

Про аннотацию результата: Return Type Annotations — справочник TypeScript.

Задание

Приведи сигнатуру getAge в соответствие с тем, что функция реально возвращает. Тело функции менять не нужно: значение 25 должно остаться.