M

MLOG

Türkçe

TypeScript modül çözümlemesine kapsamlı bir kılavuz. Karmaşık projelerde içe aktarma yollarını yönetmek için klasik ve node modül çözümleme stratejilerini, baseUrl'i, yolları ve en iyi uygulamaları kapsar.

TypeScript Modül Çözümlemesi: İçe Aktarma Yolu Stratejilerini Anlamak

TypeScript'in modül çözümleme sistemi, ölçeklenebilir ve sürdürülebilir uygulamalar oluşturmanın kritik bir yönüdür. TypeScript'in içe aktarma yollarına göre modülleri nasıl bulduğunu anlamak, kod tabanınızı düzenlemek ve yaygın tuzaklardan kaçınmak için çok önemlidir. Bu kapsamlı kılavuz, TypeScript modül çözümlemesinin karmaşıklıklarını inceleyecek, klasik ve node modül çözümleme stratejilerini, tsconfig.json içinde baseUrl ve paths'in rolünü ve içe aktarma yollarını etkili bir şekilde yönetmek için en iyi uygulamaları kapsayacaktır.

Modül Çözümlemesi Nedir?

Modül çözümlemesi, TypeScript derleyicisinin, kodunuzdaki içe aktarma ifadesine göre bir modülün konumunu belirleme işlemidir. import { SomeComponent } from './components/SomeComponent'; yazdığınızda, TypeScript'in SomeComponent modülünün dosya sisteminizde nerede bulunduğunu anlaması gerekir. Bu işlem, TypeScript'in modülleri nasıl arayacağını tanımlayan bir dizi kural ve yapılandırma tarafından yönetilir.

Yanlış modül çözümlemesi, derleme hatalarına, çalışma zamanı hatalarına ve projenin yapısını anlamada zorluğa yol açabilir. Bu nedenle, modül çözümlemesi hakkında sağlam bir anlayış, herhangi bir TypeScript geliştiricisi için çok önemlidir.

Modül Çözümleme Stratejileri

TypeScript, tsconfig.json içindeki moduleResolution derleyici seçeneği aracılığıyla yapılandırılan iki temel modül çözümleme stratejisi sağlar:

Klasik Modül Çözümlemesi

classic modül çözümleme stratejisi, ikisi arasında daha basit olanıdır. Modülleri basit bir şekilde arar ve içe aktaran dosyadan başlayarak dizin ağacında yukarı doğru ilerler.

Nasıl çalışır:

  1. İçe aktaran dosyayı içeren dizinden başlayarak.
  2. TypeScript, belirtilen ada ve uzantılara (.ts, .tsx, .d.ts) sahip bir dosya arar.
  3. Bulunamazsa, üst dizine geçer ve aramayı tekrarlar.
  4. Bu işlem, modül bulunana veya dosya sisteminin köküne ulaşılana kadar devam eder.

Örnek:

Aşağıdaki proje yapısını göz önünde bulundurun:


project/
├── src/
│   ├── components/
│   │   ├── SomeComponent.ts
│   │   └── index.ts
│   └── app.ts
├── tsconfig.json

app.ts dosyası import { SomeComponent } from './components/SomeComponent'; içe aktarma ifadesini içeriyorsa, classic modül çözümleme stratejisi şunları yapacaktır:

  1. src dizininde ./components/SomeComponent.ts, ./components/SomeComponent.tsx veya ./components/SomeComponent.d.ts dosyalarını arar.
  2. Bulunamazsa, üst dizine (proje kökü) geçer ve aramayı tekrarlar; bu durumda bileşenin src klasöründe olması nedeniyle başarılı olması pek olası değildir.

Sınırlamalar:

Ne Zaman Kullanılır:

classic modül çözümleme stratejisi genellikle yalnızca çok küçük projeler ve basit bir dizin yapısına sahip olanlar ve harici bağımlılıkları olmayanlar için uygundur. Modern TypeScript projeleri neredeyse her zaman node modül çözümleme stratejisini kullanmalıdır.

Node Modül Çözümlemesi

node modül çözümleme stratejisi, Node.js tarafından kullanılan modül çözümleme algoritmasını taklit eder. Bu, Node.js'yi hedefleyen veya npm paketlerini kullanan projeler için tutarlı ve tahmin edilebilir modül çözümleme davranışı sağladığı için tercih edilen seçimdir.

Nasıl çalışır:

node modül çözümleme stratejisi, node_modules içinde aramaya öncelik veren ve farklı dosya uzantılarını işleyen daha karmaşık bir dizi kural izler:

  1. Göreceli olmayan içe aktarmalar: İçe aktarma yolu ./, ../ veya / ile başlamıyorsa, TypeScript bunun node_modules içinde bulunan bir modüle atıfta bulunduğunu varsayar. Modülü aşağıdaki konumlarda arayacaktır:
    • Geçerli dizindeki node_modules.
    • Üst dizindeki node_modules.
    • ...ve bu böyle devam eder, dosya sisteminin köküne kadar.
  2. Göreceli içe aktarmalar: İçe aktarma yolu ./, ../ veya / ile başlıyorsa, TypeScript bunu göreli bir yol olarak ele alır ve belirtilen konumdaki modülü arar ve şunları dikkate alır:
    • Önce belirtilen ada ve uzantılara (.ts, .tsx, .d.ts) sahip bir dosya arar.
    • Bulunamazsa, belirtilen ada sahip bir dizin ve bu dizinin içinde index.ts, index.tsx veya index.d.ts adlı bir dosya arar (örneğin, içe aktarma ./components ise ./components/index.ts).

Örnek:

lodash kitaplığına bağımlılığı olan aşağıdaki proje yapısını göz önünde bulundurun:


project/
├── src/
│   ├── utils/
│   │   └── helpers.ts
│   └── app.ts
├── node_modules/
│   └── lodash/
│       └── lodash.js
├── tsconfig.json

app.ts dosyası import * as _ from 'lodash'; içe aktarma ifadesini içeriyorsa, node modül çözümleme stratejisi şunları yapacaktır:

  1. lodash'in göreceli olmayan bir içe aktarma olduğunu tanır.
  2. Proje kökü içindeki node_modules dizininde lodash'i arar.
  3. node_modules/lodash/lodash.js içinde lodash modülünü bulur.

helpers.ts dosyası import { SomeHelper } from './SomeHelper'; içe aktarma ifadesini içeriyorsa, node modül çözümleme stratejisi şunları yapacaktır:

  1. ./SomeHelper'ın göreceli bir içe aktarma olduğunu tanır.
  2. src/utils dizininde ./SomeHelper.ts, ./SomeHelper.tsx veya ./SomeHelper.d.ts dosyalarını arar.
  3. Bu dosyalardan hiçbiri yoksa, SomeHelper adlı bir dizin arar ve ardından bu dizinin içinde index.ts, index.tsx veya index.d.ts dosyalarını arar.

Avantajları:

Ne Zaman Kullanılır:

node modül çözümleme stratejisi, özellikle Node.js'yi hedefleyen veya npm paketlerini kullanan çoğu TypeScript projesi için önerilen seçimdir. classic stratejisine kıyasla daha esnek ve sağlam bir modül çözümleme sistemi sağlar.

tsconfig.json içinde Modül Çözümlemesini Yapılandırma

tsconfig.json dosyası, TypeScript projeniz için merkezi yapılandırma dosyasıdır. Modül çözümleme stratejisi de dahil olmak üzere derleyici seçeneklerini belirtmenize ve TypeScript'in kodunuzu nasıl işlediğini özelleştirmenize olanak tanır.

İşte node modül çözümleme stratejisine sahip temel bir tsconfig.json dosyası:


{
  "compilerOptions": {
    "moduleResolution": "node",
    "target": "es5",
    "module": "commonjs",
    "esModuleInterop": true,
    "strict": true,
    "outDir": "dist",
    "sourceMap": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

Modül çözümlemesiyle ilgili temel compilerOptions:

baseUrl ve paths: İçe Aktarma Yollarını Kontrol Etme

baseUrl ve paths derleyici seçenekleri, TypeScript'in içe aktarma yollarını nasıl çözümlediğini kontrol etmek için güçlü mekanizmalar sağlar. Mutlak içe aktarmaları kullanmanıza ve özel yol eşlemeleri oluşturmanıza olanak tanıyarak kodunuzun okunabilirliğini ve sürdürülebilirliğini önemli ölçüde artırabilirler.

baseUrl

baseUrl seçeneği, göreceli olmayan modül adlarını çözümlemek için temel dizini belirtir. baseUrl ayarlandığında, TypeScript, göreceli olmayan içe aktarma yollarını, geçerli çalışma dizini yerine belirtilen temel dizine göre çözer.

Örnek:

Aşağıdaki proje yapısını göz önünde bulundurun:


project/
├── src/
│   ├── components/
│   │   ├── SomeComponent.ts
│   │   └── index.ts
│   └── app.ts
├── tsconfig.json

tsconfig.json aşağıdakileri içeriyorsa:


{
  "compilerOptions": {
    "moduleResolution": "node",
    "baseUrl": "./src"
  }
}

Ardından, app.ts içinde aşağıdaki içe aktarma ifadesini kullanabilirsiniz:


import { SomeComponent } from 'components/SomeComponent';

Bunun yerine:


import { SomeComponent } from './components/SomeComponent';

TypeScript, baseUrl tarafından belirtilen ./src dizinine göre components/SomeComponent'ı çözecektir.

baseUrl kullanmanın faydaları:

paths

paths seçeneği, modüller için özel yol eşlemeleri yapılandırmanıza olanak tanır. TypeScript'in içe aktarma yollarını nasıl çözümlediğini kontrol etmenin daha esnek ve güçlü bir yolunu sağlayarak, modüller için takma adlar oluşturmanıza ve içe aktarmaları farklı konumlara yönlendirmenize olanak tanır.

paths seçeneği, her anahtarın bir yol desenini temsil ettiği ve her değerin yol değiştirmeleri dizisi olduğu bir nesnedir. TypeScript, içe aktarma yolunu yol desenlerine karşı eşleştirmeyi deneyecek ve bir eşleşme bulunursa, içe aktarma yolunu belirtilen değiştirme yollarıyla değiştirecektir.

Örnek:

Aşağıdaki proje yapısını göz önünde bulundurun:


project/
├── src/
│   ├── components/
│   │   ├── SomeComponent.ts
│   │   └── index.ts
│   └── app.ts
├── libs/
│   └── my-library.ts
├── tsconfig.json

tsconfig.json aşağıdakileri içeriyorsa:


{
  "compilerOptions": {
    "moduleResolution": "node",
    "baseUrl": "./src",
    "paths": {
      "@components/*": ["components/*"],
      "@mylib": ["../libs/my-library.ts"]
    }
  }
}

Ardından, app.ts içinde aşağıdaki içe aktarma ifadelerini kullanabilirsiniz:


import { SomeComponent } from '@components/SomeComponent';
import { MyLibraryFunction } from '@mylib';

TypeScript, @components/* yol eşlemesine göre @components/SomeComponent'ı components/SomeComponent olarak ve @mylib yol eşlemesine göre @mylib'i ../libs/my-library.ts olarak çözecektir.

paths kullanmanın faydaları:

paths için Yaygın Kullanım Durumları:

İçe Aktarma Yollarını Yönetmek İçin En İyi Uygulamalar

Ölçeklenebilir ve sürdürülebilir TypeScript uygulamaları oluşturmak için içe aktarma yollarının etkili yönetimi çok önemlidir. İşte izlenecek bazı en iyi uygulamalar:

Modül Çözümleme Sorunlarını Giderme

Modül çözümleme sorunlarının hatalarını ayıklamak sinir bozucu olabilir. İşte bazı yaygın sorunlar ve çözümler:

Farklı Çerçevelerdeki Gerçek Dünya Örnekleri

TypeScript modül çözümlemesinin ilkeleri çeşitli JavaScript çerçevelerinde geçerlidir. İşte bunların yaygın olarak nasıl kullanıldığı:

Sonuç

TypeScript'in modül çözümleme sistemi, kod tabanınızı düzenlemek ve bağımlılıkları etkili bir şekilde yönetmek için güçlü bir araçtır. Farklı modül çözümleme stratejilerini, baseUrl ve paths'in rolünü ve içe aktarma yollarını yönetmek için en iyi uygulamaları anlayarak, ölçeklenebilir, sürdürülebilir ve okunabilir TypeScript uygulamaları oluşturabilirsiniz. tsconfig.json içinde modül çözümlemesini doğru yapılandırmak, geliştirme iş akışınızı önemli ölçüde iyileştirebilir ve hata riskini azaltabilir. Farklı yapılandırmalarla denemeler yapın ve projenizin ihtiyaçlarına en uygun yaklaşımı bulun.