Сопоставление путей и разрешение модулей
Настраивайте псевдонимы путей с помощью baseUrl/paths, разбирайтесь, как TS разрешает модули, и избегайте распространённых ошибок.
«Сопоставление путей и разрешение модулей» — бесплатный урок TypeScript Academy на CoddyKit. Это урок 3 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения TypeScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс TypeScript Academy содержит 3 уроков всего.
Введение
Цель: заменить длинные относительные импорты псевдонимами путей и понять правила разрешения модулей TypeScript`s, чтобы импорты оставались аккуратными.
Пути в tsconfig
Задайте baseUrl (корень проекта для импортов без относительных путей) и сопоставьте псевдонимы в paths. В ключах можно использовать шаблоны *.
// file: tsconfig.json (excerpt)
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"@utils/*": ["utils/*"],
"@components/*": ["components/*"]
}
}
}Использование псевдонима
Импортируйте, используя псевдоним точно в том виде, в котором он объявлен (например, @utils/date). TypeScript разрешает его в сопоставленный путь в src/.
// file: src/app.ts
import { formatDate } from "@utils/date";
import Button from "@components/Button";
console.log(formatDate(new Date()));
const btn = new Button();Стратегия разрешения
Разрешение зависит от значения module (Node, NodeNext, Bundler). TS проверяет расширения файлов и поля exports/types в package.json, а затем использует запасной вариант с node_modules.
// Resolution order sketch (NodeNext/Node):
// 1) Exact file: .ts/.tsx/.d.ts/.js
// 2) Index files: index.ts / index.js
// 3) package.json exports / types
// 4) paths & baseUrl fallbacks
// 5) node_modules lookup (upwards)
export const note = "Resolution depends on module setting (Node, NodeNext, Bundler).";Согласование со сборщиком
Важно: TS учитывает псевдонимы при проверке типов, но ваш сборщик/среда выполнения также должен сопоставлять их (например, Vite/Webpack/tsconfig-paths для ts-node).
// Example: vite.config.ts (alias for runtime)
import { defineConfig } from "vite";
import path from "path";
export default defineConfig({
resolve: {
alias: {
"@utils": path.resolve(__dirname, "src/utils"),
"@components": path.resolve(__dirname, "src/components")
}
}
});Советы и подводные камни
Советы:
- Поддерживайте baseUrl неизменным (например, src/).
- Дублируйте псевдонимы в сборщике и среде выполнения.
- Избегайте длинных цепочек ../..; предпочитайте краткие псевдонимы.
Проверка псевдонимов путей
Быстрая проверка: какие параметры tsconfig включают псевдонимы путей, например @utils/*?
Итоги
Итоги: настройте baseUrl и paths для псевдонимов, изучите порядок разрешения TS и согласуйте сборщик со средой выполнения, чтобы избежать неработающих импортов.
Изучай TypeScript с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 101
- Уроки
- 352
Часто задаваемые вопросы
Урок «Сопоставление путей и разрешение модулей» бесплатный?
Да — полный текст урока «Сопоставление путей и разрешение модулей» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс TypeScript Academy, подпишись на CoddyKit PRO. Курс TypeScript Academy содержит 3 уроков всего.
Чему я научусь в уроке «Сопоставление путей и разрешение модулей»?
Настраивайте псевдонимы путей с помощью baseUrl/paths, разбирайтесь, как TS разрешает модули, и избегайте распространённых ошибок. Ты практикуешь TypeScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать TypeScript Academy?
Предыдущий опыт не требуется. TypeScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 3.
Сколько времени занимает урок «Сопоставление путей и разрешение модулей»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке TypeScript Academy?
Да. Каждый урок TypeScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Модули ES (именованные и экспорт по умолчанию), повторный экспорт
- Окружающие объявления (.d.ts) и типы сторонних библиотек
- Сопоставление путей и разрешение модулей