Pemetaan jalur & resolusi modul
Konfigurasikan alias jalur dengan baseUrl/paths, pahami cara TS menemukan modul, dan hindari masalah umum.
Pemetaan jalur & resolusi modul adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar TypeScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus TypeScript Academy mencakup 3 pelajaran total.
Pendahuluan
Tujuan: Ganti impor relatif yang panjang dengan alias jalur dan pahami aturan resolusi modul TypeScript agar impor tetap rapi.
Jalur tsconfig
Tetapkan baseUrl (akar proyek untuk impor non-relatif) dan petakan alias dalam paths. Kunci dapat menggunakan pola glob *.
// file: tsconfig.json (excerpt)
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"@utils/*": ["utils/*"],
"@components/*": ["components/*"]
}
}
}Menggunakan alias
Impor menggunakan alias persis seperti yang dideklarasikan (misalnya, @utils/date). TypeScript menyelesaikannya ke jalur yang dipetakan di src/.
// file: src/app.ts
import { formatDate } from "@utils/date";
import Button from "@components/Button";
console.log(formatDate(new Date()));
const btn = new Button();Strategi resolusi
Resolusi bergantung pada module (Node, NodeNext, Bundler). TS memeriksa ekstensi berkas, package.json exports/types, lalu menggunakan cadangan di 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).";Penyelarasan pembundel
Penting: TS mengenali alias untuk pemeriksaan tipe, tetapi pembundel/waktu jalan Anda juga harus memetakannya (misalnya, Vite/Webpack/tsconfig-paths untuk 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")
}
}
});Kiat & kendala
Kiat:
- Jaga baseUrl tetap stabil (misalnya, src/).
- Selaraskan alias pada pembundel/waktu jalan.
- Hindari rangkaian ../.. yang dalam; utamakan alias yang ringkas.
Pemeriksaan alias jalur
Pemeriksaan singkat: Opsi tsconfig mana yang mengaktifkan alias jalur seperti @utils/*?
Ringkasan
Ringkasan: Konfigurasikan baseUrl dan paths untuk alias, pelajari urutan resolusi TS, dan selaraskan pembundel/waktu jalan untuk menghindari impor yang rusak.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Pemetaan jalur & resolusi modul” gratis?
Ya — teks lengkap “Pemetaan jalur & resolusi modul” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus TypeScript Academy, upgrade ke CoddyKit PRO. Kursus TypeScript Academy mencakup 3 pelajaran total.
Apa yang akan aku pelajari di “Pemetaan jalur & resolusi modul”?
Konfigurasikan alias jalur dengan baseUrl/paths, pahami cara TS menemukan modul, dan hindari masalah umum. Kamu berlatih TypeScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai TypeScript Academy?
Tidak diperlukan pengalaman sebelumnya. TypeScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 3.
Berapa lama pelajaran “Pemetaan jalur & resolusi modul” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran TypeScript Academy ini?
Ya. Setiap pelajaran TypeScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Modul ES (bernama vs bawaan), ekspor ulang
- Deklarasi ambient (.d.ts) & pengetikan pihak ketiga
- Pemetaan jalur & resolusi modul