JavaScript ekosisteminin h\u0131zla geli\u015fen d\u00fcnyas\u0131nda, projelerin karma\u015f\u0131kl\u0131\u011f\u0131 artt\u0131k\u00e7a, geli\u015ftiricilerin daha g\u00fcvenilir ve bak\u0131m\u0131 kolay kod yazma ihtiyac\u0131 da art\u0131yor. \u0130\u015fte tam bu noktada TypeScript devreye giriyor. TypeScript, JavaScript’e statik tip denetimi ekleyerek, hatalar\u0131 derleme zaman\u0131nda yakalamam\u0131z\u0131, kodun okunabilirli\u011fini art\u0131rmam\u0131z\u0131 ve b\u00fcy\u00fck \u00f6l\u00e7ekli uygulamalar\u0131n y\u00f6netimini kolayla\u015ft\u0131rmam\u0131z\u0131 sa\u011flar. Bir JavaScript geli\u015ftiricisi olarak TypeScript’in sundu\u011fu t\u00fcm bu avantajlardan tam anlam\u0131yla faydalanmak i\u00e7in belirli al\u0131\u015fkanl\u0131klar edinmek kritik \u00f6neme sahiptir. Bu makalede, her JavaScript geli\u015ftiricisinin benimsemesi gereken 10 temel TypeScript al\u0131\u015fkanl\u0131\u011f\u0131n\u0131 ve bu al\u0131\u015fkanl\u0131klar\u0131n kod kalitenizi nas\u0131l d\u00f6n\u00fc\u015ft\u00fcrece\u011fini detayl\u0131 bir \u015fekilde inceleyece\u011fiz.<\/p>\n
TypeScript’in en temel faydas\u0131, kodunuza tip g\u00fcvenli\u011fi getirmesidir. Bu, de\u011fi\u015fkenlerin, fonksiyon parametrelerinin ve d\u00f6n\u00fc\u015f de\u011ferlerinin belirli bir tipte olmas\u0131n\u0131 sa\u011flayarak beklenmedik hatalar\u0131 \u00f6nler. Bu al\u0131\u015fkanl\u0131klar, TypeScript yolculu\u011funuzun ilk ad\u0131mlar\u0131 olmal\u0131d\u0131r.<\/p>\n
JavaScript’te de\u011fi\u015fkenleri genellikle <\/code><\/p>\n Bu basit al\u0131\u015fkanl\u0131k, kodunuzu daha \u00f6ng\u00f6r\u00fclebilir hale getirir ve geli\u015ftirme s\u00fcrecinde size \u00f6nemli zaman kazand\u0131r\u0131r.<\/p>\n Uygulamalar b\u00fcy\u00fcd\u00fck\u00e7e, nesnelerin ve veri yap\u0131lar\u0131n\u0131n karma\u015f\u0131kl\u0131\u011f\u0131 da artar. TypeScript'teki <\/code><\/p>\n Aray\u00fczler ve tipler, \u00f6zellikle API yan\u0131tlar\u0131n\u0131 veya karma\u015f\u0131k veri modellerini tan\u0131mlarken vazge\u00e7ilmezdir. Kodunuzun belgelendirilmesine de b\u00fcy\u00fck katk\u0131 sa\u011flarlar.<\/p>\n TypeScript sadece temel tiplerle s\u0131n\u0131rl\u0131 de\u011fildir. Geli\u015fmi\u015f tiplendirme teknikleri, daha esnek, yeniden kullan\u0131labilir ve g\u00fc\u00e7l\u00fc tip tan\u0131mlar\u0131 olu\u015fturman\u0131za olanak tan\u0131r.<\/p>\n Bazen bir de\u011fi\u015fkenin birden fazla tipe sahip olabilece\u011fi veya bir nesnenin birden fazla aray\u00fcz\u00fcn \u00f6zelliklerini ta\u015f\u0131mas\u0131 gerekti\u011fi durumlar olur. <\/code><\/p>\n Bu tipler, kodunuzun daha esnek olmas\u0131n\u0131 sa\u011flarken tip g\u00fcvenli\u011finden \u00f6d\u00fcn vermemenizi sa\u011flar.<\/p>\n Generic'ler, TypeScript'in en g\u00fc\u00e7l\u00fc \u00f6zelliklerinden biridir. Fonksiyonlar\u0131, s\u0131n\u0131flar\u0131 veya aray\u00fczleri, belirli bir tip yerine bir \"tip de\u011fi\u015fkeni\" ile \u00e7al\u0131\u015facak \u015fekilde tan\u0131mlaman\u0131za olanak tan\u0131r. Bu sayede, farkl\u0131 tiplerle \u00e7al\u0131\u015fabilen yeniden kullan\u0131labilir ve tip-g\u00fcvenli bile\u015fenler olu\u015fturabilirsiniz.<\/p>\n <\/code><\/p>\n Generic'ler, \u00f6zellikle veri yap\u0131lar\u0131 (listeler, kuyruklar), API istemcileri ve UI bile\u015fenleri gibi genel ama\u00e7l\u0131 kod yazarken \u00e7ok faydal\u0131d\u0131r.<\/p>\n TypeScript, kodunuzdaki potansiyel hatalar\u0131 azaltmak i\u00e7in \u00e7e\u015fitli mekanizmalar sunar. Bu al\u0131\u015fkanl\u0131klar, uygulaman\u0131z\u0131n daha sa\u011flam olmas\u0131n\u0131 sa\u011flar.<\/p>\n <\/code><\/p>\n TypeScript derleme zaman\u0131nda tip kontrol\u00fc yaparken, bazen \u00e7al\u0131\u015fma zaman\u0131nda bir de\u011fi\u015fkenin tipini daraltman\u0131z gerekebilir. <\/code><\/p>\n Type Guard'lar, \u00f6zellikle union tipleriyle \u00e7al\u0131\u015f\u0131rken veya dinamik verileri i\u015flerken kodunuzu daha g\u00fcvenli ve hatas\u0131z hale getirir.<\/p>\n TypeScript'in tip sistemini kullanman\u0131n amac\u0131 tip g\u00fcvenli\u011fi sa\u011flamakt\u0131r. Bunun yerine, bilmedi\u011finiz bir tipteki de\u011feri temsil etmek i\u00e7in <\/code><\/p>\n TypeScript'in g\u00fcc\u00fcnden tam olarak yararlanmak i\u00e7in, derleyici ayarlar\u0131n\u0131z\u0131 do\u011fru yap\u0131land\u0131rmak ve JavaScript ekosistemiyle entegrasyonu sa\u011flamak \u00f6nemlidir.<\/p>\n \u00d6zellikle a\u015fa\u011f\u0131daki se\u00e7enekleri etkinle\u015ftirmek, daha kat\u0131 bir tip denetimi sa\u011flar ve erken hatalar\u0131 yakalaman\u0131za yard\u0131mc\u0131 olur:<\/p>\n <\/code><\/p>\nlet<\/code> veya const<\/code> ile tan\u0131mlar\u0131z ve tipleri \u00e7al\u0131\u015fma zaman\u0131nda belirlenir. TypeScript’te ise de\u011fi\u015fkenlere, fonksiyon parametrelerine ve d\u00f6n\u00fc\u015f de\u011ferlerine a\u00e7\u0131k\u00e7a tip atamak, kodunuzun ne bekledi\u011fini ve ne d\u00f6nd\u00fcrd\u00fc\u011f\u00fcn\u00fc netle\u015ftirir. Bu, hem sizin hem de ekibinizdeki di\u011fer geli\u015ftiriciler i\u00e7in kodun anla\u015f\u0131l\u0131rl\u0131\u011f\u0131n\u0131 art\u0131r\u0131r ve olas\u0131 tip uyumsuzluklar\u0131n\u0131 derleme an\u0131nda tespit etmenizi sa\u011flar.<\/p>\n\/\/ De\u011fi\u015fken tiplendirme\nlet isim: string = \"Ali Can\";\nlet yas: number = 30;\nlet aktif: boolean = true;\n\n\/\/ Fonksiyon parametreleri ve d\u00f6n\u00fc\u015f de\u011feri tiplendirme\nfunction topla(a: number, b: number): number {\n return a + b;\n}\n\n\/\/ Hatal\u0131 kullan\u0131m \u00f6rne\u011fi (derleme hatas\u0131 verir)\n\/\/ topla(\"merhaba\", 5); \/\/ Argument of type 'string' is not assignable to parameter of type 'number'.\n<\/pre>\nAl\u0131\u015fkanl\u0131k 2: Aray\u00fczler ve Tiplerle Veri Yap\u0131lar\u0131n\u0131 Tan\u0131mlay\u0131n<\/h4>\n
interface<\/code> ve type<\/code> anahtar kelimeleri, bu yap\u0131lar\u0131 tan\u0131mlamak i\u00e7in g\u00fc\u00e7l\u00fc ara\u00e7lar sunar. Bu sayede, uygulaman\u0131zdaki veri ak\u0131\u015f\u0131n\u0131 standartla\u015ft\u0131rabilir ve nesnelerinizin her zaman beklenen yap\u0131da olmas\u0131n\u0131 sa\u011flayabilirsiniz.<\/p>\n\/\/ Aray\u00fcz (Interface) ile nesne yap\u0131s\u0131 tan\u0131mlama\ninterface Kullanici {\n id: number;\n ad: string;\n email: string;\n yas?: number; \/\/ Opsiyonel \u00f6zellik\n adres: {\n sokak: string;\n sehir: string;\n };\n}\n\n\/\/ Type alias ile nesne yap\u0131s\u0131 tan\u0131mlama\ntype Urun = {\n urunId: string;\n ad: string;\n fiyat: number;\n stoktaVarMi: boolean;\n};\n\nconst kullanici1: Kullanici = {\n id: 1,\n ad: \"Ay\u015fe Y\u0131lmaz\",\n email: \"ayse@example.com\",\n adres: {\n sokak: \"Deneme Sok. No:1\",\n sehir: \"\u0130stanbul\",\n },\n};\n\nconst urun1: Urun = {\n urunId: \"P101\",\n ad: \"Kablosuz Klavye\",\n fiyat: 250.00,\n stoktaVarMi: true,\n};\n<\/pre>\n2. Geli\u015fmi\u015f Tiplendirme Tekniklerini Kullan\u0131n<\/h3>\n
Al\u0131\u015fkanl\u0131k 3: Union ve Intersection Tiplerini Etkin Kullan\u0131n<\/h4>\n
Union Types<\/code> (birle\u015fim tipleri) ve Intersection Types<\/code> (kesi\u015fim tipleri) bu senaryolar i\u00e7in ideal \u00e7\u00f6z\u00fcmler sunar.<\/p>\n\n
|<\/code>):<\/strong> Bir de\u011fi\u015fkenin birden fazla olas\u0131 tipten herhangi birine sahip olabilece\u011fini belirtir.<\/li>\n&<\/code>):<\/strong> Bir nesnenin birden fazla tipin t\u00fcm \u00f6zelliklerini ta\u015f\u0131mas\u0131 gerekti\u011fini belirtir.<\/li>\n<\/ul>\n\/\/ Union Type \u00f6rne\u011fi\ntype Kimlik = string | number;\nlet kullaniciID: Kimlik = 123;\nkullaniciID = \"abc-123\";\n\nfunction islemYap(veri: string | number | boolean) {\n if (typeof veri === \"string\") {\n console.log(\"String veri:\", veri.toUpperCase());\n } else if (typeof veri === \"number\") {\n console.log(\"Say\u0131sal veri:\", veri * 2);\n } else {\n console.log(\"Boolean veri:\", !veri);\n }\n}\n\n\/\/ Intersection Type \u00f6rne\u011fi\ninterface Loglanabilir {\n logla(): void;\n}\n\ninterface Kaydedilebilir {\n kaydet(): void;\n}\n\ntype Islem = Loglanabilir & Kaydedilebilir;\n\nclass VeriIsleyici implements Islem {\n logla() {\n console.log(\"Veri logland\u0131.\");\n }\n kaydet() {\n console.log(\"Veri kaydedildi.\");\n }\n}\n\nconst isleyici = new VeriIsleyici();\nisleyici.logla();\nisleyici.kaydet();\n<\/pre>\nAl\u0131\u015fkanl\u0131k 4: Generic'lerin G\u00fcc\u00fcn\u00fc Ke\u015ffedin<\/h4>\n
\/\/ Generic fonksiyon \u00f6rne\u011fi\nfunction getIlkEleman3. Tip G\u00fcvenli\u011fini Art\u0131r\u0131c\u0131 Mekanizmalar<\/h3>\n
Al\u0131\u015fkanl\u0131k 5: Enum'larla Sabit De\u011ferleri Y\u00f6netin<\/h4>\n
Enum<\/code>'lar (numaraland\u0131rmalar), birbiriyle ili\u015fkili sabit de\u011ferler k\u00fcmesini tan\u0131mlamak i\u00e7in kullan\u0131l\u0131r. JavaScript'te genellikle sabitleri basit nesnelerle veya string literal'lerle y\u00f6netirken, TypeScript enum<\/code>'lar\u0131 ile bu sabitlere tip g\u00fcvenli\u011fi ekleyebilirsiniz. Bu, kodunuzun daha okunabilir olmas\u0131n\u0131 sa\u011flar ve yanl\u0131\u015f de\u011ferlerin kullan\u0131lmas\u0131n\u0131 engeller.<\/p>\n\/\/ Say\u0131sal Enum\nenum Durum {\n Beklemede, \/\/ 0\n Islemde, \/\/ 1\n Tamamlandi \/\/ 2\n}\n\nconsole.log(Durum.Beklemede); \/\/ 0\n\n\/\/ String Enum\nenum Rol {\n Admin = \"ADMIN\",\n Editor = \"EDITOR\",\n Okuyucu = \"OKUYUCU\"\n}\n\nfunction kullaniciYetkisiKontrol(rol: Rol) {\n if (rol === Rol.Admin) {\n console.log(\"Admin yetkileri var.\");\n } else {\n console.log(\"S\u0131n\u0131rl\u0131 yetkiler.\");\n }\n}\n\nkullaniciYetkisiKontrol(Rol.Admin);\n\/\/ kullaniciYetkisiKontrol(\"MANAGER\"); \/\/ Hata: Argument of type '\"MANAGER\"' is not assignable to parameter of type 'Rol'.\n<\/pre>\nEnum<\/code>'lar, \u00f6zellikle durum y\u00f6netimi, yetkilendirme rolleri veya belirli se\u00e7enek k\u00fcmeleri gibi senaryolarda kodunuzu daha temiz ve g\u00fcvenli hale getirir.<\/p>\nAl\u0131\u015fkanl\u0131k 6: Type Guard'larla \u00c7al\u0131\u015fma Zaman\u0131 Kontrol\u00fc<\/h4>\n
Type Guard<\/code>'lar, bu t\u00fcr durumlarda kullan\u0131l\u0131r. typeof<\/code>, instanceof<\/code> operat\u00f6rleri veya \u00f6zel tip koruma fonksiyonlar\u0131 kullanarak, kodunuzun belirli bir blok i\u00e7inde bir de\u011fi\u015fkenin belirli bir tipe sahip oldu\u011funu garantileyebilirsiniz.<\/p>\n\/\/ typeof tabanl\u0131 Type Guard\nfunction isNumber(value: any): value is number {\n return typeof value === 'number';\n}\n\nfunction printId(id: string | number) {\n if (isNumber(id)) {\n console.log(id * 2); \/\/ Burada 'id'nin tipi 'number' olarak daralt\u0131ld\u0131.\n } else {\n console.log(id.toUpperCase()); \/\/ Burada 'id'nin tipi 'string' olarak daralt\u0131ld\u0131.\n }\n}\n\n\/\/ instanceof tabanl\u0131 Type Guard\nclass Kedi {\n miyavla() { console.log(\"Miyav!\"); }\n}\n\nclass Kopek {\n havla() { console.log(\"Hav hav!\"); }\n}\n\ntype Hayvan = Kedi | Kopek;\n\nfunction hayvanSesiCikar(hayvan: Hayvan) {\n if (hayvan instanceof Kedi) {\n hayvan.miyavla();\n } else {\n hayvan.havla();\n }\n}\n\nconst tekir = new Kedi();\nconst karabas = new Kopek();\nhayvanSesiCikar(tekir);\nhayvanSesiCikar(karabas);\n<\/pre>\n4.
any<\/code>'den Uzak Durun, Kontroll\u00fc Yakla\u015f\u0131n<\/h3>\nany<\/code> tipi, bu g\u00fcvenli\u011fi devre d\u0131\u015f\u0131 b\u0131rak\u0131r. Bu nedenle, any<\/code> kullan\u0131m\u0131n\u0131 en aza indirmek kritik bir al\u0131\u015fkanl\u0131kt\u0131r.<\/p>\nAl\u0131\u015fkanl\u0131k 7:
any<\/code> Kullan\u0131m\u0131n\u0131 S\u0131n\u0131rland\u0131r\u0131n, unknown<\/code>'u Tercih Edin<\/h4>\nany<\/code> tipi, bir de\u011fi\u015fkene herhangi bir tipte de\u011fer atanabilece\u011fini ve o de\u011fi\u015fkenin herhangi bir metodu veya \u00f6zelli\u011fine eri\u015filebilece\u011fini belirtir. Bu, TypeScript'in tip denetimini tamamen atlar ve JavaScript'teki dinamik tiplendirmeye geri d\u00f6ner. Bu nedenle, any<\/code> genellikle bir \"ka\u00e7\u0131\u015f kap\u0131s\u0131\" olarak g\u00f6r\u00fcl\u00fcr ve m\u00fcmk\u00fcn oldu\u011funca ka\u00e7\u0131n\u0131lmal\u0131d\u0131r.<\/p>\nunknown<\/code> tipini kullan\u0131n. unknown<\/code>, any<\/code>'ye benzer \u015fekilde her t\u00fcrl\u00fc de\u011feri kabul eder, ancak bu de\u011feri kullanmadan \u00f6nce tipini daraltman\u0131z\u0131 (type guard ile kontrol etmenizi) zorunlu k\u0131lar. Bu, daha g\u00fcvenli bir yakla\u015f\u0131md\u0131r.<\/p>\n\/\/ 'any' kullan\u0131m\u0131 (ka\u00e7\u0131n\u0131lmas\u0131 gereken)\nlet veriAny: any = 10;\nveriAny = \"Merhaba\";\nveriAny.toFixed(); \/\/ \u00c7al\u0131\u015fma zaman\u0131 hatas\u0131 verebilir e\u011fer veriAny string ise\n\n\/\/ 'unknown' kullan\u0131m\u0131 (tercih edilen)\nlet veriUnknown: unknown = 10;\nveriUnknown = \"Merhaba\";\n\n\/\/ veriUnknown.toFixed(); \/\/ Hata: Object is of type 'unknown'.\n\nif (typeof veriUnknown === 'number') {\n console.log(veriUnknown.toFixed(2)); \/\/ G\u00fcvenli kullan\u0131m\n} else if (typeof veriUnknown === 'string') {\n console.log(veriUnknown.toUpperCase()); \/\/ G\u00fcvenli kullan\u0131m\n}\n<\/pre>\nany<\/code> ve unknown<\/code> aras\u0131ndaki fark\u0131 g\u00f6steren basit bir tablo:<\/p>\n\n\n
\n \u00d6zellik<\/th>\n any<\/code><\/th>\nunknown<\/code><\/th>\n<\/tr>\n<\/thead>\n\n\n Herhangi bir de\u011feri kabul eder mi?<\/td>\n Evet<\/td>\n Evet<\/td>\n<\/tr>\n \n \u00d6zelliklere\/metotlara do\u011frudan eri\u015fim?<\/td>\n Evet (tip kontrol\u00fc olmadan)<\/td>\n Hay\u0131r (tip daraltma gerektirir)<\/td>\n<\/tr>\n \n Tip g\u00fcvenli\u011fi sa\u011flar m\u0131?<\/td>\n Hay\u0131r<\/td>\n Evet (kullan\u0131m \u00f6ncesi kontrolle)<\/td>\n<\/tr>\n \n TypeScript'in felsefesiyle uyumlu mu?<\/td>\n Hay\u0131r (ge\u00e7ici \u00e7\u00f6z\u00fcm)<\/td>\n Evet (g\u00fcvenli bir bilinmeyen tip)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n unknown<\/code> kullanarak, bilinmeyen tiplerle \u00e7al\u0131\u015f\u0131rken bile tip g\u00fcvenli\u011fini koruyabilirsiniz.<\/p>\n5. TypeScript Ortam\u0131n\u0131z\u0131 ve Entegrasyonunuzu Optimize Edin<\/h3>\n
Al\u0131\u015fkanl\u0131k 8:
tsconfig.json<\/code> Dosyas\u0131n\u0131 Do\u011fru Yap\u0131land\u0131r\u0131n<\/h4>\ntsconfig.json<\/code> dosyas\u0131, TypeScript derleyicisinin (tsc<\/code>) projenizi nas\u0131l derleyece\u011fini belirleyen ana yap\u0131land\u0131rma dosyas\u0131d\u0131r. Bu dosyay\u0131 do\u011fru bir \u015fekilde yap\u0131land\u0131rmak, projenizin tip g\u00fcvenli\u011fi seviyesini art\u0131rman\u0131n ve geli\u015ftirme s\u00fcrecinizi optimize etmenin anahtar\u0131d\u0131r.<\/p>\n\n
\"strict\": true<\/code>: T\u00fcm kat\u0131 tip denetimi se\u00e7eneklerini etkinle\u015ftirir. Bu, yeni projeler i\u00e7in \u015fiddetle tavsiye edilir.<\/li>\n\"noImplicitAny\": true<\/code>: A\u00e7\u0131k\u00e7a belirtilmemi\u015f tipler i\u00e7in any<\/code> kullan\u0131m\u0131n\u0131 yasaklar.<\/li>\n\"strictNullChecks\": true<\/code>: null<\/code> ve undefined<\/code> de\u011ferlerinin tip sistemine dahil edilmesini sa\u011flar. Bu, null<\/code> veya undefined<\/code> olabilecek de\u011ferleri kullanmadan \u00f6nce kontrol etmenizi zorunlu k\u0131lar.<\/li>\n\"noUnusedLocals\": true<\/code>: Kullan\u0131lmayan yerel de\u011fi\u015fkenler i\u00e7in hata verir.<\/li>\n\"noUnusedParameters\": true<\/code>: Kullan\u0131lmayan fonksiyon parametreleri i\u00e7in hata verir.<\/li>\n<\/ul>\n{\n \"compilerOptions\": {\n \"target\": \"es2016\",\n \"module\": \"commonjs\",\n \"outDir\": \".\/dist\",\n \"rootDir\": \".\/src\",\n \"strict\": true, \/* T\u00fcm kat\u0131 tip denetimi se\u00e7eneklerini etkinle\u015ftirir *\/\n \"noImplicitAny\": true, \/* 'any' tipine sahip ifadeler i\u00e7in \u00f6rt\u00fck tipleri engeller *\/\n \"strictNullChecks\": true, \/* Null ve undefined i\u00e7in kat\u0131 null denetimi etkinle\u015ftirir *\/\n \"noUnusedLocals\": true, \/* Kullan\u0131lmayan yerel de\u011fi\u015fkenler i\u00e7in hata bildirir *\/\n \"noUnusedParameters\": true, \/* Kullan\u0131lmayan parametreler i\u00e7in hata bildirir *\/\n \"esModuleInterop\": true, \/* CommonJS mod\u00fclleri ile ES mod\u00fclleri aras\u0131nda uyumluluk sa\u011flar *\/\n \"skipLibCheck\": true, \/* T\u00fcm deklarasyon dosyalar\u0131n\u0131n tip denetimini atlar *\/\n \"forceConsistentCasingInFileNames\": true \/* Dosya adlar\u0131nda tutarl\u0131 b\u00fcy\u00fck\/k\u00fc\u00e7\u00fck harf kullan\u0131m\u0131n\u0131 zorlar *\/\n },\n \"include\": [\"src\/**\/*\"],\n \"exclude\": [\"node_modules\", \"dist\"]\n}\n<\/pre>\n