TypeScript Geli\u015fmi\u015f Desenler: 2025’te Daha Temiz ve G\u00fcvenli Kod Yazmak<\/p>\n
TypeScript, JavaScript’in g\u00fc\u00e7l\u00fc bir \u00fcst k\u00fcmesi olarak, b\u00fcy\u00fck \u00f6l\u00e7ekli uygulamalar i\u00e7in sa\u011flam bir temel olu\u015fturuyor. Ancak, sadece temel TypeScript bilgisine sahip olmak, ger\u00e7ekten verimli ve g\u00fcvenli kod yazmak i\u00e7in yeterli de\u011fil. Bu makale, 2025 y\u0131l\u0131 itibariyle TypeScript’te geli\u015fmi\u015f tasar\u0131m kal\u0131plar\u0131n\u0131, performans optimizasyonlar\u0131n\u0131 ve g\u00fcvenlik en iyi uygulamalar\u0131n\u0131 ele alarak, kod kalitenizi bir \u00fcst seviyeye ta\u015f\u0131man\u0131za yard\u0131mc\u0131 olmay\u0131 ama\u00e7l\u0131yor. Daha temiz, daha okunabilir ve hata olas\u0131l\u0131\u011f\u0131 daha d\u00fc\u015f\u00fck bir kod yaz\u0131m\u0131na ge\u00e7i\u015f yaparak, geli\u015ftirme s\u00fcrecinizi h\u0131zland\u0131r\u0131n ve bak\u0131m maliyetlerinizi azalt\u0131n.<\/p>\n
Geli\u015fmi\u015f TypeScript desenleri, karma\u015f\u0131k uygulamalar\u0131 daha d\u00fczenli, bak\u0131m\u0131 daha kolay ve daha \u00f6l\u00e7eklenebilir hale getirmek i\u00e7in kullan\u0131lan, geli\u015fmi\u015f teknikler ve yakla\u015f\u0131mlar\u0131 kapsar. Temel TypeScript kavramlar\u0131n\u0131n \u00f6tesine ge\u00e7erek, kodunuzun daha mod\u00fcler, daha yeniden kullan\u0131labilir ve daha anla\u015f\u0131l\u0131r olmas\u0131n\u0131 sa\u011flar. Bu desenler, \u00f6zellikle b\u00fcy\u00fck ekiplerde \u00e7al\u0131\u015fan geli\u015ftiriciler i\u00e7in kritik \u00f6nem ta\u015f\u0131maktad\u0131r; \u00e7\u00fcnk\u00fc tutarl\u0131l\u0131k, okunabilirlik ve s\u00fcrd\u00fcr\u00fclebilirli\u011fi sa\u011flar. \u00d6rne\u011fin, bir uygulamada kullan\u0131lan veri ak\u0131\u015f\u0131n\u0131 y\u00f6netmek i\u00e7in kullan\u0131lan RxJS gibi reaktif programlama desenleri, karma\u015f\u0131k durumlar\u0131 ele almak ve veri de\u011fi\u015fikliklerine tepki vermek i\u00e7in etkili \u00e7\u00f6z\u00fcmler sunar. Bu desenleri anlamak ve uygulamak, geli\u015ftirme s\u00fcrenizi k\u0131salt\u0131r ve potansiyel hatalar\u0131 azalt\u0131r.<\/p>\n
Generic t\u00fcrler, TypeScript’in en g\u00fc\u00e7l\u00fc \u00f6zelliklerinden biridir. Fonksiyonlar ve s\u0131n\u0131flar olu\u015ftururken, veri tipini belirlemeyi sonraya b\u0131rakman\u0131za olanak sa\u011flar. Bu sayede, farkl\u0131 veri tipleriyle \u00e7al\u0131\u015fabilen, daha esnek ve yeniden kullan\u0131labilir kod yazabilirsiniz. \u00d6rne\u011fin, bir dizinin elemanlar\u0131n\u0131n tipini belirtmeden bir dizi d\u00f6nd\u00fcren bir fonksiyon olu\u015fturabilirsiniz. Generic t\u00fcrler sayesinde, derleme zaman\u0131nda tip g\u00fcvenli\u011fi sa\u011flan\u0131r ve \u00e7al\u0131\u015fma zaman\u0131nda ortaya \u00e7\u0131kabilecek tip hatalar\u0131n\u0131n \u00f6n\u00fcne ge\u00e7ilir. \u0130\u015fte basit bir \u00f6rnek:<\/p>\n
function identity(arg: T): T {\n return arg;\n}\n\nlet myString: string = identity(\"hello\");\nlet myNumber: number = identity(123);<\/pre>\n<\/code><\/p>\n
Bu \u00f6rnekte, identity<\/code> fonksiyonu, herhangi bir tip (T<\/code>) alabilir ve ayn\u0131 tipi d\u00f6nd\u00fcr\u00fcr. Generic t\u00fcrler sayesinde, myString<\/code> de\u011fi\u015fkeninin string<\/code> ve myNumber<\/code> de\u011fi\u015fkeninin number<\/code> tipine sahip oldu\u011fundan emin oluruz.<\/p>\nConditional Types: \u015eartl\u0131 Tip Kontrol\u00fc ile Kodunuzu Optimize Edin<\/h2>\n
Conditional types, bir de\u011fi\u015fkenin veya ifadenin tipine ba\u011fl\u0131 olarak farkl\u0131 tipler d\u00f6nd\u00fcrmenize izin verir. Bu \u00f6zellik, karma\u015f\u0131k tip kontrol\u00fc senaryolar\u0131nda b\u00fcy\u00fck kolayl\u0131k sa\u011flar. \u00d6rne\u011fin, bir fonksiyonun d\u00f6nd\u00fcrd\u00fc\u011f\u00fc de\u011ferin tipini, fonksiyonun ald\u0131\u011f\u0131 parametreye ba\u011fl\u0131 olarak de\u011fi\u015ftirebilirsiniz. extends<\/code> anahtar kelimesi ile bir tipin ba\u015fka bir tipi geni\u015fletip geni\u015fletmedi\u011fini kontrol edebilirsiniz. Bu, kodunuzda daha fazla esneklik ve kontrol sa\u011flar. A\u015fa\u011f\u0131daki \u00f6rnekte, isType<\/code> fonksiyonu, verilen de\u011ferin string<\/code> tipi olup olmad\u0131\u011f\u0131n\u0131 kontrol eder ve ona g\u00f6re bir tip d\u00f6nd\u00fcr\u00fcr:<\/p>\ntype IsString = T extends string ? 'string' : 'not string';\n\ntype StringCheck = IsString; \/\/ StringCheck = 'string'\ntype NumberCheck = IsString; \/\/ NumberCheck = 'not string'<\/pre>\n<\/code><\/p>\n
Intersection ve Union Types: Karma\u015f\u0131k Tipleri Y\u00f6netme<\/h2>\n
TypeScript'te, intersection<\/code> ve union<\/code> tipleri, birden fazla tipin \u00f6zelliklerini birle\u015ftirmenize veya bir de\u011fi\u015fkenin birden fazla tipte olabilmesine olanak tan\u0131r. intersection<\/code> tipi (&<\/code>), iki veya daha fazla tipin ortak \u00f6zelliklerini birle\u015ftirirken, union<\/code> tipi (|<\/code>), bir de\u011fi\u015fkenin birden fazla tipten birine sahip olabilece\u011fini belirtir. Bu tipler, karma\u015f\u0131k veri yap\u0131lar\u0131n\u0131 temsil etmek ve daha esnek bir kod yazmak i\u00e7in olduk\u00e7a kullan\u0131\u015fl\u0131d\u0131r.<\/p>\ninterface Person {\n name: string;\n age: number;\n}\n\ninterface Employee {\n employeeId: string;\n salary: number;\n}\n\ntype PersonEmployee = Person & Employee; \/\/ intersection: hem Person hem Employee \u00f6zelliklerine sahip bir tip\n\nlet personEmployee: PersonEmployee = {\n name: \"John Doe\",\n age: 30,\n employeeId: \"12345\",\n salary: 50000\n};\n\ntype StringOrNumber = string | number; \/\/ union: string veya number olabilir\n\nlet value: StringOrNumber = \"hello\";\nvalue = 123;<\/pre>\n<\/code><\/p>\n
Mapped Types: Tip D\u00f6n\u00fc\u015f\u00fcmlerini Basitle\u015ftirin<\/h2>\n
Mapped types, bir nesnenin \u00f6zelliklerini d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in kullan\u0131lan g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. Bu, \u00f6zellikle b\u00fcy\u00fck nesneler \u00fczerinde i\u015flem yaparken zaman ve emek tasarrufu sa\u011flar. \u00d6rne\u011fin, bir nesnenin t\u00fcm \u00f6zelliklerinin tipini readonly<\/code> hale getirmek veya her \u00f6zelli\u011fin sonuna ?<\/code> ekleyerek iste\u011fe ba\u011fl\u0131 hale getirmek i\u00e7in kullanabilirsiniz. A\u015fa\u011f\u0131daki \u00f6rnekte, Readonly<\/code> ile bir nesnenin t\u00fcm \u00f6zelliklerini salt okunur hale getirdik.<\/p>\ninterface User {\n name: string;\n age: number;\n}\n\ntype ReadonlyUser = Readonly; \/\/ ReadonlyUser t\u00fcm \u00f6zellikler readonly olur\n\nlet user: User = { name: 'John', age: 30 };\nlet readonlyUser: ReadonlyUser = user;\n\n\/\/ readonlyUser.name = 'Jane'; \/\/ Error: Cannot assign to 'name' because it is a read-only property.<\/pre>\n<\/code><\/p>\n
Mapped Types ile \u0130leri D\u00fczey Kullan\u0131mlar: Partial, Pick, Omit<\/h3>\n
TypeScript'in sa\u011flad\u0131\u011f\u0131 Partial<\/code>, Pick<\/code>, ve Omit<\/code> yard\u0131mc\u0131 tipleri, Mapped Types<\/code>'\u0131n pratik uygulamalar\u0131n\u0131 g\u00f6sterir. Partial<\/code> t\u00fcm \u00f6zelliklerini iste\u011fe ba\u011fl\u0131 hale getirir. Pick<\/code> ise belirli \u00f6zelliklerini al\u0131r. Omit<\/code> ise belirli \u00f6zellikleri hari\u00e7 tutar. Bu tipler, kodunuzun daha okunabilir ve y\u00f6netilebilir olmas\u0131n\u0131 sa\u011flar.<\/p>\nDecorator'lar: Metaprogramlama ile Kodunuzu \u00d6zelle\u015ftirin<\/h2>\n
Decorator'lar, TypeScript'te s\u0131n\u0131flar, metotlar ve \u00f6zelliklere ek bilgiler eklemek i\u00e7in kullan\u0131l\u0131r. Fonksiyonel programlamadan gelen bir kavram olan decorator'lar, kodun davran\u0131\u015f\u0131n\u0131 de\u011fi\u015ftirmeden, ek i\u015flevsellik eklemeye olanak tan\u0131r. AOP (Aspect-Oriented Programming) prensiplerini uygulamak i\u00e7in idealdirler. \u00d6rne\u011fin, bir metodun \u00e7al\u0131\u015fma s\u00fcresini \u00f6l\u00e7mek veya bir veritaban\u0131na veri kaydetmek i\u00e7in decorator kullanabilirsiniz. A\u015fa\u011f\u0131da, \u00e7al\u0131\u015fma s\u00fcresini \u00f6l\u00e7en bir decorator \u00f6rne\u011fi verilmi\u015ftir:<\/p>\n
function measureTime(target: any, propertyKey: string, descriptor: PropertyDescriptor) {\n const originalMethod = descriptor.value;\n descriptor.value = function (...args: any[]) {\n const startTime = performance.now();\n const result = originalMethod.apply(this, args);\n const endTime = performance.now();\n console.log(Method ${propertyKey} took ${endTime - startTime} ms<\/code>);\n return result;\n };\n}\n\nclass MyClass {\n @measureTime\n myMethod(a: number, b: number): number {\n let sum = 0;\n for (let i = 0; i < 100000000; i++) {\n sum += i;\n }\n return a + b;\n }\n}\n\nlet myInstance = new MyClass();\nmyInstance.myMethod(5, 10); \/\/ \u00c7al\u0131\u015fma s\u00fcresi konsola yazd\u0131r\u0131l\u0131r.<\/pre>\n<\/code><\/p>\n
TypeScript'te Asenkron Programlama: Promise ve Async\/Await<\/h2>\n
Modern web uygulamalar\u0131nda, asenkron i\u015flemler ka\u00e7\u0131n\u0131lmazd\u0131r. TypeScript, Promise'ler ve async<\/code>\/await<\/code> anahtar kelimeleri ile asenkron kod yazmay\u0131 kolayla\u015ft\u0131r\u0131r. Promise<\/code>'ler, bir i\u015flemin tamamlanmas\u0131 veya ba\u015far\u0131s\u0131z olmas\u0131 durumunda sonu\u00e7 d\u00f6nd\u00fcrmek i\u00e7in kullan\u0131l\u0131rken, async<\/code>\/await<\/code> yap\u0131s\u0131, asenkron kodun senkron kod gibi yaz\u0131lmas\u0131n\u0131 sa\u011flar, okunabilirli\u011fi art\u0131r\u0131r.<\/p>\nasync function fetchData(): Promise {\n return new Promise((resolve, reject) => {\n setTimeout(() => {\n resolve(\"Veriler ba\u015far\u0131yla al\u0131nd\u0131!\");\n }, 2000);\n });\n}\n\nasync function main() {\n try {\n const data = await fetchData();\n console.log(data);\n } catch (error) {\n console.error(error);\n }\n}\n\nmain();<\/pre>\n<\/code><\/p>\n
TypeScript \u00d6\u011frenme Yol Haritas\u0131<\/h2>\nYeni Ba\u015flayanlar:<\/h3>\n