LETUNOFF DOCS

TS. Typeof

🧱 Суть

typeof в TypeScript позволяет получить тип уже существующей переменной или объекта, чтобы не описывать этот тип вручную.

Он берёт структуру значения и превращает её в тип.

📦 Проблема

Часто бывает ситуация:

const user = {
	  name: 'Евгений',
	  age: 30,
};

Чтобы создать такой же тип вручную, пришлось бы писать:

type User = {
	name: string;
	age: number;
};

Проблема:

  • появляется дублирование
  • при изменении объекта нужно менять тип вручную

✅ Решение

Использовать typeof:

const user = {
	name: 'Евгений',
	age: 30,
};
 
type User = typeof user;

Теперь TypeScript сам создаёт тип:

{
	name: string;
	age: number;
}

💻 Код

Переиспользование типа объекта

const config = {
	theme: 'dark',
	lang: 'ru',
};
 
function setup(options: typeof config) {
	// options имеет тип config
}

Теперь если изменить:

const config = {
	theme: 'dark',
	lang: 'ru',
	version: 1,
};

тип функции тоже обновится автоматически.

Получение ключей объекта через keyof

Есть объект:

const status = {
	success: '🟢',
	error: '🔴',
	pending: '🟡',
};

Получаем его ключи:

type StatusKey = keyof typeof status;

Результат:

'success' | 'error' | 'pending'

Создание типа из массива

Например:

const roles = ['admin', 'user', 'guest'] as const;

Получаем тип:

type Role = typeof roles[number];

Результат:

'admin' | 'user' | 'guest'

Получение типов аргументов функции

Например:

function showUser(user: {
	name: string;
	age: number;
}) {}

Можно получить тип аргумента:

type User = Parameters<typeof showUser>[0];

Теперь:

User

это:

{
	name: string;
	age: number;
}

Что typeof НЕ делает

typeof в TypeScript отличается от JavaScript.

В JavaScript:

typeof 5

вернёт:

"number"

Это проверка значения во время выполнения.

В TypeScript:

type User = typeof user;

это работа только с типами.

Он:

  • ❌ не получает значение
  • ❌ не выполняется в браузере
  • ✅ работает только во время проверки TypeScript

Простая аналогия

Представь готовую таблицу:

User
name | age
------------
Bob  | 25

typeof user говорит: “Возьми структуру этой таблицы и сделай из неё шаблон”

Главное отличие

typeof

type User = typeof user;

Получает всю структуру объекта:

{
	name: string;
	age: number;
}

keyof typeof

type UserKeys = keyof typeof user;

Получает только ключи:

'name' | 'age'

Пример

Объект:

const fruits = {
	apple: {
		color: 'red',
	},
	banana: {
		color: 'yellow',
	},
	grape: {
		color: 'purple',
	},
};

typeof fruits

type FruitsType = typeof fruits;

Результат:

{
	apple: {
		color: string;
	};
	banana: {
		color: string;
	};
	grape: {
		color: string;
	};
}

Получаем всю структуру объекта.

keyof typeof fruits

type FruitName = keyof typeof fruits;

Результат:

'apple' | 'banana' | 'grape'

Получаем только названия ключей.

🎯 Вывод

  • typeof obj → берёт тип всей структуры объекта
  • keyof typeof obj → берёт только ключи объекта
  • typeof помогает не дублировать типы вручную
  • особенно полезен для:
    • конфигураций
    • объектов variants
    • словарей
    • констант
    • типизации API-ответов

🔗 Связано

Обратные ссылки