В современном TypeScript существует специальный синтаксис import type. Он указывает компилятору, что импортируемая сущность нужна только для проверки типов и не должна попадать в итоговый JavaScript-код.
Это полезно для оптимизации: такие импорты полностью стираются при сборке (erase-only imports). Это помогает избежать циклических зависимостей, уменьшает размер бандла и ускоряет компиляцию, так как сборщикам не нужно анализировать эти файлы как исполняемый код.
Синтаксис: import type { User } from './User'; или import { type User } from './User';.
- Модуль 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 операторы
- Модуль 22: Mapped Types
- Модуль 23: Conditional Types
- Модуль 24: Discriminated Unions
- Модуль 25: Модули и типы
- Export типов и интерфейсов.
- Import типов.
- import type синтаксис.
- Re-export типов.
- Модуль 26: Declaration Files
- Модуль 27: Типизация асинхронного кода
- Модуль 28: Практические паттерны
1. Добавление type
В этом задании вам нужно исправить строку импорта в TypeScript коде. В текущем фрагменте импортируется интерфейс User, но пропущено ключевое слово 'type', которое необходимо для type-only импорта. Ваша задача — вставить пропущенное ключевое слово в указанное место, чтобы импорт корректно работал и соответствовал синтаксису TypeScript для импорта только типов, обеспечивая оптимальную компиляцию и избегая ненужных включений значений.
// Импортируйте только тип интерфейса User
import input1S { User } from './models';
const user: User = { name: 'Alice' };
console.log(user.name);2. Значения vs Типы
В этом задании вам нужно распределить различные сущности TypeScript по двум категориям в зависимости от их использования: можно ли их применять как значения во время выполнения (runtime) или они служат только как типы на этапе компиляции (compile time). Обратите внимание, что классы и функции могут быть инстанциированы или вызваны, тогда как интерфейсы и псевдонимы типов используются исключительно для аннотаций типов и не имеют представления в скомпилированном JavaScript коде. Перетащите каждый элемент в соответствующую корзину.
class Car { drive() {} }function add(a: number, b: number) { return a + b; }interface Animal { name: string; }type Color = 'red' | 'blue';class Person { constructor(public name: string) {} }function log(message: string) { console.log(message); }interface Config { path: string; }type Result<T> = { data: T; };3. Использование типа как значения
В этом фрагменте TypeScript-кода допущена ошибка, связанная с использованием import type. Класс импортирован только как тип, но в коде предпринимается попытка создать его экземпляр с помощью new. Найдите строку с ошибкой и исправьте её, чтобы код стал рабочим.
import type { User } from './models'; function createUser(name: string, age: number): User { const user = new User(name, age); return user;}4. Выбор вида импорта
В данном фрагменте кода TypeScript необходимо импортировать функцию-утилиту и интерфейс из внешних модулей. Для каждого импорта выберите подходящий синтаксис: обычный `import` или `import type`. Учтите, что функция используется как значение (вызывается в коде), а интерфейс — только как тип для аннотации. Заполните пропуски, выбирая варианты из выпадающих списков.
// Импортируем функцию-утилиту и интерфейс
input1S { formatDate } from './date-utils';
input2S { UserProfile } from './types';
const profile: UserProfile = {
name: 'Alice',
lastLogin: new Date(),
};
console.log(formatDate(profile.lastLogin));5. Безопасный импорт
Из предложенных строк соберите корректный TypeScript код, который импортирует тип Config из модуля './types' с использованием синтаксиса import type и объявляет переменную config этого типа. Игнорируйте лишние строки, которые не соответствуют требованию безопасного импорта типов.
import type { Config } from './types';const config: Config = { port: 3000 };import { Config } from './types';const config = { port: 3000 };import type { Database } from './db';export type { Config };6. Анализ импортов
Разметьте в приведённых строках импорта TypeScript те части, которые явно помечены как type. Выделите ключевое слово `type`, имена типов, которые импортируются как типы, а также имена, которые импортируются не как типы (например, функции или переменные). Используйте доступные типы: 'Ключевое слово type', 'Имя типа', 'Имя не-типа'.
import {{type~|~t1}} { {{User~|~t2}}, {{Account~|~t3}} } from './types';import { {{type~|~t4}} {{Post~|~t5}}, {{createPost~|~t6}} } from './api';import { {{type~|~t7}} default as {{MyType~|~t8}}, {{myFunction~|~t9}} } from './module';import { {{myValue~|~t10}}, {{type~|~t11}} {{MyInterface~|~t12}} } from './lib';