Типизация возвращаемого значения

Тренажер по TypeScript для пользователей с начальным уровнем подготовки.

Тренажер по TypeScript

В TypeScript, помимо типизации аргументов, критически важно указывать тип данных, который функция возвращает. Это делается с помощью двоеточия после списка параметров: function name(): type { ... }.

Явная типизация возвращаемого значения помогает избежать ошибок, когда функция случайно возвращает неверные данные или не возвращает ничего (когда ожидается значение). Это также улучшает читаемость кода и работу автодополнения в IDE. Если функция может возвращать несколько типов, можно использовать объединение (Union Types), например : string | null. В этом уроке мы научимся закреплять контракты функций, гарантируя предсказуемое поведение при их использовании в приложении.

Список тем

1. Синтаксис возврата

id: 40652_ret_type_01_replace

В этом задании вам нужно дополнить код функции сложения двух чисел, добавив аннотацию возвращаемого типа. Функция принимает два аргумента типа number и возвращает их сумму. Ваша задача — указать правильный тип возвращаемого значения, используя синтаксис TypeScript. Обратите внимание, что аннотация типа возвращаемого значения ставится после списка параметров и перед телом функции.

Заполните пропуски
function add(a: number, b: number) input1S {
    return a + b;
}
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

2. Выбор типа по логике

id: 40652_ret_type_02_select

В данном задании представлены три функции на TypeScript, каждая из которых возвращает значение определённого типа. В сигнатурах функций пропущены аннотации типов возвращаемых значений. Используя выпадающие списки, выберите для каждой функции подходящий тип возврата, основываясь на логике работы функции и возвращаемом значении. Обратите внимание на различия между примитивными типами string, number и boolean.

Нужно правильно расставить в пропуски предложенные варианты
function getUserName(): input1S {
  return 'Alice';
}

function calculateSum(a: number, b: number): input2S {
  return a + b;
}

function isPositive(value: number): input3S {
  return value > 0;
}
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

3. Несоответствие типов

id: 40652_ret_type_03_error

В этом фрагменте кода TypeScript функция объявлена с типом возвращаемого значения string, но внутри возвращает числовое значение. Это приводит к ошибке типизации. Исправьте код так, чтобы тип возвращаемого значения соответствовал фактически возвращаемому значению, либо измените возвращаемое значение на строку, чтобы код стал корректным.

Найдите ошибку и исправьте
function calculateDiscount(price: number): string {
    const discount = price * 0.1;
    return discount;
}
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

4. Сборка сигнатуры

id: 40652_ret_type_04_build

Из предложенных фрагментов соберите корректную сигнатуру стрелочной функции на TypeScript с именем isEven, которая принимает один параметр n типа number и явно указывает возвращаемый тип boolean. Функция не имеет тела (только сигнатура). Некоторые фрагменты являются лишними и не должны быть использованы. Обратите внимание на правильный порядок ключевых слов и синтаксических элементов.

Перетяните в правильном порядке строки из одного блока в другой
const
isEven
=
(n: number)
: boolean
=>
: number
boolean
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

5. Разбор компонентов

id: 40652_ret_type_05_highlight

В приведённой функции TypeScript выделите основные компоненты, связанные с типизацией возвращаемого значения. Вам нужно отметить: параметры функции (включая их имена и типы), аннотацию возвращаемого типа и тело функции. Это поможет лучше понимать, где и как в TypeScript явно указывается тип возвращаемого значения функции.

Кликните по каждому выделенному фрагменту и выберите для него подходящий тип из списка под текстом.
function {{getFullName~|~t1}}(first: string, last: string){{: string~|~t2}} {
    return first + " " + last;
}{{    return first + " " + last;
~|~t3}}
Аннотация возвращаемого типа
Параметры функции
Тело функции
Сообщения
Проверить
Показать подсказку

6. Проверка результата

id: 40652_ret_type_06_predict

Проанализируйте приведённый фрагмент кода на TypeScript. Обратите внимание на тип возвращаемого значения функции и операцию, выполняемую с этим результатом. Определите, что будет выведено в консоль после выполнения данного кода. Выберите один правильный вариант из предложенных ниже.

Выберите правильный вариант ответа
function getValue(): string {
    return '10';
}

const result = getValue() + 5;
console.log(result);
Сообщения
Проверить
Показать подсказку

TypeScript: компиляция и запуск

id: 40652_compiler

В этом примере вы увидите, как задавать типы возвращаемых значений в TypeScript и как они помогают избежать ошибок. Экспериментируйте: меняйте типы, добавляйте новые функции, пробуйте возвращать строки вместо чисел, чтобы увидеть, как компилятор реагирует. Вы сразу увидите, как типы влияют на безопасность кода и на его читаемость.

TS
Запустить тренажёр (TypeScript)
НайтиКурс.Ру