Оператор typeof в JavaScript возвращает строку с типом значения во время выполнения. Однако в TypeScript у него есть вторая, более мощная роль: использование в контексте типов.
Конструкция type X = typeof Y позволяет автоматически извлечь тип из существующей переменной, объекта или функции. Это избавляет от дублирования кода: если вы меняете структуру исходного объекта, тип обновляется автоматически. Это основа принципа DRY в типизации.
- Используется для создания типов конфигураций.
- Помогает типизировать пропсы на основе значений по умолчанию.
- Работает на этапе компиляции, не попадая в итоговый JS-код в таком виде.
В этом уроке мы научимся захватывать типы значений и использовать их для типизации других переменных.
- Модуль 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 — функции
- Модуль 20: Type Assertions
- Модуль 21: Keyof и Typeof операторы
- Оператор keyof.
- Оператор typeof в типах.
- Комбинация keyof typeof.
- Indexed Access Types.
- Модуль 22: Mapped Types
- Модуль 23: Conditional Types
- Модуль 24: Discriminated Unions
- Модуль 25: Модули и типы
- Модуль 26: Declaration Files
- Модуль 27: Типизация асинхронного кода
- Модуль 28: Практические паттерны
1. Захват типа переменной
В этом задании вам нужно создать новый тип Config на основе существующего объекта settings. Используйте оператор typeof для захвата типа переменной settings. Заполните пропуск в коде так, чтобы тип Config корректно соответствовал структуре объекта. Это упражнение поможет понять, как оператор typeof применяется в контексте типов TypeScript для создания типов на основе значений.
const settings = {
theme: 'dark',
fontSize: 14,
language: 'en'
};
type Config = input1S;2. Применение типа к новой переменной
В этом задании вам предстоит применить оператор typeof для получения типа существующей переменной и использования его при объявлении новой переменной. В коде TypeScript ниже объявлена переменная product. Вам нужно объявить вторую переменную newProduct, которая должна иметь тот же тип, что и product. Для этого заполните пропуск в аннотации типа, выбрав правильный вариант из выпадающего списка. Обратите внимание, что оператор typeof возвращает тип значения переменной во время компиляции и может использоваться в аннотациях типов.
let product = { title: "Book", price: 20 };
let newProduct: input1S = { title: "Pen", price: 5 };3. Пространство значений и типов
В данном фрагменте кода TypeScript оператор `typeof` используется в двух разных контекстах: как оператор JavaScript во время выполнения и как оператор TypeScript для работы с типами. Разметьте каждый выделенный фрагмент, указав, используется ли `typeof` в контексте JavaScript (в условных конструкциях) или в контексте TypeScript (после двоеточия в аннотациях типов). Обратите внимание на синтаксис и расположение оператора в коде.
function processValue(input: unknown) {
if ({{typeof~|~t1}} input === 'string') {
console.log(input.length);
}
}
const data = { x: 10, y: 'text' };
type DataType = {{typeof~|~t2}} data;
const value: {{typeof~|~t3}} data.x = 5;4. Ошибка в использовании typeof
В этом фрагменте TypeScript-кода допущена ошибка в использовании оператора typeof. Код пытается создать тип на основе существующей переменной, но используется неверный синтаксис. Исправьте строку с ошибкой, чтобы корректно определить тип переменной.
const person = { name: 'Alice', age: 30 };type PersonType = typeof person;const newPerson: PersonType = { name: 'Bob', age: 25 };console.log(newPerson);5. Типизация функции через typeof
Из предложенных строк соберите корректную TypeScript-программу, которая создаёт тип функции на основе существующей функции `add` (складывающей два числа) с помощью оператора `typeof`, затем объявляет переменную этого типа и вызывает её. Игнорируйте лишние строки, которые содержат ошибки типов или не соответствуют заданию.
function add(x: number, y: number): number { return x + y;}type AddFunction = typeof add;const myAdd: AddFunction = add;console.log(myAdd(2, 3));const myAdd: AddFunction = (x: string, y: string) => x + y;console.log(add(2));6. Совместимость типов
Проанализируйте приведённый фрагмент кода на TypeScript. В нём определены два объекта (objA и objB) и тип TypeFromA, полученный с помощью оператора typeof от objA. Затем объект objB присваивается переменной objC, тип которой указан как TypeFromA. Определите, будет ли такое присваивание успешным (совместимы ли типы) или приведёт к ошибке компиляции. Выберите правильный вариант ответа.
const objA = {
name: "Alice",
age: 30
};
const objB = {
name: "Bob"
};
type TypeFromA = typeof objA;
const objC: TypeFromA = objB; // Что произойдёт здесь?