Modern yaz\u0131l\u0131m geli\u015ftirme, giderek artan karma\u015f\u0131kl\u0131kta uygulamalar \u00fcretmeyi gerektiriyor. Bu karma\u015f\u0131kl\u0131\u011f\u0131 y\u00f6netmek, kodun okunabilirli\u011fini, bak\u0131m\u0131n\u0131 ve yeniden kullan\u0131labilirli\u011fini sa\u011flamak i\u00e7in belirli prensiplere ve ara\u00e7lara ihtiya\u00e7 duyar\u0131z. \u0130\u015fte tam da bu noktada mod\u00fcller devreye girer. TypeScript, JavaScript’in bir \u00fcst k\u00fcmesi olarak, mod\u00fcl sistemlerini daha g\u00fc\u00e7l\u00fc ve tip g\u00fcvenli bir \u015fekilde kullanmam\u0131z\u0131 sa\u011flar.<\/p>\n
Mod\u00fcller, kodunuzu mant\u0131ksal olarak ayr\u0131lm\u0131\u015f, ba\u011f\u0131ms\u0131z birimlere b\u00f6lmenizi sa\u011flayan mekanizmalard\u0131r. Her mod\u00fcl, kendi i\u00e7inde belirli bir i\u015flevselli\u011fi bar\u0131nd\u0131r\u0131r ve bu i\u015flevselli\u011fi di\u011fer mod\u00fcllerle payla\u015fabilir veya di\u011fer mod\u00fcllerden alabilir. Bu yakla\u015f\u0131m, yaz\u0131l\u0131m geli\u015ftirmenin temel ta\u015flar\u0131ndan biri olan “b\u00f6l ve y\u00f6net” prensibini destekler.<\/p>\n
Peki, mod\u00fcllere neden ihtiya\u00e7 duyar\u0131z?<\/p>\n
* K\u00fcreselden Ka\u00e7\u0131nma (Avoiding Global Scope Pollution):<\/strong> Mod\u00fcllerden \u00f6nceki d\u00f6nemlerde, JavaScript dosyalar\u0131 genellikle k\u00fcresel kapsamda de\u011fi\u015fkenler ve fonksiyonlar tan\u0131mlard\u0131. Bu durum, farkl\u0131 dosyalar veya k\u00fct\u00fcphaneler aras\u0131nda isim \u00e7ak\u0131\u015fmalar\u0131na (name collision) yol a\u00e7ar ve uygulaman\u0131n beklenmedik \u015fekillerde davranmas\u0131na neden olabilirdi. Mod\u00fcller, her dosyan\u0131n kendi \u00f6zel kapsam\u0131na sahip olmas\u0131n\u0131 sa\u011flayarak bu sorunu ortadan kald\u0131r\u0131r. Bir mod\u00fcl i\u00e7inde tan\u0131mlanan her \u015fey, a\u00e7\u0131k\u00e7a d\u0131\u015far\u0131 aktar\u0131lmad\u0131\u011f\u0131 s\u00fcrece o mod\u00fcle \u00f6zel kal\u0131r. TypeScript, JavaScript’in mod\u00fcl sistemlerini tam olarak destekler ve hatta tip g\u00fcvenli\u011fi ile bu sistemleri daha da geli\u015ftirir. Bu makalede, TypeScript’te mod\u00fcllerin nas\u0131l tan\u0131mland\u0131\u011f\u0131n\u0131, i\u00e7e ve d\u0131\u015fa aktar\u0131ld\u0131\u011f\u0131n\u0131, farkl\u0131 mod\u00fcl sistemlerinin ne anlama geldi\u011fini ve TypeScript’te mod\u00fcl kullanman\u0131n \u00f6z\u00fc, Adland\u0131r\u0131lm\u0131\u015f exportlar, bir mod\u00fclden birden fazla \u00f6\u011feyi d\u0131\u015far\u0131 aktarmak istedi\u011finizde kullan\u0131l\u0131r. Her \u00f6\u011fe, kendi orijinal ad\u0131yla d\u0131\u015far\u0131 aktar\u0131l\u0131r ve i\u00e7e aktar\u0131l\u0131r.<\/p>\n Bir mod\u00fcl\u00fcn genellikle “ana” i\u015flevini temsil eden tek bir \u00f6\u011feyi d\u0131\u015far\u0131 aktarmak istedi\u011finizde varsay\u0131lan export kullan\u0131l\u0131r. Bir mod\u00fcl ba\u015f\u0131na yaln\u0131zca bir varsay\u0131lan export olabilir. \u0130\u00e7e aktar\u0131l\u0131rken, bu \u00f6\u011feye herhangi bir isim verebilirsiniz.<\/p>\n Adland\u0131r\u0131lm\u0131\u015f exportlar\u0131 i\u00e7e aktar\u0131rken, s\u00fcsl\u00fc parantezler Varsay\u0131lan exportlar\u0131 i\u00e7e aktar\u0131rken, s\u00fcsl\u00fc parantez kullanmadan, do\u011frudan i\u00e7e aktarmak istedi\u011finiz \u00f6\u011feye bir isim verirsiniz.<\/p>\n Varsay\u0131lan ve adland\u0131r\u0131lm\u0131\u015f exportlar\u0131 ayn\u0131 anda i\u00e7e aktarabilirsiniz:<\/p>\n Bir mod\u00fcl\u00fcn t\u00fcm adland\u0131r\u0131lm\u0131\u015f exportlar\u0131n\u0131 tek bir nesne alt\u0131nda i\u00e7e aktarmak isterseniz, Bazen bir mod\u00fcl\u00fcn d\u0131\u015fa aktard\u0131\u011f\u0131 \u00f6\u011feleri ba\u015fka bir mod\u00fcl arac\u0131l\u0131\u011f\u0131yla yeniden d\u0131\u015fa aktarmak isteyebilirsiniz. Bu, API y\u00fczeyini d\u00fczenlemek veya daha y\u00fcksek seviyeli bir mod\u00fcl olu\u015fturmak i\u00e7in kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n Varsay\u0131lan exportlar\u0131 yeniden d\u0131\u015fa aktarmak i\u00e7in biraz farkl\u0131 bir s\u00f6zdizimi kullan\u0131l\u0131r:<\/p>\n Baz\u0131 mod\u00fcllerin, sadece i\u00e7e aktar\u0131ld\u0131klar\u0131nda \u00e7al\u0131\u015fan global konfig\u00fcrasyonlar veya di\u011fer yan etkileri olabilir. Bu t\u00fcr mod\u00fclleri i\u00e7e aktarmak i\u00e7in s\u00fcsl\u00fc parantez veya isim belirtmeden sadece JavaScript’in ba\u015flang\u0131c\u0131ndan itibaren, mod\u00fcl sistemleri ekosistemde farkl\u0131 \u015fekillerde geli\u015fti. TypeScript, bu farkl\u0131 sistemleri destekleyerek geli\u015ftiricilere esneklik sunar. En yayg\u0131n mod\u00fcl sistemleri CommonJS ve ES Mod\u00fclleri’dir.<\/p>\n CommonJS, \u00f6zellikle sunucu taraf\u0131 JavaScript (Node.js) i\u00e7in geli\u015ftirilmi\u015f bir mod\u00fcl sistemidir. Senkron bir y\u00fckleme modeline sahiptir, yani bir mod\u00fcl i\u00e7e aktar\u0131ld\u0131\u011f\u0131nda, o mod\u00fcl\u00fcn kodu tamamen y\u00fcklenene ve \u00e7al\u0131\u015ft\u0131r\u0131lana kadar program\u0131n y\u00fcr\u00fct\u00fclmesi durur.<\/p>\n Node.js’te CommonJS, TypeScript, CommonJS s\u00f6zdizimini kullanarak yaz\u0131lm\u0131\u015f kodlar\u0131 derleyebilir ve modern ES mod\u00fcl s\u00f6zdizimini CommonJS’e d\u00f6n\u00fc\u015ft\u00fcrebilir. Bunu yapmak i\u00e7in ES Mod\u00fclleri, ECMAScript 2015 (ES6) ile JavaScript’e resmi olarak eklenen standart mod\u00fcl sistemidir. Asenkron bir y\u00fckleme modeline sahiptir ve hem taray\u0131c\u0131larda hem de Node.js gibi sunucu ortamlar\u0131nda \u00e7al\u0131\u015facak \u015fekilde tasarlanm\u0131\u015ft\u0131r. Modern web taray\u0131c\u0131lar\u0131, ES Mod\u00fcllerini do\u011frudan destekler. Bir
\n* Kodun Organizasyonu ve Yap\u0131land\u0131r\u0131lmas\u0131:<\/strong> B\u00fcy\u00fck projelerde, y\u00fczlerce veya binlerce dosya olabilir. Mod\u00fcller, bu dosyalar\u0131 mant\u0131ksal gruplara ay\u0131rarak projenin yap\u0131s\u0131n\u0131 d\u00fczenlemeye yard\u0131mc\u0131 olur. \u00d6rne\u011fin, bir utils<\/code> mod\u00fcl\u00fc yard\u0131mc\u0131 fonksiyonlar\u0131, bir components<\/code> mod\u00fcl\u00fc UI bile\u015fenlerini i\u00e7erebilir. Bu, geli\u015ftiricilerin belirli bir i\u015flevselli\u011fi bulmas\u0131n\u0131 ve anlamas\u0131n\u0131 kolayla\u015ft\u0131r\u0131r.
\n* Yeniden Kullan\u0131labilirlik (Reusability):<\/strong> \u0130yi tasarlanm\u0131\u015f mod\u00fcller, farkl\u0131 projelerde veya projenin farkl\u0131 b\u00f6l\u00fcmlerinde kolayca yeniden kullan\u0131labilir. Bir mod\u00fcl\u00fc bir kez yaz\u0131p test ettikten sonra, onu defalarca i\u00e7e aktar\u0131p kullanabilirsiniz. Bu, geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r ve hatalar\u0131 azalt\u0131r.
\n* Bak\u0131m Kolayl\u0131\u011f\u0131:<\/strong> Mod\u00fcler bir yap\u0131, bir hatan\u0131n veya de\u011fi\u015fikli\u011fin etkisini belirli bir mod\u00fclle s\u0131n\u0131rlar. Bir mod\u00fclde yap\u0131lan de\u011fi\u015fiklikler genellikle di\u011fer mod\u00fclleri do\u011frudan etkilemez, bu da bak\u0131m s\u00fcrecini daha \u00f6ng\u00f6r\u00fclebilir ve daha az riskli hale getirir. Ayr\u0131ca, mod\u00fcllerin ba\u011f\u0131ms\u0131z do\u011fas\u0131, birim testlerinin yaz\u0131lmas\u0131n\u0131 ve uygulanmas\u0131n\u0131 kolayla\u015ft\u0131r\u0131r.
\n* Ba\u011f\u0131ml\u0131l\u0131k Y\u00f6netimi:<\/strong> Mod\u00fcller, a\u00e7\u0131k\u00e7a hangi ba\u011f\u0131ml\u0131l\u0131klara sahip olduklar\u0131n\u0131 belirtir. Bu, bir mod\u00fcl\u00fcn \u00e7al\u0131\u015fmas\u0131 i\u00e7in nelere ihtiya\u00e7 duydu\u011funu anlamay\u0131 kolayla\u015ft\u0131r\u0131r ve gereksiz kodun y\u00fcklenmesini \u00f6nler.<\/p>\ntsconfig.json<\/code> ayarlar\u0131yla nas\u0131l yap\u0131land\u0131r\u0131ld\u0131\u011f\u0131n\u0131 detayl\u0131 bir \u015fekilde inceleyece\u011fiz.<\/p>\nMod\u00fcllerin Temel Prensipleri: Import ve Export<\/h3>\n
export<\/code> ve import<\/code> anahtar kelimeleridir. Bu iki anahtar kelime, mod\u00fcller aras\u0131nda de\u011ferlerin, fonksiyonlar\u0131n, s\u0131n\u0131flar\u0131n veya aray\u00fczlerin nas\u0131l payla\u015f\u0131ld\u0131\u011f\u0131n\u0131 tan\u0131mlar.<\/p>\nexport<\/code> Anahtar Kelimesi: Ne \u0130\u015fe Yarar?<\/h4>\nexport<\/code> anahtar kelimesi, bir mod\u00fcl i\u00e7indeki bir \u00f6\u011feyi (de\u011fi\u015fken, fonksiyon, s\u0131n\u0131f, tip, aray\u00fcz vb.) di\u011fer mod\u00fcller taraf\u0131ndan kullan\u0131labilir hale getirir. \u0130ki ana export<\/code> t\u00fcr\u00fc vard\u0131r: adland\u0131r\u0131lm\u0131\u015f (named) ve varsay\u0131lan (default).<\/p>\nAdland\u0131r\u0131lm\u0131\u015f Export (Named Exports)<\/h5>\n
\/\/ math.ts\nexport const PI = 3.14159;\n\nexport function sum(a: number, b: number): number {\n return a + b;\n}\n\nexport class Calculator {\n add(x: number, y: number): number {\n return x + y;\n }\n}\n\ninterface Point {\n x: number;\n y: number;\n}\nexport type Coords = Point; \/\/ Type'\u0131 d\u0131\u015fa aktarma\n\n\/\/ D\u0131\u015fa aktarma listesi ile de yap\u0131labilir:\n\/\/ const PI = 3.14159;\n\/\/ function sum(a: number, b: number): number { return a + b; }\n\/\/ export { PI, sum };<\/code><\/pre>\nVarsay\u0131lan Export (Default Exports)<\/h5>\n
\/\/ greeter.ts\nclass Greeter {\n greet(name: string): string {\n return Hello, ${name}!<\/code>;\n }\n}\n\nexport default Greeter; \/\/ Sadece bir varsay\u0131lan export olabilir\n\n\/\/ Veya bir fonksiyonu varsay\u0131lan olarak d\u0131\u015fa aktarma:\n\/\/ export default function sayHello(name: string): string {\n\/\/ return Hello, ${name}!<\/code>;\n\/\/ }\n\n\/\/ Veya bir de\u011feri:\n\/\/ const myValue = 42;\n\/\/ export default myValue;<\/code><\/pre>\nimport<\/code> Anahtar Kelimesi: Nas\u0131l Kullan\u0131l\u0131r?<\/h4>\nimport<\/code> anahtar kelimesi, ba\u015fka bir mod\u00fcl taraf\u0131ndan d\u0131\u015fa aktar\u0131lm\u0131\u015f \u00f6\u011feleri mevcut mod\u00fcl\u00fcn\u00fcze dahil etmek i\u00e7in kullan\u0131l\u0131r.<\/p>\nAdland\u0131r\u0131lm\u0131\u015f Import (Named Imports)<\/h5>\n
{}<\/code> kullanarak ve \u00f6\u011felerin orijinal adlar\u0131n\u0131 belirterek i\u00e7e aktar\u0131rs\u0131n\u0131z.<\/p>\n\/\/ app.ts\nimport { PI, sum, Calculator, Coords } from '.\/math'; \/\/ '.\/math' dosya yolunu belirtir\n\nconsole.log(PI); \/\/ 3.14159\nconsole.log(sum(5, 3)); \/\/ 8\n\nconst calc = new Calculator();\nconsole.log(calc.add(10, 20)); \/\/ 30\n\nconst myCoords: Coords = { x: 10, y: 20 };\nconsole.log(myCoords);\n\n\/\/ \u0130\u00e7e aktar\u0131lan \u00f6\u011felere farkl\u0131 bir isim vermek isterseniz as<\/code> anahtar kelimesini kullanabilirsiniz:\nimport { PI as MyPi, sum as addNumbers } from '.\/math';\nconsole.log(MyPi);\nconsole.log(addNumbers(1, 2));<\/code><\/pre>\nVarsay\u0131lan Import (Default Imports)<\/h5>\n
\/\/ app.ts\nimport MyGreeter from '.\/greeter'; \/\/ 'Greeter' s\u0131n\u0131f\u0131 'MyGreeter' ad\u0131yla i\u00e7e aktar\u0131ld\u0131\n\nconst greeter = new MyGreeter();\nconsole.log(greeter.greet('TypeScript User')); \/\/ Hello, TypeScript User!<\/code><\/pre>\n\/\/ mixed.ts\nexport const SOME_CONSTANT = 100;\nexport default class MyClass { \/ ... <\/em>\/ }\n\n\/\/ app.ts\nimport MyClass, { SOME_CONSTANT } from '.\/mixed';\nconsole.log(SOME_CONSTANT); \/\/ 100\nconst instance = new MyClass();<\/code><\/pre>\nT\u00fcm\u00fcn\u00fc Import Etme (Namespace Import)<\/h5>\n
* as<\/code> s\u00f6zdizimini kullanabilirsiniz.<\/p>\n\/\/ app.ts\nimport * as MathUtils from '.\/math';\n\nconsole.log(MathUtils.PI);\nconsole.log(MathUtils.sum(7, 8));\nconst calc = new MathUtils.Calculator();\nconsole.log(calc.add(1, 2));<\/code><\/pre>\nYeniden Export Etme (Re-exporting)<\/h5>\n
\/\/ components\/button.ts\nexport class Button { \/ ... <\/em>\/ }\n\n\/\/ components\/input.ts\nexport class Input { \/ ... <\/em>\/ }\n\n\/\/ components\/index.ts (bir \"barrel file\" veya toplu export dosyas\u0131)\nexport * from '.\/button'; \/\/ button.ts'deki t\u00fcm adland\u0131r\u0131lm\u0131\u015f exportlar\u0131 yeniden d\u0131\u015fa aktar\nexport * from '.\/input'; \/\/ input.ts'deki t\u00fcm adland\u0131r\u0131lm\u0131\u015f exportlar\u0131 yeniden d\u0131\u015fa akt\n\n\/\/ app.ts\nimport { Button, Input } from '.\/components'; \/\/ \u015eimdi do\u011frudan 'components' mod\u00fcl\u00fcnden alabiliriz<\/code><\/pre>\n\/\/ moduleA.ts\nexport default class A {}\n\n\/\/ moduleB.ts\nexport { default as ClassA } from '.\/moduleA'; \/\/ default'u ClassA olarak yeniden d\u0131\u015fa aktar\n\n\/\/ app.ts\nimport { ClassA } from '.\/moduleB';\nconst a = new ClassA();<\/code><\/pre>\nYan Etkiler \u0130\u00e7in Import Etme (Side-effect Imports)<\/h5>\n
import<\/code> anahtar kelimesini kullan\u0131rs\u0131n\u0131z.<\/p>\n\/\/ polyfills.ts (\u00f6rne\u011fin, belirli taray\u0131c\u0131 API'lar\u0131n\u0131 ekler)\nimport 'some-polyfill-library';\n\n\/\/ app.ts\nimport '.\/polyfills'; \/\/ Sadece polyfills.ts dosyas\u0131n\u0131n \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar, herhangi bir de\u011fer i\u00e7e aktarmaz.<\/code><\/pre>\nMod\u00fcl Sistemleri (Module Systems): Tarih\u00e7e ve TypeScript Deste\u011fi<\/h3>\n
CommonJS (CJS)<\/h4>\n
Node.js Ortam\u0131nda Kullan\u0131m\u0131<\/h5>\n
require()<\/code> fonksiyonu ile mod\u00fclleri i\u00e7e aktar\u0131r ve module.exports<\/code> veya exports<\/code> nesnesi ile mod\u00fclleri d\u0131\u015fa aktar\u0131r.<\/p>\n\/\/ myModule.js (CommonJS)\nconst myVariable = 123;\nfunction myFunction() { return 'Hello from CJS'; }\n\nmodule.exports = {\n myVariable,\n myFunction\n};\n\n\/\/ app.js (CommonJS)\nconst { myVariable, myFunction } = require('.\/myModule');\nconsole.log(myVariable); \/\/ 123\nconsole.log(myFunction()); \/\/ Hello from CJS<\/code><\/pre>\nTypeScript’te CommonJS Yap\u0131land\u0131rmas\u0131 (
tsconfig.json<\/code>)<\/h5>\ntsconfig.json<\/code> dosyas\u0131nda module<\/code> derleyici se\u00e7ene\u011fini commonjs<\/code> olarak ayarlaman\u0131z gerekir.<\/p>\n\/\/ tsconfig.json\n{\n \"compilerOptions\": {\n \"module\": \"commonjs\", \/\/ CommonJS mod\u00fcl sistemini kullan\n \"target\": \"es2016\", \/\/ Hedef JavaScript s\u00fcr\u00fcm\u00fc\n \"esModuleInterop\": true, \/\/ ES Mod\u00fclleri ile CommonJS aras\u0131ndaki uyumlulu\u011fu art\u0131r\u0131r\n \"strict\": true,\n \"outDir\": \".\/dist\"\n },\n \"include\": [\n \"src\/<\/em>\/*\"\n ]\n}<\/code><\/pre>\nesModuleInterop: true<\/code> se\u00e7ene\u011fi \u00f6nemlidir \u00e7\u00fcnk\u00fc ES Mod\u00fclleri’nin varsay\u0131lan importlar\u0131 ile CommonJS’in module.exports<\/code> yap\u0131s\u0131 aras\u0131nda uyumluluk sa\u011flar. Bu olmadan, CommonJS mod\u00fcllerini ES mod\u00fcl\u00fc s\u00f6zdizimiyle i\u00e7e aktar\u0131rken sorunlar ya\u015fayabilirsiniz (\u00f6rne\u011fin, import * as React from 'react'<\/code> yerine import React from 'react'<\/code> kullanamama).<\/p>\nES Mod\u00fclleri (ESM \/ ECMAScript Modules)<\/h4>\n
import<\/code> ve export<\/code> anahtar kelimeleri bu sistemin bir par\u00e7as\u0131d\u0131r.<\/p>\nModern Web Geli\u015ftirmede Yeri<\/h5>\n