TypeScript'te Modüller

TypeScript'te Modüller

Bu makale, TypeScript'teki modülleri açıklar.

YouTube Video

TypeScript'te Modüller

TypeScript'teki modüller, kodun tekrar kullanılabilirliğini ve sürdürülebilirliğini artıran önemli bir özelliktir. JavaScript gibi, TypeScript de ECMAScript 2015 (ES6) modül sistemine dayalıdır, ancak önemli bir özellik, TypeScript'in tip sisteminden yararlanma yeteneğidir.

Modüller Nedir?

Modül, ilişkili kodları bir araya toplayıp başka dosyalarda içe aktarılarak yeniden kullanılabilecek bir tek birim haline getiren bir sistemdir. TypeScript'te, kodun kapsüllenmesi için her dosya başına bir kapsam oluşturulur ve bu, kodun diğer dosyaları etkilemesini önler. Bu, kod çakışmalarının önlenmesine yardımcı olur ve bakımı daha kolay hale getirir.

Dahili ve Harici Modüller

  • Dahili Modüller (Namespaces): TypeScript 1.5 ve öncesinde kullanılan bir modül tanım yöntemi, artık önerilmemektedir. Artık bir 'namespace' olarak ele alınmaktadır.
  • Harici Modüller: ES6 modül sistemine dayalı güncel standart. Bu bölüm esas olarak harici modülleri açıklar.

Modüller Nasıl Dışa Aktarılır

Modül oluştururken, dışarıdan erişime izin vermek için dışa aktarma gereklidir. TypeScript'te, değerleri, fonksiyonları, sınıfları vb. export anahtar kelimesini kullanarak dışa aktarabilirsiniz. Başlıca iki tür dışa aktarma vardır.

Adlandırılmış Dışa Aktarmalar

Birden fazla dışa aktarma yapmak için kullanılır ve içe aktarma tarafının belirli olanları seçip kullanmasına olanak tanır.

 1// mathUtils.ts
 2export const pi: number = 3.14159;
 3
 4export function add(x: number, y: number): number {
 5    return x + y;
 6}
 7
 8export function subtract(x: number, y: number): number {
 9    return x - y;
10}

Varsayılan Dışa Aktarmalar

Tüm modülün tek bir varsayılan dışa aktarmaya sahip olmasını istediğinizde kullanılır. Varsayılan dışa aktarmalar bir isim olmadan dışa aktarılır, böylece içe aktarma tarafı herhangi bir isimle alabilir.

 1// calculator.ts
 2export default class Calculator {
 3    add(x: number, y: number): number {
 4        return x + y;
 5    }
 6
 7    subtract(x: number, y: number): number {
 8        return x - y;
 9    }
10}

Modülleri Nasıl İçe Aktarırız

Modülleri kullanmak için, import anahtar kelimesini kullanarak modül içindeki değerleri, işlevleri, sınıfları vb. içe aktarabilirsiniz.

İsimlendirilmiş İçe Aktarmalar

Bir isimlendirilmiş dışa aktarımdan belirli öğeleri içe aktarırken, süslü parantez {} kullanın.

1// main.ts
2import { pi, add, subtract } from './mathUtils';
3
4console.log(`Value of pi: ${pi}`);
5console.log(`Addition: ${add(10, 5)}`);
6console.log(`Subtraction: ${subtract(10, 5)}`);

Varsayılan İçe Aktarmalar

Varsayılan bir dışa aktarmayı içe aktarırken, ona istediğiniz bir isim verebilirsiniz.

1// main.ts
2import Calculator from './calculator';
3
4const calculator = new Calculator();
5console.log(`Addition: ${calculator.add(10, 5)}`);
6console.log(`Subtraction: ${calculator.subtract(10, 5)}`);

İçe Aktarma Takma Adları

İsim çakışmalarını önlemek veya uzun isimleri kısaltmak için bir takma ad kullanarak içe aktarabilirsiniz.

1// main.ts
2import { add as addition, subtract as subtraction } from './mathUtils';
3
4console.log(`Addition: ${addition(10, 5)}`);
5console.log(`Subtraction: ${subtraction(10, 5)}`);

Modüller ve Ad Alanları Arasındaki Fark

Bir ad alanı (namespace), Erken TypeScript'te kodu bir araya getirmek için kullanılan dahili bir modül yapısıdır. Ancak, artık ES6 modülleri önerilmektedir ve ad alanları nadiren gereklidir.

Ad alanları aynı dosya içinde veya birden fazla dosyada tanımlanabilir ve küresel olarak genişletilebildikleri için bağımlılık yönetimi zorlaşabilir. Buna karşılık, modüller her dosya için ayrı kapsamlar sağlar ve bağımlılıkları nettir, bu da onları daha modern ve güvenli bir yöntem yapar.

 1// Example of a namespace
 2namespace Geometry {
 3    export function calculateArea(radius: number): number {
 4        return Math.PI * radius * radius;
 5    }
 6}
 7
 8// Can be used directly without importing the module (not recommended)
 9const area: number = Geometry.calculateArea(5);
10console.log(`Area: ${area}`);

TypeScript Modül Çözümleme

TypeScript'te modül çözümleme için iki strateji vardır.

  • Node Modül Çözümleme: Modülleri node_modules klasöründe arayarak çözen, Node.js ortamlarında kullanılan standart çözümleme yöntemi.
  • Klasik Modül Çözümleme: Daha esnek aramalar gerçekleştiren, ancak günümüzde yaygın olarak kullanılmayan TypeScript'e ait bir çözümleme yöntemi.

Genellikle Node modül çözümleme kullanılır ve yapılandırma dosyasında aksi belirtilmedikçe varsayılan olarak etkinleştirilmiştir.

Pratik Örnek

Son olarak, modüller kullanılarak hesaplama işlevlerinin uygulanması ve yeniden kullanılmasıyla ilgili bir örnek gösterilmektedir.

mathUtils.ts

 1export const pi: number = 3.14159;
 2
 3export function multiply(x: number, y: number): number {
 4    return x * y;
 5}
 6
 7export function divide(x: number, y: number): number {
 8    if (y === 0) {
 9        throw new Error("Cannot divide by zero");
10    }
11    return x / y;
12}

calculator.ts

 1import { multiply, divide } from './mathUtils';
 2
 3export default class Calculator {
 4    multiplyNumbers(x: number, y: number): number {
 5        return multiply(x, y);
 6    }
 7
 8    divideNumbers(x: number, y: number): number {
 9        return divide(x, y);
10    }
11}

main.ts

1import Calculator from './calculator';
2
3const calculator = new Calculator();
4
5const result1: number = calculator.multiplyNumbers(10, 5);
6console.log(`Multiplication: ${result1}`);
7
8const result2: number = calculator.divideNumbers(10, 2);
9console.log(`Division: ${result2}`);

Özet

TypeScript modül sistemi, kodu düzenlemek, yeniden kullanılabilirliği artırmak ve sürdürülebilirliği sağlamak için güçlü bir araçtır. ES6 modüllerine dayalı dış modüllerin kullanılması önerilir ve export ve import anahtar kelimeleri modüllerin kolayca dışa ve içe aktarılmasını sağlar.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video