Yol eşleme ve modül çözümleme
baseUrl/paths ile yol takma adlarını yapılandırın, TS'nin modülleri nasıl çözdüğünü anlayın ve yaygın sorunlardan kaçının.
Yol eşleme ve modül çözümleme, CoddyKit'te ücretsiz bir TypeScript Academy dersidir. Bu, 3 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, TypeScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. TypeScript Academy kursu toplamda 3 dersten oluşur.
Giriş
Amaç: Uzun göreli içe aktarmaları yol takma adlarıyla değiştirmek ve içe aktarmaları temiz tutmak için TypeScript`in modül çözümleme kurallarını anlamak.
tsconfig yolları
Göreli olmayan içe aktarmalar için baseUrl'i (proje kökünü) ayarlayın ve takma adları paths içinde eşleyin. Anahtarlarda * joker karakterleri kullanılabilir.
// file: tsconfig.json (excerpt)
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"@utils/*": ["utils/*"],
"@components/*": ["components/*"]
}
}
}Takma adı kullanma
İçe aktarmayı, takma adı tanımlandığı biçimde kullanarak yapın (ör. @utils/date). TypeScript, eşlenen yolu src/ altında çözümler.
// file: src/app.ts
import { formatDate } from "@utils/date";
import Button from "@components/Button";
console.log(formatDate(new Date()));
const btn = new Button();Çözümleme stratejisi
Çözümleme, module ayarına (Node, NodeNext, Bundler) bağlıdır. TS; dosya uzantılarını, package.json içindeki exports/types alanlarını denetler, ardından node_modules içine geri döner.
// 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).";Paketleyiciyle uyum
Önemli: TS, tür denetimi için takma adları bilir; ancak paketleyiciniz/çalışma zamanınız da bunları eşlemelidir (ör. ts-node için Vite/Webpack/tsconfig-paths).
// 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")
}
}
});İpuçları ve tuzaklar
İpuçları:
- baseUrl'i sabit tutun (ör. src/).
- Takma adları paketleyicide/çalışma zamanında da kullanın.
- Derin ../.. zincirlerinden kaçının; kısa takma adları tercih edin.
Yol takma adı denetimi
Hızlı denetim: @utils/* gibi yol takma adlarını hangi tsconfig seçenekleri etkinleştirir?
Özet
Özet: Takma adlar için baseUrl ve paths ayarlarını yapılandırın, TS çözümleme sırasını öğrenin ve bozuk içe aktarmaları önlemek için paketleyiciyi/çalışma zamanını bunlarla uyumlu hâle getirin.
Sıkça Sorulan Sorular
“Yol eşleme ve modül çözümleme” dersi ücretsiz mi?
Evet — “Yol eşleme ve modül çözümleme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve TypeScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. TypeScript Academy kursu toplamda 3 dersten oluşur.
“Yol eşleme ve modül çözümleme” dersinde ne öğreneceğim?
baseUrl/paths ile yol takma adlarını yapılandırın, TS'nin modülleri nasıl çözdüğünü anlayın ve yaygın sorunlardan kaçının. TypeScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
TypeScript Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te TypeScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 3 dersinin 3. dersidir.
“Yol eşleme ve modül çözümleme” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu TypeScript Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her TypeScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- ES Modülleri (adlandırılmış ve varsayılan), yeniden dışa aktarmalar
- Ortam bildirimleri (.d.ts) ve üçüncü taraf tür tanımları
- Yol eşleme ve modül çözümleme