Modern web geli\u015ftirme d\u00fcnyas\u0131nda, b\u00fcy\u00fcyen projelerin karma\u015f\u0131kl\u0131\u011f\u0131yla ba\u015fa \u00e7\u0131kmak ve kod kalitesini korumak hi\u00e7 bu kadar \u00f6nemli olmam\u0131\u015ft\u0131. TypeScript, JavaScript’e statik tip denetimi ekleyerek bu zorluklara g\u00fc\u00e7l\u00fc bir \u00e7\u00f6z\u00fcm sunar ve geli\u015ftiricilere daha g\u00fcvenilir, bak\u0131m\u0131 kolay ve okunabilir kod yazma imkan\u0131 tan\u0131r. Peki, TypeScript’in hangi \u00f6zel yetenekleri, kodunuzu ba\u015ftan a\u015fa\u011f\u0131 d\u00f6n\u00fc\u015ft\u00fcrebilir? Bu makalede, kod yazma prati\u011fimi k\u00f6kten de\u011fi\u015ftiren ve projelerimde inan\u0131lmaz bir temizlik sa\u011flayan d\u00f6rt temel TypeScript konseptini derinlemesine inceleyece\u011fiz.<\/p>\n
JavaScript ekosistemi h\u0131zla b\u00fcy\u00fcrken, dinamik yap\u0131s\u0131 bazen beklenmedik hatalara yol a\u00e7abiliyor. \u00d6zellikle b\u00fcy\u00fck \u00f6l\u00e7ekli uygulamalarda veya ekip i\u00e7inde \u00e7al\u0131\u015f\u0131rken, bir fonksiyonun bekledi\u011fi veri tipini veya bir objenin hangi \u00f6zelliklere sahip oldu\u011funu anlamak zaman al\u0131c\u0131 ve hataya a\u00e7\u0131k bir s\u00fcre\u00e7 haline gelebilir. \u0130\u015fte tam bu noktada TypeScript devreye girer. Geli\u015ftirme a\u015famas\u0131nda potansiyel hatalar\u0131 yakalayarak, runtime’da kar\u015f\u0131la\u015faca\u011f\u0131m\u0131z sorunlar\u0131 en aza indirir. Bu, geli\u015ftiricinin daha \u00e7ok i\u015f mant\u0131\u011f\u0131na odaklanmas\u0131n\u0131 ve daha az debug yapmas\u0131n\u0131 sa\u011flar. Daha da \u00f6nemlisi, net tip tan\u0131mlamalar\u0131 sayesinde kodun kendisi bir dok\u00fcmantasyon g\u00f6revi g\u00f6r\u00fcr. Bu, yeni bir geli\u015ftiricinin projeye adapte olmas\u0131n\u0131 kolayla\u015ft\u0131rd\u0131\u011f\u0131 gibi, mevcut kodun uzun vadeli bak\u0131m\u0131n\u0131 da basitle\u015ftirir. Bu makalede ele alaca\u011f\u0131m\u0131z d\u00f6rt konsept, TypeScript’in bu g\u00fcc\u00fcn\u00fc en verimli \u015fekilde kullanman\u0131za olanak tan\u0131yarak, temiz ve s\u00fcrd\u00fcr\u00fclebilir kod yazma al\u0131\u015fkanl\u0131\u011f\u0131n\u0131z\u0131 bir \u00fcst seviyeye ta\u015f\u0131yacak. Bir sonraki b\u00f6l\u00fcmde, bu kavramlar\u0131n ilkine, yani Union ve Intersection Tiplerine odaklanaca\u011f\u0131z.<\/p>\n
Geli\u015ftirme yaparken, bazen bir de\u011fi\u015fkenin birden fazla farkl\u0131 veri tipini alabilmesini isteriz veya farkl\u0131 nesne tiplerinin \u00f6zelliklerini birle\u015ftirerek daha zengin bir yap\u0131 olu\u015fturma ihtiyac\u0131 duyar\u0131z. TypeScript’in Union (Birle\u015fim) ve Intersection (Kesi\u015fim) tipleri, bu senaryolarda bize e\u015fsiz bir esneklik ve tip g\u00fcvenli\u011fi sunar. Bu iki konsept, kodunuzdaki veri yap\u0131lar\u0131n\u0131 daha ger\u00e7ek\u00e7i ve kapsaml\u0131 bir \u015fekilde tan\u0131mlaman\u0131z\u0131 sa\u011flayarak, hatalar\u0131 en aza indirir ve kod okunabilirli\u011fini art\u0131r\u0131r.<\/p>\n
Union tipleri, bir de\u011fi\u015fkenin veya bir parametrenin birden fazla olas\u0131 tipten herhangi birine sahip olabilece\u011fini belirtmek i\u00e7in kullan\u0131l\u0131r. Bu, “ya A tipi ya da B tipi” \u015feklinde bir anlam ta\u015f\u0131r. \u00d6rne\u011fin, bir kullan\u0131c\u0131n\u0131n ID’si bazen say\u0131, bazen de bir metin (UUID) olabilir. Geleneksel JavaScript’te bunu kontrol etmek i\u00e7in runtime’da <\/code><\/p>\n Bu \u00f6rnekte, Intersection tipleri ise tam tersi bir yakla\u015f\u0131mla, birden fazla tipi bir araya getirerek yeni bir tip olu\u015fturur. Bu, \"hem A tipi hem de B tipi\" \u015feklinde bir anlam ta\u015f\u0131r. Yani, olu\u015fan yeni tip, birle\u015ftirilen t\u00fcm tiplerin \u00f6zelliklerine sahip olmak zorundad\u0131r. Bu, \u00f6zellikle mevcut tipleri geni\u015fletmek veya karma\u015f\u0131k nesneleri daha k\u00fc\u00e7\u00fck, mod\u00fcler tiplerden birle\u015ftirmek istedi\u011fimizde \u00e7ok kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n <\/code><\/p>\n Yukar\u0131daki \u00f6rnekte, Ger\u00e7ek d\u00fcnya senaryosunda, bir e-ticaret uygulamas\u0131nda \u00fcr\u00fcn verilerini ele ald\u0131\u011f\u0131n\u0131z\u0131 d\u00fc\u015f\u00fcn\u00fcn. Temel bir \n Uzman \u0130pucu: Karma\u015f\u0131k veri yap\u0131lar\u0131n\u0131 y\u00f6netirken, \u00f6ncelikle k\u00fc\u00e7\u00fck ve tekil aray\u00fczler tan\u0131mlay\u0131p ard\u0131ndan bunlar\u0131 Union ve Intersection tipleriyle birle\u015ftirerek daha anlaml\u0131 ve okunabilir tipler olu\u015fturun. Bu yakla\u015f\u0131m, tip karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 azalt\u0131r ve daha mod\u00fcler bir kod taban\u0131 sa\u011flar.\n <\/p><\/blockquote>\n Yaz\u0131l\u0131m geli\u015ftirme s\u00fcrecinde en s\u0131k kar\u015f\u0131la\u015ft\u0131\u011f\u0131m\u0131z zorluklardan biri, farkl\u0131 veri tipleriyle \u00e7al\u0131\u015f\u0131rken kod tekrar\u0131ndan ka\u00e7\u0131nmakt\u0131r. Bir fonksiyonun veya s\u0131n\u0131f\u0131n sadece belirli bir tip i\u00e7in de\u011fil, ayn\u0131 mant\u0131\u011f\u0131 koruyarak bir\u00e7ok farkl\u0131 tip i\u00e7in \u00e7al\u0131\u015fmas\u0131n\u0131 isteriz. \u0130\u015fte bu noktada TypeScript'in Generics (Jenerikler) \u00f6zelli\u011fi imdad\u0131m\u0131za yeti\u015fir. Generics, kodunuzu daha esnek, yeniden kullan\u0131labilir ve ayn\u0131 zamanda tip-g\u00fcvenli hale getiren g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. Bir nevi, \"yer tutucu\" tipler kullanarak, bir fonksiyonun veya s\u0131n\u0131f\u0131n, \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda kendisine hangi tipin verilece\u011fini belirlemesini sa\u011flar\u0131z. Bu, kod tekrar\u0131n\u0131 \u00f6nlerken, hatalar\u0131 derleme zaman\u0131nda yakalama yetene\u011fimizi de korur.<\/p>\n Bir \u00f6rnekle a\u00e7\u0131klayal\u0131m: Bir dizideki elemanlar\u0131 tersine \u00e7eviren bir fonksiyon yazmak istedi\u011finizi d\u00fc\u015f\u00fcn\u00fcn. E\u011fer bu fonksiyonu sadece say\u0131 dizileri i\u00e7in yazarsan\u0131z, daha sonra string dizileri veya nesne dizileri i\u00e7in de benzer bir fonksiyon yazman\u0131z gerekecektir. Bu durum, kod tekrar\u0131na ve bak\u0131m zorlu\u011funa yol a\u00e7ar:<\/p>\n <\/code><\/p>\n G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi, her tip i\u00e7in ayr\u0131 bir fonksiyon yazmak hem zaman al\u0131c\u0131 hem de gereksizdir \u00e7\u00fcnk\u00fc her iki fonksiyon da asl\u0131nda ayn\u0131 mant\u0131\u011f\u0131 uyguluyor. Generics bu sorunu \u00e7\u00f6zmek i\u00e7in tasarlanm\u0131\u015ft\u0131r:<\/p>\n <\/code><\/p>\n Burada Bazen, generic bir tipin belirli \u00f6zelliklere sahip olmas\u0131n\u0131 isteriz. \u00d6rne\u011fin, bir nesnenin bir \u00f6zelli\u011fini d\u00f6nd\u00fcren bir fonksiyon yazmak isteyebiliriz. Ancak, e\u011fer generic tipimiz herhangi bir nesne olabilirse, TypeScript bize o nesnenin belirli bir \u00f6zelli\u011fe sahip oldu\u011funu garanti edemez. \u0130\u015fte bu noktada <\/code><\/p>\n Bu \u00f6rnekte, Ger\u00e7ek d\u00fcnya senaryosunda, bir API istemcisi olu\u015fturdu\u011funuzu ve farkl\u0131 endpoint'lerden gelen verileri ortak bir yap\u0131yla i\u015flemek istedi\u011finizi d\u00fc\u015f\u00fcn\u00fcn. Generics kullanarak, her endpoint i\u00e7in ayr\u0131 ayr\u0131 tip tan\u0131mlamak yerine, tek bir \n Uzman \u0130pucu: Generics kullan\u0131rken, tip parametrelerine anlaml\u0131 isimler vermeye \u00f6zen g\u00f6sterin (T, U, K yerine Item, Key, Value gibi). Bu, kodunuzun okunabilirli\u011fini art\u0131r\u0131r ve di\u011fer geli\u015ftiricilerin niyetinizi daha kolay anlamas\u0131na yard\u0131mc\u0131 olur.\n <\/p><\/blockquote>\n TypeScript, kodumuzu derleme zaman\u0131nda tip g\u00fcvenli\u011fini sa\u011flayarak harika bir i\u015f \u00e7\u0131kar\u0131r. Ancak, bazen \u00e7al\u0131\u015fma zaman\u0131nda (runtime) bir de\u011fi\u015fkenin tam olarak hangi tipe sahip oldu\u011funu bilmemiz gerekebilir. \u00d6zellikle Union tipleriyle \u00e7al\u0131\u015f\u0131rken, kodun belirli bir dal\u0131nda de\u011fi\u015fkenin olas\u0131 tiplerinden hangisi oldu\u011funu daraltmak (narrowing) hayati \u00f6nem ta\u015f\u0131r. \u0130\u015fte Type Guards (Tip Koruyucular\u0131) ve Discriminated Unions (Ayr\u0131lm\u0131\u015f Birle\u015fimler) devreye girerek bu ihtiyac\u0131m\u0131z\u0131 kar\u015f\u0131lar. Bu konseptler, JavaScript'in dinamik do\u011fas\u0131yla TypeScript'in statik tip sistemini birle\u015ftirerek, daha g\u00fcvenli ve \u00f6ng\u00f6r\u00fclebilir bir kod ak\u0131\u015f\u0131 yarat\u0131r.<\/p>\n Type Guards, \u00e7al\u0131\u015fma zaman\u0131nda ko\u015fullu denetimler yaparak bir de\u011fi\u015fkenin tipini daraltmam\u0131z\u0131 sa\u011flayan \u00f6zel ifadelerdir. TypeScript derleyicisi, bu denetimlerden sonra belirli bir kod blo\u011fu i\u00e7inde de\u011fi\u015fkenin tipini o denetime uygun olarak \"g\u00fcnceller\". En yayg\u0131n kullan\u0131lan Type Guards \u015funlard\u0131r:<\/p>\n Bir <\/code><\/p>\n Bu \u00f6rnekte, Kullan\u0131c\u0131 tan\u0131ml\u0131 tip koruyucular\u0131 ise daha karma\u015f\u0131k senaryolarda kendi \u00f6zel mant\u0131\u011f\u0131m\u0131z\u0131 kullanarak tip daraltma yapmam\u0131z\u0131 sa\u011flar. Bunlar, d\u00f6n\u00fc\u015f tipi olarak <\/code><\/p>\n Burada Discriminated Unions, ortak bir literal tip \u00f6zelli\u011fine sahip union tipleridir. Bu \u00f6zellik (\"discriminant\" veya \"ay\u0131r\u0131c\u0131\") sayesinde, TypeScript bir de\u011fi\u015fkenin hangi union \u00fcyesine ait oldu\u011funu kolayca ay\u0131rt edebilir. Bu, karma\u015f\u0131k durum makineleri, olay i\u015fleyicileri veya API yan\u0131tlar\u0131n\u0131 y\u00f6netirken son derece g\u00fc\u00e7l\u00fc bir desendir.<\/p>\n <\/code><\/p>\n Bu \u00f6rnekte, Ger\u00e7ek d\u00fcnya senaryosunda, kullan\u0131c\u0131 aray\u00fcz\u00fcnde farkl\u0131 bildirim tiplerini (ba\u015far\u0131, hata, uyar\u0131) g\u00f6steren bir bile\u015fen geli\u015ftirdi\u011finizi d\u00fc\u015f\u00fcn\u00fcn. Her bildirim tipi farkl\u0131 verilere sahip olabilir (\u00f6rne\u011fin, ba\u015far\u0131 bildiriminde sadece mesaj, hata bildiriminde mesaj ve hata kodu). Discriminated Unions kullanarak, tek bir \n Uzman \u0130pucu: \u00d6zellikle TypeScript, sadece kendi tip sistemini kurmakla kalmaz, ayn\u0131 zamanda mevcut tipleri yeni ihtiya\u00e7lara g\u00f6re d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in de g\u00fc\u00e7l\u00fc ara\u00e7lar sunar. Bu ara\u00e7lara \"Utility Tipler\" denir. TypeScript'in standart k\u00fct\u00fcphanesinde yer alan bu haz\u0131r tipler, s\u0131k kar\u015f\u0131la\u015f\u0131lan tip d\u00f6n\u00fc\u015f\u00fcm senaryolar\u0131n\u0131 kolayca halletmemizi sa\u011flar. Bu sayede, ayn\u0131 tip d\u00f6n\u00fc\u015f\u00fcmlerini manuel olarak yazmaktan kurtulur, kod tekrar\u0131n\u0131 azalt\u0131r ve geli\u015ftirme h\u0131z\u0131m\u0131z\u0131 art\u0131r\u0131r\u0131z. Utility tipler, \u00f6zellikle karma\u015f\u0131k API modellerini i\u015flerken, form verilerini y\u00f6netirken veya veri nesnelerini farkl\u0131 senaryolara uyarlarken paha bi\u00e7ilmez bir kolayl\u0131k sunar.<\/p>\n Bir uygulaman\u0131n kullan\u0131c\u0131 profil sayfas\u0131n\u0131 d\u00fc\u015f\u00fcn\u00fcn. Kullan\u0131c\u0131n\u0131n t\u00fcm bilgilerini i\u00e7eren bir <\/code><\/p>\n Burada <\/code><\/p>\n <\/code><\/p>\n Bu sayede, Ger\u00e7ek d\u00fcnya senaryosunda, bir k\u00fct\u00fcphane veya payla\u015f\u0131lan bir servis geli\u015ftirdi\u011finizi d\u00fc\u015f\u00fcn\u00fcn. Servis taraf\u0131ndan d\u00f6nd\u00fcr\u00fclen verilerin d\u0131\u015far\u0131dan de\u011fi\u015ftirilmemesi gerekti\u011fini garantilemek isteyebilirsiniz. Bu durumda, d\u00f6nen objeleri \n Uzman \u0130pucu: Kendi \u00f6zel utility tiplerinizi de olu\u015fturabilirsiniz! Yukar\u0131da bahsetti\u011fimiz d\u00f6rt temel TypeScript konsepti, kod kalitenizi art\u0131rmak i\u00e7in sa\u011flam bir temel sunar. Ancak TypeScript'in potansiyelini tam olarak kullanmak ve kodunuzu ger\u00e7ekten \"temiz\" hale getirmek i\u00e7in baz\u0131 ileri seviye pratikleri ve ara\u00e7lar\u0131 da g\u00f6z \u00f6n\u00fcnde bulundurmak \u00f6nemlidir. Bu ipu\u00e7lar\u0131, daha b\u00fcy\u00fck projelerde tutarl\u0131l\u0131k sa\u011flaman\u0131za, geli\u015ftirme s\u00fcrecini optimize etmenize ve hatta mobil uyumlulu\u011fu d\u00fc\u015f\u00fcnerek modern tasar\u0131m prensiplerini kodunuza entegre etmenize yard\u0131mc\u0131 olacakt\u0131r.<\/p>\n B\u00fcy\u00fck ekiplerde veya uzun \u00f6m\u00fcrl\u00fc projelerde, kod stilinin ve kalitesinin tutarl\u0131 olmas\u0131 hayati \u00f6nem ta\u015f\u0131r. ESLint ve Prettier gibi ara\u00e7lar, TypeScript ile birlikte m\u00fckemmel \u00e7al\u0131\u015f\u0131r. ESLint, potansiyel hatalar\u0131 ve stil ihlallerini tespit ederken, Prettier kodunuzu otomatik olarak bi\u00e7imlendirir. Bu ikili, kod inceleme s\u00fcre\u00e7lerini h\u0131zland\u0131r\u0131r ve farkl\u0131 geli\u015ftiriciler taraf\u0131ndan yaz\u0131lan kodun tek bir standartta olmas\u0131n\u0131 sa\u011flar. TypeScript'e \u00f6zg\u00fc ESLint kurallar\u0131 ( Bu ayarlar\u0131 do\u011fru yap\u0131land\u0131rmak, derleyiciyi sizin ad\u0131n\u0131za daha fazla hata yakalamas\u0131 i\u00e7in e\u011fitmek gibidir.<\/p>\n E\u011fer bir monorepo (tek bir depoda birden fazla proje) kullan\u0131yorsan\u0131z, tip y\u00f6netiminin karma\u015f\u0131kl\u0131\u011f\u0131 artabilir. Payla\u015f\u0131lan komponentler veya utility fonksiyonlar\u0131 i\u00e7eren paketler olu\u015fturmak ve bu paketlerin tiplerini di\u011fer projelere d\u00fczg\u00fcn bir \u015fekilde aktarmak \u00f6nemlidir. Modern web uygulamalar\u0131 genellikle duyarl\u0131 tasar\u0131ma (responsive design) ve performans optimizasyonuna b\u00fcy\u00fck \u00f6nem verir. TypeScript do\u011frudan CSS veya HTML ile ilgili g\u00f6r\u00fcnmese de, onunla yaz\u0131lan temiz ve mod\u00fcler kod, bu prensiplerin uygulanmas\u0131n\u0131 kolayla\u015ft\u0131r\u0131r. \u00d6rne\u011fin, bir komponentin farkl\u0131 ekran boyutlar\u0131na g\u00f6re farkl\u0131 veri yap\u0131lar\u0131 veya props'lar almas\u0131 gerekti\u011finde, Union ve Intersection tipleri veya Generics kullanarak bu de\u011fi\u015fkenli\u011fi tip g\u00fcvenli bir \u015fekilde y\u00f6netebilirsiniz. Mobil uyumlu aray\u00fczler i\u00e7in tasarlanan komponentlerin state y\u00f6netimini, Redux veya MobX gibi k\u00fct\u00fcphanelerle TypeScript kullanarak daha g\u00fcvenli ve hata ay\u0131klamas\u0131 kolay hale getirebilirsiniz. Bu, CSS Bu ileri d\u00fczey ipu\u00e7lar\u0131, TypeScript'in sundu\u011fu olanaklar\u0131 daha da derinlemesine ke\u015ffetmenizi ve kodunuzun sadece \u00e7al\u0131\u015fmakla kalmay\u0131p, ayn\u0131 zamanda \u00f6rnek te\u015fkil edecek kadar temiz, bak\u0131m\u0131 kolay ve gelece\u011fe d\u00f6n\u00fck olmas\u0131n\u0131 sa\u011flaman\u0131za yard\u0131mc\u0131 olacakt\u0131r. Unutmay\u0131n, temiz kod bir hedeften ziyade s\u00fcrekli bir yolculuktur ve TypeScript bu yolculukta en iyi yol arkada\u015flar\u0131n\u0131zdan biridir.<\/p>\n Bu makalede, TypeScript'in sa\u011flad\u0131\u011f\u0131 g\u00fc\u00e7ten faydalanarak kod kalitemizi ve geli\u015ftirici deneyimimizi nas\u0131l \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rabilece\u011fimizi g\u00f6steren d\u00f6rt temel konsepti ele ald\u0131k. Union ve Intersection tipleriyle esnek ve kapsaml\u0131 veri modelleri olu\u015fturmay\u0131, Generics ile tekrar kullan\u0131labilir ve tip g\u00fcvenli bile\u015fenler yazmay\u0131, Type Guards ve Discriminated Unions ile \u00e7al\u0131\u015fma zaman\u0131nda tipleri g\u00fcvenle daraltmay\u0131, son olarak da Utility Tiplerle mevcut tipleri kolayca d\u00f6n\u00fc\u015ft\u00fcrmeyi \u00f6\u011frendik. Bu konseptlerin her biri, JavaScript'in dinamik yap\u0131s\u0131n\u0131n getirdi\u011fi belirsizlikleri ortadan kald\u0131rarak, projelerinizde daha az hata, daha iyi okunabilirlik ve daha kolay bak\u0131m imkan\u0131 sunar.<\/p>\n TypeScript sadece statik tip denetimi sa\u011flamakla kalmaz, ayn\u0131 zamanda kodunuzun bir nevi canl\u0131 dok\u00fcmantasyonu haline gelir. Fonksiyonel programlama prensipleriyle birle\u015fti\u011finde veya nesne y\u00f6nelimli bir mimariyle kullan\u0131ld\u0131\u011f\u0131nda, TypeScript'in bu \u00f6zellikleri kodunuzu bir sonraki seviyeye ta\u015f\u0131r. Unutmay\u0131n, temiz kod yazmak bir sanat oldu\u011fu kadar bir disiplindir de. Bu makalede \u00f6\u011frendi\u011finiz ara\u00e7lar\u0131 ve teknikleri prati\u011fe d\u00f6kerek, kendi projelerinizde de g\u00f6zle g\u00f6r\u00fcl\u00fcr bir fark yaratabilirsiniz. Geli\u015ftirme s\u00fcrecinizde bu konseptleri bilin\u00e7li bir \u015fekilde uygulad\u0131k\u00e7a, daha g\u00fcvenilir, daha h\u0131zl\u0131 ve daha keyifli bir kodlama deneyimi ya\u015fayacaks\u0131n\u0131z.<\/p>\n A\u015fa\u011f\u0131da, TypeScript'in temiz kod yazma pratikleriyle ilgili s\u0131k\u00e7a kar\u015f\u0131la\u015f\u0131lan baz\u0131 sorular\u0131 ve yan\u0131tlar\u0131n\u0131 bulabilirsiniz:<\/p>\n TypeScript'in temel prensiplerini \u00f6\u011frenmek, JavaScript bilginize ba\u011fl\u0131 olarak birka\u00e7 g\u00fcnden birka\u00e7 haftaya kadar s\u00fcrebilir. Ancak, \u00f6zellikle orta ve b\u00fcy\u00fck \u00f6l\u00e7ekli projelerde sa\u011flad\u0131\u011f\u0131 tip g\u00fcvenli\u011fi, hata yakalama yetene\u011fi, kod okunabilirli\u011fi ve geli\u015ftirici deneyimi iyile\u015ftirmeleri d\u00fc\u015f\u00fcn\u00fcld\u00fc\u011f\u00fcnde, kesinlikle her saniyesine de\u011fer. Ba\u015flang\u0131\u00e7ta yava\u015flama hissi verse de, uzun vadede \u00e7ok daha h\u0131zl\u0131 ve hatas\u0131z geli\u015ftirme yapman\u0131z\u0131 sa\u011flar.<\/p>\n<\/li>\n \u00c7ok k\u00fc\u00e7\u00fck, tek seferlik script'ler veya h\u0131zl\u0131 prototipleme yap\u0131lan projeler i\u00e7in TypeScript'in kurulum ve tip tan\u0131mlama overhead'i gereksiz olabilir. Ancak, bu durumlar d\u0131\u015f\u0131nda, modern JavaScript geli\u015ftirme ortam\u0131nda TypeScript neredeyse her zaman tercih edilecek bir ara\u00e7t\u0131r. \u00d6zellikle ekip i\u00e7inde \u00e7al\u0131\u015f\u0131yorsan\u0131z veya projenizin \u00f6mr\u00fc uzun olacaksa, TypeScript'in sa\u011flad\u0131\u011f\u0131 faydalar katlanarak artar.<\/p>\n<\/li>\n Hay\u0131r, TypeScript derleme (transpilation) a\u015famas\u0131nda tipleri kontrol eder ve sonunda saf JavaScript koduna d\u00f6n\u00fc\u015ft\u00fcr\u00fcl\u00fcr. \u00c7al\u0131\u015fma zaman\u0131nda (runtime) tip bilgisi kalmaz. Bu nedenle, TypeScript'in do\u011frudan \u00e7al\u0131\u015fma zaman\u0131 performans\u0131na herhangi bir olumsuz etkisi yoktur. Performans, yazd\u0131\u011f\u0131n\u0131z JavaScript kodunun kalitesine ba\u011fl\u0131d\u0131r.<\/p>\n<\/li>\n TypeScript, dinamik verileri y\u00f6netmek i\u00e7in m\u00fckemmel ara\u00e7lar sunar. \u00d6ncelikle, bekledi\u011finiz verinin yap\u0131s\u0131n\u0131 temsil eden aray\u00fczler veya tipler tan\u0131mlamal\u0131s\u0131n\u0131z. Ard\u0131ndan, gelen veriyi bu tiplere atarken, <\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Modern web geli\u015ftirme d\u00fcnyas\u0131nda, b\u00fcy\u00fcyen projelerin karma\u015f\u0131kl\u0131\u011f\u0131yla ba\u015fa \u00e7\u0131kmak ve kod kalitesini korumak hi\u00e7 bu kadar \u00f6nemli olmam\u0131\u015ft\u0131.…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-33009","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\ntypeof<\/code> operat\u00f6r\u00fc ile u\u011fra\u015fmam\u0131z gerekirdi, bu da kod kalabal\u0131\u011f\u0131na ve hataya a\u00e7\u0131k durumlara yol a\u00e7ard\u0131. TypeScript ile bu senaryoyu \u00e7ok daha zarif bir \u015fekilde y\u00f6netebiliriz:<\/p>\n\ntype UserID = number | string;\n\nfunction getUser(id: UserID) {\n if (typeof id === \"number\") {\n console.log(Numeric ID ile kullan\u0131c\u0131 getiriliyor: ${id}<\/code>);\n } else {\n console.log(String ID ile kullan\u0131c\u0131 getiriliyor: ${id}<\/code>);\n }\n}\n\ngetUser(123); \/\/ Numeric ID ile kullan\u0131c\u0131 getiriliyor: 123\ngetUser(\"abc-123\"); \/\/ String ID ile kullan\u0131c\u0131 getiriliyor: abc-123\n\/\/ getUser(true); \/\/ Hata: 'boolean' tipi 'UserID' tipine atanmaz.\n <\/pre>\nUserID<\/code> tipini number<\/code> ve string<\/code> tiplerinin birle\u015fimi olarak tan\u0131mlad\u0131k. Bu sayede getUser<\/code> fonksiyonu, hem say\u0131sal hem de string ID'leri g\u00fcvenli bir \u015fekilde kabul edebilir. \u0130\u00e7eride ise typeof<\/code> kontrol\u00fc yaparak, TypeScript'in tip daraltma (type narrowing) \u00f6zelli\u011fi sayesinde, ID'nin hangi tip oldu\u011funu anlar\u0131z ve ilgili i\u015flemleri ger\u00e7ekle\u015ftiririz. Bu, \u00f6zellikle farkl\u0131 veri kaynaklar\u0131ndan gelen veya de\u011fi\u015fen API yan\u0131tlar\u0131n\u0131 i\u015flerken b\u00fcy\u00fck avantaj sa\u011flar. Union tipleri, esnekli\u011fi korurken tip g\u00fcvenli\u011finden \u00f6d\u00fcn vermememizi sa\u011flar.<\/p>\nIntersection Tipleri: Ve Mant\u0131\u011f\u0131yla \u00d6zellikleri Birle\u015ftirerek Yeni Tipler Yaratmak Nas\u0131l Olur?<\/h3>\n
\ninterface User {\n id: UserID;\n name: string;\n}\n\ninterface HasLogging {\n log(message: string): void;\n}\n\ntype LoggableUser = User & HasLogging;\n\nconst adminUser: LoggableUser = {\n id: 1,\n name: \"Admin\",\n log: (message: string) => {\n console.log([LOG - Admin]: ${message}<\/code>);\n }\n};\n\nadminUser.log(\"Kullan\u0131c\u0131 giri\u015fi ba\u015far\u0131l\u0131.\");\n\/\/ console.log(adminUser.email); \/\/ Hata: 'email' \u00f6zelli\u011fi 'LoggableUser' tipinde yok.\n <\/pre>\nUser<\/code> ve HasLogging<\/code> aray\u00fczlerini birle\u015ftirerek LoggableUser<\/code> ad\u0131nda yeni bir tip olu\u015fturduk. LoggableUser<\/code> tipi, hem User<\/code>'\u0131n id<\/code> ve name<\/code> \u00f6zelliklerine hem de HasLogging<\/code>'in log<\/code> metoduna sahiptir. Bu sayede, kodu daha anlaml\u0131 ve mod\u00fcler par\u00e7alara ay\u0131rabiliriz. \u00d6rne\u011fin, bir kullan\u0131c\u0131n\u0131n sadece temel bilgilerini (User) veya ayn\u0131 zamanda bir g\u00fcnl\u00fc\u011fe kay\u0131t tutma yetene\u011fini (LoggableUser) tan\u0131mlayabiliriz. Bu yakla\u015f\u0131m, \u00f6zellikle b\u00fcy\u00fck projelerde farkl\u0131 \u00f6zellik setlerine sahip nesneleri y\u00f6netirken kod tekrar\u0131n\u0131 azalt\u0131r ve tiplerin daha net anla\u015f\u0131lmas\u0131n\u0131 sa\u011flar.<\/p>\nProduct<\/code> tipi olabilir, ancak dijital \u00fcr\u00fcnler i\u00e7in DigitalProduct<\/code> (dosya boyutu, indirme linki gibi), fiziksel \u00fcr\u00fcnler i\u00e7in PhysicalProduct<\/code> (a\u011f\u0131rl\u0131k, boyut gibi) gibi ek \u00f6zelliklere ihtiyac\u0131n\u0131z olabilir. Bu durumda, Product & DigitalProduct<\/code> veya Product & PhysicalProduct<\/code> gibi Intersection tipleri kullanarak esnek ve tip g\u00fcvenli yap\u0131lar olu\u015fturabilirsiniz. Bu, hem geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r hem de olas\u0131 hatalar\u0131n \u00f6n\u00fcne ge\u00e7er. Bu tiplerin do\u011fru kullan\u0131m\u0131, kodunuzun mimarisini g\u00fc\u00e7lendirerek daha temiz ve bak\u0131m\u0131 kolay bir yap\u0131ya sahip olman\u0131z\u0131 sa\u011flar.<\/p>\n2. Konsept: Generics Kullanarak Tekrar Kullan\u0131labilir ve G\u00fcvenli Bile\u015fenler Nas\u0131l Olu\u015fturulur?<\/h2>\n
Neden Generics'e \u0130htiya\u00e7 Duyar\u0131z? Tip G\u00fcvenli\u011fini Korumak \u0130\u00e7in Tekrar Kullan\u0131labilirlik<\/h3>\n
\nfunction reverseNumbers(arr: number[]): number[] {\n return arr.reverse();\n}\n\nfunction reverseStrings(arr: string[]): string[] {\n return arr.reverse();\n}\n <\/pre>\n\nfunction reverseArrayT<\/code>'nin bir \"tip parametresi\" oldu\u011funu belirtir. reverseArray<\/code> fonksiyonunu \u00e7a\u011f\u0131rd\u0131\u011f\u0131m\u0131zda, TypeScript otomatik olarak T<\/code>'nin o \u00e7a\u011fr\u0131daki tipini (\u00f6rne\u011fin number<\/code> veya string<\/code>) \u00e7\u0131kar\u0131r. Bu sayede, tek bir fonksiyon implementasyonuyla farkl\u0131 tipler i\u00e7in tip g\u00fcvenli\u011fini koruyarak \u00e7al\u0131\u015fabiliriz. Bu, \u00f6zellikle veri yap\u0131lar\u0131 (linked list, stack, queue) veya utility fonksiyonlar\u0131 (veri d\u00f6n\u00fc\u015ft\u00fcrme, filtreleme) yazarken paha bi\u00e7ilmez bir \u00f6zelliktir.<\/p>\nGenerics ile K\u0131s\u0131tlamalar (
extends<\/code> Anahtar Kelimesi) Nas\u0131l Kullan\u0131l\u0131r?<\/h3>\nextends<\/code> anahtar kelimesiyle generic tiplere k\u0131s\u0131tlamalar ekleyebiliriz:<\/p>\n\nfunction getPropertyK extends keyof T<\/code> ifadesiyle K<\/code> tip parametresinin, T<\/code> tipinin anahtarlar\u0131ndan (yani \u00f6zellik isimlerinden) biri olmas\u0131 gerekti\u011fini belirtiyoruz. Bu k\u0131s\u0131tlama sayesinde, getProperty<\/code> fonksiyonunu \u00e7a\u011f\u0131r\u0131rken sadece user<\/code> objesinde ger\u00e7ekten var olan anahtarlar\u0131 kullanabiliriz. Bu, tip g\u00fcvenli\u011fini daha da art\u0131r\u0131r ve hatal\u0131 anahtar eri\u015fimlerini derleme zaman\u0131nda yakalamam\u0131z\u0131 sa\u011flar. Bu t\u00fcr k\u0131s\u0131tlamalar, \u00f6zellikle ORM (Object-Relational Mapping) k\u00fct\u00fcphaneleri veya veri manip\u00fclasyonu yapan yard\u0131mc\u0131 fonksiyonlar geli\u015ftirirken hayati \u00f6neme sahiptir.<\/p>\nfetchDataT<\/code> tipine g\u00f6re otomatik olarak tiplendirir ve b\u00f6ylece kodunuzu hem okunabilir hem de son derece tekrar kullan\u0131labilir hale getirir. Generics, mod\u00fcler ve bak\u0131m\u0131 kolay kod tabanlar\u0131 olu\u015fturman\u0131n temel ta\u015flar\u0131ndan biridir. Tip sisteminin esnekli\u011fini art\u0131r\u0131rken, geli\u015ftirici deneyimini de \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirir.<\/p>\n3. Konsept: Type Guards ve Discriminated Unions ile \u00c7al\u0131\u015fma Zaman\u0131nda Tipleri Nas\u0131l Daralt\u0131r\u0131z?<\/h2>\n
Type Guards: Runtime'da Tipleri G\u00fcvenli Bir \u015eekilde Daraltma<\/h3>\n
\n
typeof<\/code>: Primitif tipler (string<\/code>, number<\/code>, boolean<\/code>, symbol<\/code>, undefined<\/code>, bigint<\/code>) i\u00e7in kullan\u0131l\u0131r.<\/li>\ninstanceof<\/code>: Bir nesnenin belirli bir s\u0131n\u0131f\u0131n \u00f6rne\u011fi olup olmad\u0131\u011f\u0131n\u0131 kontrol eder.<\/li>\nin<\/code> operat\u00f6r\u00fc: Bir nesnenin belirli bir \u00f6zelli\u011fe sahip olup olmad\u0131\u011f\u0131n\u0131 kontrol eder.<\/li>\ntypeof<\/code> \u00f6rne\u011fine bakal\u0131m:<\/p>\n\nfunction printId(id: number | string) {\n if (typeof id === \"string\") {\n \/\/ Bu blokta 'id' kesinlikle string tipindedir.\n console.log(id.toUpperCase()); \/\/ String metotlar\u0131n\u0131 g\u00fcvenle kullanabiliriz.\n } else {\n \/\/ Bu blokta 'id' kesinlikle number tipindedir.\n console.log(id * 2); \/\/ Say\u0131sal i\u015flemleri g\u00fcvenle yapabiliriz.\n }\n}\n\nprintId(101); \/\/ 202\nprintId(\"202_ABC\"); \/\/ 202_ABC\n <\/pre>\ntypeof id === \"string\"<\/code> kontrol\u00fc, if<\/code> blo\u011fu i\u00e7inde id<\/code>'nin tipini string<\/code> olarak daralt\u0131r. Bu sayede, TypeScript bize string<\/code> tipli metotlar\u0131 (\u00f6rne\u011fin toUpperCase()<\/code>) g\u00fcvenle kullanabilece\u011fimiz konusunda g\u00fcvence verir. Aksi takdirde, id<\/code>'nin number<\/code> oldu\u011fu anla\u015f\u0131l\u0131r ve say\u0131sal i\u015flemler yap\u0131labilir.<\/p>\nparameterName is Type<\/code> \u015feklinde bir ifade kullan\u0131r:<\/p>\n\ninterface Bird {\n fly(): void;\n layEggs(): void;\n}\n\ninterface Fish {\n swim(): void;\n layEggs(): void;\n}\n\nfunction isBird(pet: Bird | Fish): pet is Bird {\n return (pet as Bird).fly !== undefined;\n}\n\nfunction getPetAction(pet: Bird | Fish) {\n if (isBird(pet)) {\n pet.fly(); \/\/ Bu blokta 'pet' kesinlikle Bird tipindedir.\n } else {\n pet.swim(); \/\/ Bu blokta 'pet' kesinlikle Fish tipindedir.\n }\n}\n <\/pre>\nisBird<\/code> fonksiyonu, ald\u0131\u011f\u0131 pet<\/code> parametresinin Bird<\/code> tipinde olup olmad\u0131\u011f\u0131n\u0131 kontrol eden bir tip koruyucudur. E\u011fer isBird<\/code> true<\/code> d\u00f6nerse, TypeScript o kod blo\u011fu i\u00e7inde pet<\/code>'in tipini Bird<\/code> olarak daralt\u0131r.<\/p>\nDiscriminated Unions: Ortak Bir \u00d6zellik \u00dczerinden Tipleri Ay\u0131rma<\/h3>\n
\ninterface SuccessResponse {\n status: \"success\";\n data: any;\n}\n\ninterface ErrorResponse {\n status: \"error\";\n message: string;\n errorCode?: number;\n}\n\ntype APIResponse = SuccessResponse | ErrorResponse;\n\nfunction handleResponse(response: APIResponse) {\n if (response.status === \"success\") {\n \/\/ Bu blokta 'response' kesinlikle SuccessResponse tipindedir.\n console.log(\"Veri ba\u015far\u0131yla al\u0131nd\u0131:\", response.data);\n } else {\n \/\/ Bu blokta 'response' kesinlikle ErrorResponse tipindedir.\n console.log(\"Hata olu\u015ftu:\", response.message, response.errorCode);\n }\n}\n\nhandleResponse({ status: \"success\", data: { user: \"Ahmet\" } });\nhandleResponse({ status: \"error\", message: \"Yetkisiz eri\u015fim\", errorCode: 401 });\n <\/pre>\nstatus<\/code> \u00f6zelli\u011fi bizim ay\u0131r\u0131c\u0131m\u0131zd\u0131r. response.status === \"success\"<\/code> kontrol\u00fc yap\u0131ld\u0131\u011f\u0131nda, TypeScript, response<\/code> objesinin SuccessResponse<\/code> tipinde oldu\u011funu anlar ve data<\/code> \u00f6zelli\u011fine g\u00fcvenli bir \u015fekilde eri\u015febiliriz. Aksi takdirde, response<\/code>'un ErrorResponse<\/code> tipinde oldu\u011fu varsay\u0131l\u0131r ve message<\/code> ile errorCode<\/code> \u00f6zelliklerine eri\u015fim sa\u011flan\u0131r. Bu yakla\u015f\u0131m, switch<\/code> ifadeleriyle birlikte kullan\u0131ld\u0131\u011f\u0131nda \u00f6zellikle g\u00fc\u00e7l\u00fcd\u00fcr ve hatalar\u0131 derleme zaman\u0131nda yakalayarak \u00e7ok daha g\u00fcvenli ve okunakl\u0131 bir kod yap\u0131s\u0131 olu\u015fturur.<\/p>\nNotification<\/code> tipi tan\u0131mlay\u0131p, type<\/code> veya variant<\/code> gibi bir ay\u0131r\u0131c\u0131 \u00f6zellik \u00fczerinden bildirimleri g\u00fcvenli bir \u015fekilde i\u015fleyebilirsiniz. Bu, bile\u015feninizi hem esnek hem de tip g\u00fcvenli hale getirir, b\u00f6ylece yanl\u0131\u015f bir \u00f6zelli\u011fe eri\u015fmeye \u00e7al\u0131\u015fmaktan kaynaklanan \u00e7al\u0131\u015fma zaman\u0131 hatalar\u0131n\u0131 ortadan kald\u0131r\u0131r.<\/p>\nswitch<\/code> ifadelerinde Discriminated Unions kullan\u0131rken, t\u00fcm olas\u0131 durumlar\u0131 kapsad\u0131\u011f\u0131n\u0131zdan emin olmak i\u00e7in never<\/code> tipini kullanabilirsiniz. E\u011fer t\u00fcm durumlar\u0131 ele almazsan\u0131z, TypeScript sizi uyaracakt\u0131r, bu da eksik durumlar\u0131 yakalamak i\u00e7in harika bir yoldur.\n <\/p><\/blockquote>\n4. Konsept: Utility Tiplerle Mevcut Tipleri D\u00f6n\u00fc\u015ft\u00fcrerek Geli\u015ftirme S\u00fcrecini Nas\u0131l H\u0131zland\u0131r\u0131r\u0131z?<\/h2>\n
Neden Utility Tipler Geli\u015ftirici Deneyimini \u0130yile\u015ftirir?<\/h3>\n
User<\/code> aray\u00fcz\u00fcn\u00fcz olabilir. Ancak, profili d\u00fczenleme formunda sadece baz\u0131 alanlar\u0131n g\u00fcncellenebilir olmas\u0131n\u0131 isteyebilirsiniz veya API'ye g\u00f6nderilecek verilerin sadece belirli alanlar\u0131 i\u00e7ermesini isteyebilirsiniz. Bu t\u00fcr senaryolarda, User<\/code> aray\u00fcz\u00fcnden yeni tipler t\u00fcretmek i\u00e7in Utility tiplerini kullan\u0131r\u0131z.<\/p>\nPartialPartialT<\/code> tipindeki t\u00fcm \u00f6zelliklerin iste\u011fe ba\u011fl\u0131 (optional) hale getirilmi\u015f yeni bir tip olu\u015fturur. Bu, \u00f6zellikle bir nesnenin k\u0131smi g\u00fcncellemelerini i\u015flerken \u00e7ok kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n\ninterface UserProfile {\n id: number;\n name: string;\n email: string;\n bio?: string;\n}\n\n\/\/ Bir kullan\u0131c\u0131n\u0131n profilini g\u00fcncellerken sadece baz\u0131 alanlar\u0131 g\u00f6nderebiliriz.\ntype PartialUserProfile = PartialPartialUserProfile<\/code> tipi, UserProfile<\/code>'daki t\u00fcm alanlar\u0131 iste\u011fe ba\u011fl\u0131 yapar. Bu, bir API'ye sadece de\u011fi\u015fen alanlar\u0131 g\u00f6ndermemizi sa\u011flayan bir PATCH iste\u011fi i\u00e7in m\u00fckemmeldir.<\/p>\nPickOmitPickT<\/code> tipinden yaln\u0131zca K<\/code> taraf\u0131ndan belirtilen \u00f6zellikleri se\u00e7erek yeni bir tip olu\u015fturur. OmitT<\/code> tipinden K<\/code> taraf\u0131ndan belirtilen \u00f6zellikleri hari\u00e7 tutarak yeni bir tip olu\u015fturur. Bu ikili, bir nesnenin belirli bir alt k\u00fcmesini temsil etmek istedi\u011fimizde \u00e7ok g\u00fc\u00e7l\u00fcd\u00fcr.<\/p>\n\ninterface Product {\n id: string;\n name: string;\n price: number;\n description: string;\n category: string;\n stock: number;\n}\n\n\/\/ Sadece \u00fcr\u00fcn\u00fcn temel bilgilerini i\u00e7eren bir tip.\ntype ProductSummary = PickPick<\/code> ve Omit<\/code> sayesinde, Product<\/code> gibi karma\u015f\u0131k bir tipin farkl\u0131 kullan\u0131m senaryolar\u0131 i\u00e7in \u00f6zelle\u015ftirilmi\u015f, daha k\u00fc\u00e7\u00fck ve daha odakl\u0131 tipler olu\u015fturabiliriz. Bu, \u00f6zellikle farkl\u0131 API endpoint'leri i\u00e7in request veya response payload'lar\u0131 tan\u0131mlarken kod tekrar\u0131n\u0131 b\u00fcy\u00fck \u00f6l\u00e7\u00fcde azalt\u0131r.<\/p>\nReadonlyReadonlyT<\/code> tipindeki t\u00fcm \u00f6zelliklerin salt okunur (immutable) oldu\u011fu yeni bir tip olu\u015fturur. Bu, bir nesnenin i\u00e7eri\u011finin de\u011fi\u015ftirilmemesini garanti etmek istedi\u011fimizde, \u00f6zellikle fonksiyon parametreleri veya state y\u00f6netimi (\u00f6rne\u011fin Redux) ba\u011flam\u0131nda \u00e7ok kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n\ninterface Point {\n x: number;\n y: number;\n}\n\ntype ReadonlyPoint = Readonlyorigin<\/code> nesnesinin x<\/code> ve y<\/code> \u00f6zellikleri hi\u00e7bir zaman beklenmedik bir \u015fekilde de\u011fi\u015ftirilemez. Bu, yan etkileri (side effects) \u00f6nlemeye yard\u0131mc\u0131 olur ve kodunuzun \u00f6ng\u00f6r\u00fclebilirli\u011fini art\u0131r\u0131r.<\/p>\nReadonlyinfer<\/code> anahtar kelimesiyle geli\u015fmi\u015f tip manip\u00fclasyonlar\u0131 yaparak mevcut tiplerden dinamik olarak yeni tipler \u00e7\u0131karabilirsiniz. Bu, TypeScript'in tip sisteminin ne kadar esnek ve g\u00fc\u00e7l\u00fc oldu\u011funun bir g\u00f6stergesidir.\n <\/p><\/blockquote>\nGeli\u015ftirici \u0130pu\u00e7lar\u0131 ve \u0130leri Seviye Uygulamalar: Kodunuzu Bir Sonraki Seviyeye Ta\u015f\u0131mak \u0130\u00e7in Neler Yapmal\u0131s\u0131n\u0131z?<\/h2>\n
Tutarl\u0131l\u0131k \u0130\u00e7in Linting ve Bi\u00e7imlendirme Ara\u00e7lar\u0131<\/h3>\n
@typescript-eslint\/eslint-plugin<\/code>), tip g\u00fcvenli\u011fini ihlal eden durumlar\u0131 veya TypeScript'in \u00f6nerdi\u011fi en iyi pratikleri takip etmeyen kodlar\u0131 yakalamak i\u00e7in harika bir yoldur.<\/p>\ntsconfig.json<\/code> Ayarlar\u0131: Projenizin Omurgas\u0131<\/h3>\ntsconfig.json<\/code> dosyas\u0131, TypeScript projenizin kalbidir. Derleyici davran\u0131\u015f\u0131n\u0131, mod\u00fcl \u00e7\u00f6z\u00fcmlemesini, tip denetimi seviyesini ve daha fazlas\u0131n\u0131 kontrol eder. \u00d6zellikle \u015fu ayarlara dikkat etmek, daha temiz ve g\u00fcvenli kod yazman\u0131za yard\u0131mc\u0131 olabilir:<\/p>\n\n
\"strict\": true<\/code>: Bu ayar, TypeScript'in t\u00fcm kat\u0131 tip denetimlerini etkinle\u015ftirir. null<\/code> ve undefined<\/code> kontrolleri (strictNullChecks<\/code>), parametrelerdeki any<\/code> tipinin infer edilmesini engelleme (noImplicitAny<\/code>) gibi kontrolleri i\u00e7erir. Bu, ba\u015flang\u0131\u00e7ta biraz zorlay\u0131c\u0131 olsa da, uzun vadede \u00e7ok daha az runtime hatas\u0131 demektir.<\/li>\n\"noUnusedLocals\": true<\/code> ve \"noUnusedParameters\": true<\/code>: Kullan\u0131lmayan de\u011fi\u015fkenleri veya fonksiyon parametrelerini tespit ederek \u00f6l\u00fc kodu (dead code) temizlemenize yard\u0131mc\u0131 olur.<\/li>\n\"forceConsistentCasingInFileNames\": true<\/code>: Farkl\u0131 i\u015fletim sistemlerinde sorun yaratabilecek dosya yolu tutars\u0131zl\u0131klar\u0131n\u0131 engeller.<\/li>\n<\/ul>\nMonorepo'larda Tip Y\u00f6netimi ve Payla\u015f\u0131lan Paketler<\/h3>\n
references<\/code> \u00f6zelli\u011fi ve composite<\/code> flag'\u0131, monorepo'larda projeler aras\u0131 tip ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 y\u00f6netmek i\u00e7in TypeScript'in yerle\u015fik \u00e7\u00f6z\u00fcmleridir. Bu, her paketin kendi ba\u011f\u0131ms\u0131z tip sistemine sahip olmas\u0131n\u0131 ve di\u011fer paketlerle etkile\u015fim kurarken tip g\u00fcvenli\u011finin korunmas\u0131n\u0131 sa\u011flar.<\/p>\nModern Web Tasar\u0131m Prensipleri ve TypeScript Entegrasyonu<\/h3>\n
media query<\/code>'leri gibi duyarl\u0131 tasar\u0131m teknikleriyle birlikte \u00e7al\u0131\u015ft\u0131\u011f\u0131nda, uygulaman\u0131z\u0131n farkl\u0131 cihazlarda tutarl\u0131 bir deneyim sunmas\u0131na olanak tan\u0131r. \u00d6rne\u011fin, belirli bir breakpoint'ten sonra g\u00f6sterilecek veya gizlenecek bile\u015fenlerin props'lar\u0131 \u00fczerinde tip denetimi yaparak, geli\u015ftirme esnas\u0131nda olas\u0131 hatalar\u0131 \u00f6nleyebilirsiniz.<\/p>\nSonu\u00e7: TypeScript ile Daha Temiz ve Bak\u0131m\u0131 Kolay Kod Yazman\u0131n Anahtarlar\u0131 Elinizde!<\/h2>\n
S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n
\n
TypeScript \u00f6\u011frenmek ne kadar s\u00fcrer ve bu \u00e7abaya de\u011fer mi?<\/h4>\n
Hangi durumlarda TypeScript kullanmaktan ka\u00e7\u0131nmal\u0131y\u0131m?<\/h4>\n
TypeScript ile yazd\u0131\u011f\u0131m kodun performansa etkisi olur mu?<\/h4>\n
Dinamik tipli verilerle (\u00f6rne\u011fin API'dan gelen veri) TypeScript nas\u0131l kullan\u0131l\u0131r?<\/h4>\n
Type Guards<\/code>, Discriminated Unions<\/code> veya hatta do\u011frulama (validation) k\u00fct\u00fcphaneleri ile birlikte kullanabilirsiniz. Bu, gelen verinin beklenen yap\u0131da olup olmad\u0131\u011f\u0131n\u0131 \u00e7al\u0131\u015fma zaman\u0131nda kontrol etmenizi ve kodunuzu buna g\u00f6re tip g\u00fcvenli bir \u015fekilde y\u00f6nlendirmenizi sa\u011flar.<\/p>\n<\/li>\n<\/ul>\n