Mapowanie ścieżek i rozwiązywanie modułów
Konfigurowanie aliasów ścieżek za pomocą baseUrl/paths, poznanie sposobu rozwiązywania modułów przez TS oraz unikanie typowych problemów
Mapowanie ścieżek i rozwiązywanie modułów to bezpłatna lekcja TypeScript Academy na CoddyKit. To lekcja 3 z 3. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej TypeScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs TypeScript Academy zawiera 3 lekcji w sumie.
Wprowadzenie
Cel: Zastępować długie importy względne za pomocą aliasów ścieżek oraz rozumieć reguły rozwiązywania modułów języka TypeScript`s, aby zachować przejrzystość importów.
Ścieżki w tsconfig
Ustaw baseUrl (katalog główny projektu dla importów nierelatywnych) i zmapuj aliasy w paths. Klucze mogą używać symboli wieloznacznych *.
// file: tsconfig.json (excerpt)
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"@utils/*": ["utils/*"],
"@components/*": ["components/*"]
}
}
}Korzystanie z aliasu
Importuj za pomocą aliasu dokładnie tak, jak go zadeklarowano (np. @utils/date). TypeScript rozwiązuje go do zmapowanej ścieżki w katalogu src/.
// file: src/app.ts
import { formatDate } from "@utils/date";
import Button from "@components/Button";
console.log(formatDate(new Date()));
const btn = new Button();Strategia rozwiązywania
Rozwiązywanie zależy od wartości module (Node, NodeNext, Bundler). TS sprawdza rozszerzenia plików, pola package.json exports/types, a następnie korzysta z katalogu 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).";Dopasowanie bundlera
Ważne: TS zna aliasy na potrzeby sprawdzania typów, ale bundler/runtime musi również je mapować (np. Vite/Webpack/tsconfig-paths dla 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")
}
}
});Wskazówki i pułapki
Wskazówki:
- Zachowaj stabilną wartość baseUrl (np. src/).
- Odwzoruj aliasy w bundlerze/środowisku uruchomieniowym.
- Unikaj głębokich łańcuchów ../..; preferuj zwięzłe aliasy.
Sprawdzenie aliasów ścieżek
Szybkie sprawdzenie: Które opcje tsconfig włączają aliasy ścieżek, takie jak @utils/*?
Podsumowanie
Podsumowanie: Skonfiguruj baseUrl i paths dla aliasów, poznaj kolejność rozwiązywania TS oraz dopasuj bundler/środowisko uruchomieniowe, aby uniknąć niedziałających importów.
Często zadawane pytania
Czy lekcja „Mapowanie ścieżek i rozwiązywanie modułów” jest bezpłatna?
Tak — pełny tekst „Mapowanie ścieżek i rozwiązywanie modułów” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu TypeScript Academy, przejdź na CoddyKit PRO. Kurs TypeScript Academy zawiera 3 lekcji w sumie.
Co nauczysz się w „Mapowanie ścieżek i rozwiązywanie modułów”?
Konfigurowanie aliasów ścieżek za pomocą baseUrl/paths, poznanie sposobu rozwiązywania modułów przez TS oraz unikanie typowych problemów Ćwiczysz TypeScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć TypeScript Academy?
Nie wymagamy żadnego doświadczenia. TypeScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 3.
Ile czasu zajmuje lekcja „Mapowanie ścieżek i rozwiązywanie modułów”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji TypeScript Academy?
Tak. Każda lekcja TypeScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Moduły ES (named a default) i re-eksporty
- Deklaracje ambient (.d.ts) i typy bibliotek zewnętrznych
- Mapowanie ścieżek i rozwiązywanie modułów