Утилита ReturnType<T> позволяет автоматически получить тип возвращаемого значения функции. Это мощный инструмент для создания гибких типов, которые подстраиваются под изменения в коде.
Часто используется в связке с оператором typeof. Например, если у вас есть функция createId, вы можете создать тип, который в точности повторяет то, что она возвращает, не переписывая его вручную:
type IdType = ReturnType<typeof createId>;В этом уроке мы разберем синтаксис, частые ошибки и сценарии использования ReturnType для типизации ответов API и фабричных функций.
- Модуль 1: Введение в TypeScript
- Модуль 2: Примитивные типы
- Модуль 3: Специальные типы
- Модуль 4: Массивы
- Модуль 5: Кортежи (Tuples)
- Модуль 6: Объекты
- Модуль 7: Функции
- Модуль 8: Union типы
- Модуль 9: Литеральные типы
- Модуль 10: Type Aliases
- Модуль 11: Интерфейсы
- Модуль 12: Type Guards и Narrowing
- Модуль 13: Enums
- Модуль 14: Классы
- Модуль 15: Generics — основы
- Модуль 16: Generics — ограничения
- Модуль 17: Utility Types — базовые
- Модуль 18: Utility Types — работа с Union
- Модуль 19: Utility Types — функции
- ReturnType.
- Parameters.
- Awaited.
- Модуль 20: Type Assertions
- Модуль 21: Keyof и Typeof операторы
- Модуль 22: Mapped Types
- Модуль 23: Conditional Types
- Модуль 24: Discriminated Unions
- Модуль 25: Модули и типы
- Модуль 26: Declaration Files
- Модуль 27: Типизация асинхронного кода
- Модуль 28: Практические паттерны
1. Основы синтаксиса
В TypeScript утилитные типы позволяют создавать новые типы на основе существующих. В этом задании вам нужно использовать один из таких утилитных типов для извлечения типа возвращаемого значения функции. Дополните объявление типа GreetReturn, заполнив пропуск так, чтобы тип GreetReturn соответствовал типу значения, которое возвращает функция greet. Обратите внимание на синтаксис применения утилитного типа к типу функции.
function greet(): string {
return "Hello";
}
type GreetReturn = input1S<typeof greet>;2. Использование typeof
В этом задании вам нужно дополнить фрагмент кода, использующий утилитный тип ReturnType. В конструкции ReturnType пропущен оператор, который преобразует функцию в её тип. Выберите правильный вариант из выпадающего списка, чтобы код стал корректным. Обратите внимание, что ReturnType ожидает тип функции, а не её значение.
function getUser() {
return { name: 'Alice', age: 30 };
}
// Получаем тип возвращаемого значения функции getUser
type User = ReturnType<input1S getUser>;3. Предсказание типа
Проанализируйте приведённый код на TypeScript. Функция `createData` возвращает объект определённой структуры. Используя утилитный тип `ReturnType`, определите, какому типу будет соответствовать результат вызова этой функции. Выберите верное описание типа из предложенных вариантов.
function createData() {
return {
id: 1001,
title: "Sample Project",
meta: {
createdAt: new Date(),
tags: ["frontend", "typescript"]
},
status: "active" as const,
milestones: [
{ week: 1, goal: "Setup" },
{ week: 2, goal: "Prototype" }
]
};
}
type Data = ReturnType<typeof createData>;4. Передача значения вместо типа
В этом фрагменте кода TypeScript используется утилитный тип ReturnType для получения типа возвращаемого значения функции. Однако в коде допущена ошибка: в качестве аргумента для ReturnType передается сама функция (значение), а не её тип. Исправьте строку с ошибкой, чтобы код стал корректным и компилировался без ошибок.
function getUser() { return { name: 'John', age: 30 };} type User = ReturnType<getUser>; 5. Сопоставление функций и типов
В левой колонке приведены сигнатуры функций на TypeScript. В правой колонке указаны типы, которые возвращает утилитный тип ReturnType при применении к каждой из этих функций. Сопоставьте каждую функцию с соответствующим типом возвращаемого значения. Обратите внимание на типы параметров, возвращаемые значения и асинхронные функции.
function greet(name: string): string { return `Hello, ${name}`; }function logMessage(): void { console.log('Message'); }async function fetchData(): Promise<{ id: number }> { return { id: 1 }; }function getValue<T>(value: T): T { return value; }function throwError(): never { throw new Error('Error'); }stringvoidTPromise<{ id: number }>never6. Создание алиаса
Из предложенных строк соберите корректный TypeScript-код, который создаёт алиас типа MyResult, извлекающий тип возвращаемого значения функции getData. Код должен состоять из одной строки объявления алиаса. Игнорируйте лишние строки, которые не относятся к заданию.
type MyResult = ReturnType<typeof getData>;type MyResult = ReturnType<getData>;type MyResult = ReturnType<() => string>;const result: MyResult = 'test';function getData(): string { return 'data'; }7. Разбор конструкции
Разметьте в строке кода TypeScript, использующей утилитный тип ReturnType, следующие элементы: саму утилиту ReturnType, оператор запроса типа typeof и имя функции. Для каждого выделенного фрагмента выберите соответствующий тип из предложенных вариантов. Это задание поможет закрепить понимание синтаксиса и назначения утилитных типов в TypeScript.
type Result = {{ReturnType~|~t1}}<{{typeof~|~t2}} {{someFunction~|~t3}}>;