TypeScript 4.5 - Awaited

В недавно вышедшем TypeScript 4.5 добавили новый служебный тип Awaited. Давайте посмотрим на реальные кейсы его использования и что он нам облегчит.

Что это?

Это новый тип позволяет эмулировать операцию await в async функциях, но с точки зрения типов:

type A = Awaited<Promise<string>>;
// Тип A - string

Более того, мы можем использовать его с несколькими Promise:

type A = Awaited<Promise<Promise<string>>>;
// Тип A - string

Таким образом он позволяет вытащить из Promise возвращаемый тип.

Использование вместе с ReturnType

Служебный тип ReturnType позволяет получить обратно тип возвращаемый функцией. Теперь представим, что у нас есть сторонняя библиотека, которая даёт нам функцию getData(), но не тип IMyData.

import axios from 'axios';

interface IMyData {}

export async function getData(): Promise<IMyData> {
    const { data } = await axios.get<IMyData>('');
    return data;
}

Как нам теперь его получить? С помощью Awaited мы можем сделать следующую запись:

type returnedType = Awaited<ReturnType<typeof getData>>;
// Тип returnedType - IMyData

Таким образом мы можем легко получить из Promise тип, который был передан внутрь.

Улучшенная типизация

Так же иногда встречается кейс, где мы хотим вернуть сложный объект, например массив, где его элемент асинхронная функция, к которой применяется await:

async function getArray<T>(x: T): Promise<Awaited<T>[]> {
    return [await x];
}

В старых версиях мы могли бы видеть следующую типизацию:

async function getArray2<T>(x: T): Promise<T[]> {
    return [await x];
}

Хотя эти записи эквивалентны мы фактически теряли информацию из типов, что с типом T происходил await внутри функции, что в некоторых случаях может быть полезно знать.