{"id":38195,"date":"2026-01-25T14:40:46","date_gmt":"2026-01-25T11:40:46","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=38195"},"modified":"2026-01-25T14:40:46","modified_gmt":"2026-01-25T11:40:46","slug":"typescriptte-arayuzlere-giris","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/typescriptte-arayuzlere-giris\/","title":{"rendered":"TypeScript&#8217;te Aray\u00fczlere Giri\u015f"},"content":{"rendered":"<p><body><\/p>\n<h2>TypeScript&#8217;te Aray\u00fczlere Giri\u015f<\/h2>\n<p>TypeScript, JavaScript&#8217;e statik tip denetimi ekleyerek b\u00fcy\u00fck \u00f6l\u00e7ekli uygulamalar\u0131n geli\u015ftirilmesini kolayla\u015ft\u0131ran g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. Bu tip sisteminin temel ta\u015flar\u0131ndan biri de &#8220;aray\u00fczler&#8221; (interfaces) kavram\u0131d\u0131r. Aray\u00fczler, kodumuzdaki nesnelerin, fonksiyonlar\u0131n veya s\u0131n\u0131flar\u0131n belirli bir yap\u0131y\u0131 takip etmesini sa\u011flamak i\u00e7in kullan\u0131lan g\u00fc\u00e7l\u00fc bir s\u00f6zle\u015fme mekanizmas\u0131d\u0131r. Bu makalede, TypeScript aray\u00fczlerinin ne oldu\u011funu, neden \u00f6nemli oldu\u011funu, nas\u0131l tan\u0131mland\u0131\u011f\u0131n\u0131 ve \u00e7e\u015fitli kullan\u0131m senaryolar\u0131n\u0131 ayr\u0131nt\u0131l\u0131 bir \u015fekilde inceleyece\u011fiz.<\/p>\n<h3>Aray\u00fczler Nedir ve Neden \u00d6nemlidir?<\/h3>\n<p>Aray\u00fczler, bir nesnenin veya s\u0131n\u0131f\u0131n sahip olmas\u0131 gereken \u00f6zellikleri ve metotlar\u0131 tan\u0131mlayan soyut yap\u0131lar veya &#8220;\u015fablonlard\u0131r&#8221;. TypeScript&#8217;te aray\u00fczler, derleme zaman\u0131nda tip denetimi sa\u011flamak i\u00e7in kullan\u0131l\u0131r ve JavaScript \u00e7\u0131kt\u0131s\u0131na d\u00f6n\u00fc\u015ft\u00fcr\u00fcld\u00fc\u011f\u00fcnde tamamen ortadan kalkar. Yani, \u00e7al\u0131\u015fma zaman\u0131nda herhangi bir performans maliyeti getirmezler.<\/p>\n<h4>Tan\u0131m ve Temel Ama\u00e7<\/h4>\n<p>Bir aray\u00fcz\u00fc, bir nesnenin &#8220;\u015feklini&#8221; veya &#8220;s\u00f6zle\u015fmesini&#8221; tan\u0131mlayan bir yap\u0131 olarak d\u00fc\u015f\u00fcnebiliriz. \u00d6rne\u011fin, bir <code>Kullan\u0131c\u0131<\/code> nesnesinin mutlaka bir <code>id<\/code> (say\u0131) ve bir <code>ad<\/code> (metin) \u00f6zelli\u011fine sahip olmas\u0131 gerekti\u011fini belirtmek isteyebiliriz. Aray\u00fczler tam da bu t\u00fcr gereksinimleri ifade etmemizi sa\u011flar. Temel amac\u0131, farkl\u0131 kod par\u00e7alar\u0131 aras\u0131nda tutarl\u0131 bir veri yap\u0131s\u0131 veya davran\u0131\u015f modeli olu\u015fturmakt\u0131r. Bu sayede, bir bile\u015fen belirli bir aray\u00fcz\u00fc uygulad\u0131\u011f\u0131nda, o aray\u00fcz\u00fcn gerektirdi\u011fi t\u00fcm \u00f6zelliklere ve metotlara sahip olaca\u011f\u0131n\u0131 garanti ederiz.<\/p>\n<h4>TypeScript&#8217;in Tip Sistemindeki Rol\u00fc<\/h4>\n<p>TypeScript&#8217;in statik tip sistemi, geli\u015ftiricilerin kodlar\u0131ndaki potansiyel hatalar\u0131 \u00e7al\u0131\u015fma zaman\u0131ndan \u00f6nce tespit etmelerine yard\u0131mc\u0131 olur. Aray\u00fczler, bu tip sisteminin g\u00fcc\u00fcn\u00fc art\u0131ran kritik bir rol oynar. Bir fonksiyonun bekledi\u011fi parametrelerin veya bir API&#8217;den d\u00f6nen verilerin belirli bir aray\u00fcze uygun olmas\u0131n\u0131 sa\u011flayarak, veri tutars\u0131zl\u0131klar\u0131ndan kaynaklanan hatalar\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r\u0131z. Bu, \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k projelerde, farkl\u0131 ekiplerin ayn\u0131 veri yap\u0131lar\u0131 \u00fczerinde \u00e7al\u0131\u015f\u0131rken uyumu sa\u011flamak i\u00e7in hayati \u00f6neme sahiptir.<\/p>\n<h4>Kod Kalitesi, Okunabilirlik ve S\u00fcrd\u00fcr\u00fclebilirlik Faydalar\u0131<\/h4>\n<p>Aray\u00fczlerin kullan\u0131m\u0131, kod kalitesini, okunabilirli\u011fini ve s\u00fcrd\u00fcr\u00fclebilirli\u011fini \u00e7e\u015fitli yollarla art\u0131r\u0131r:<br \/>\n*   <strong>A\u00e7\u0131kl\u0131k ve Niyet:<\/strong> Aray\u00fczler, kodun ne bekledi\u011fini ve ne sa\u011flad\u0131\u011f\u0131n\u0131 a\u00e7\u0131k\u00e7a belirtir. Bu, di\u011fer geli\u015ftiricilerin (veya gelecekteki sizin) kodu daha h\u0131zl\u0131 anlamas\u0131na yard\u0131mc\u0131 olur.<br \/>\n*   <strong>Tutarl\u0131l\u0131k:<\/strong> Farkl\u0131 mod\u00fcller veya bile\u015fenler aras\u0131nda veri yap\u0131lar\u0131nda tutarl\u0131l\u0131\u011f\u0131 sa\u011flar.<br \/>\n*   <strong>Hata Yakalama:<\/strong> Derleme zaman\u0131nda tip uyu\u015fmazl\u0131klar\u0131n\u0131 yakalayarak \u00e7al\u0131\u015fma zaman\u0131 hatalar\u0131n\u0131 \u00f6nler.<br \/>\n*   <strong>Yeniden Kullan\u0131labilirlik:<\/strong> Ortak veri yap\u0131lar\u0131n\u0131 tan\u0131mlayarak kod tekrar\u0131n\u0131 azalt\u0131r ve yeniden kullan\u0131labilirli\u011fi te\u015fvik eder.<br \/>\n*   <strong>Geli\u015ftirici Deneyimi:<\/strong> IDE&#8217;lerde otomatik tamamlama (IntelliSense) ve tip denetimi sa\u011flayarak geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r ve hatalar\u0131 azalt\u0131r.<\/p>\n<p>K\u0131sacas\u0131, aray\u00fczler, TypeScript&#8217;i kullanarak daha sa\u011flam, bak\u0131m\u0131 kolay ve anla\u015f\u0131l\u0131r uygulamalar geli\u015ftirmek i\u00e7in vazge\u00e7ilmez bir ara\u00e7t\u0131r.<\/p>\n<h3>Temel Aray\u00fcz Tan\u0131m\u0131 ve Kullan\u0131m\u0131<\/h3>\n<p>Aray\u00fczler, <code>interface<\/code> anahtar kelimesi kullan\u0131larak tan\u0131mlan\u0131r ve bir nesnenin sahip olmas\u0131 gereken \u00f6zellikleri listeler.<\/p>\n<h4><code>interface<\/code> Anahtar Kelimesi<\/h4>\n<p>Bir aray\u00fcz tan\u0131mlamak i\u00e7in <code>interface<\/code> anahtar kelimesini ve ard\u0131ndan aray\u00fcz\u00fcn ad\u0131n\u0131 kullan\u0131r\u0131z. Genellikle aray\u00fcz adlar\u0131 PascalCase (ilk harf b\u00fcy\u00fck) ile ba\u015flar.<\/p>\n<pre><code class=\"language-typescript\">interface Kullanici {\n    id: number;\n    ad: string;\n    email: string;\n}<\/code><\/pre>\n<p>Yukar\u0131daki \u00f6rnekte, <code>Kullanici<\/code> ad\u0131nda bir aray\u00fcz tan\u0131mlad\u0131k. Bu aray\u00fcz, her <code>Kullanici<\/code> nesnesinin bir <code>id<\/code> (say\u0131), bir <code>ad<\/code> (metin) ve bir <code>email<\/code> (metin) \u00f6zelli\u011fine sahip olmas\u0131 gerekti\u011fini belirtir.<\/p>\n<h4>\u00d6zellik Tan\u0131mlama (Properties)<\/h4>\n<p>Aray\u00fcz i\u00e7inde \u00f6zellikler, JavaScript nesnelerindeki gibi <code>\u00f6zellikAd\u0131: tip<\/code> \u015feklinde tan\u0131mlan\u0131r.<\/p>\n<pre><code class=\"language-typescript\">interface Urun {\n    urunId: number;\n    urunAdi: string;\n    fiyat: number;\n    stokDurumu: boolean;\n}\n\n\/\/ Bu nesne Urun aray\u00fcz\u00fcne uygundur\nlet laptop: Urun = {\n    urunId: 101,\n    urunAdi: \"Diz\u00fcst\u00fc Bilgisayar\",\n    fiyat: 12500.00,\n    stokDurumu: true\n};\n\n\/\/ Bu nesne Urun aray\u00fcz\u00fcne uygun de\u011fildir (fiyat eksik)\n\/*\nlet telefon: Urun = {\n    urunId: 102,\n    urunAdi: \"Ak\u0131ll\u0131 Telefon\",\n    stokDurumu: true \/\/ Hata: 'fiyat' \u00f6zelli\u011fi eksik\n};\n*\/<\/code><\/pre>\n<p>TypeScript derleyicisi, <code>telefon<\/code> nesnesinin <code>Urun<\/code> aray\u00fcz\u00fcne uymad\u0131\u011f\u0131n\u0131 (\u00e7\u00fcnk\u00fc <code>fiyat<\/code> \u00f6zelli\u011fi eksik) belirten bir hata verecektir.<\/p>\n<h4>Opsiyonel \u00d6zellikler (<code>?<\/code>)<\/h4>\n<p>Baz\u0131 \u00f6zelliklerin her zaman mevcut olmas\u0131 gerekmeyebilir. Bu t\u00fcr durumlar i\u00e7in opsiyonel \u00f6zellikler tan\u0131mlayabiliriz. Bir \u00f6zelli\u011fin ad\u0131n\u0131n sonuna <code>?<\/code> i\u015fareti ekleyerek opsiyonel oldu\u011funu belirtiriz.<\/p>\n<pre><code class=\"language-typescript\">interface Ayarlar {\n    tema: string;\n    dil?: string; \/\/ Opsiyonel \u00f6zellik\n    bildirimlerAcikMi?: boolean; \/\/ Opsiyonel \u00f6zellik\n}\n\nlet varsayilanAyarlar: Ayarlar = {\n    tema: \"koyu\"\n};\n\nlet kullaniciAyarlari: Ayarlar = {\n    tema: \"a\u00e7\u0131k\",\n    dil: \"tr\",\n    bildirimlerAcikMi: true\n};\n\nlet misafirAyarlari: Ayarlar = {\n    tema: \"sistem\",\n    bildirimlerAcikMi: false\n};<\/code><\/pre>\n<p>Yukar\u0131daki \u00f6rnekte, <code>dil<\/code> ve <code>bildirimlerAcikMi<\/code> \u00f6zellikleri opsiyoneldir. Bu, <code>Ayarlar<\/code> aray\u00fcz\u00fcn\u00fc uygulayan bir nesnenin bu \u00f6zellikleri i\u00e7ermeyebilece\u011fi anlam\u0131na gelir.<\/p>\n<h4>Salt Okunur \u00d6zellikler (<code>readonly<\/code>)<\/h4>\n<p>Bir nesne olu\u015fturulduktan sonra belirli \u00f6zelliklerinin de\u011fi\u015ftirilememesini isteyebiliriz. <code>readonly<\/code> anahtar kelimesini kullanarak bu t\u00fcr salt okunur \u00f6zellikleri tan\u0131mlayabiliriz.<\/p>\n<pre><code class=\"language-typescript\">interface Nokta {\n    readonly x: number;\n    readonly y: number;\n    z: number; \/\/ Bu \u00f6zellik de\u011fi\u015ftirilebilir\n}\n\nlet p1: Nokta = { x: 10, y: 20, z: 30 };\n\/\/ p1.x = 5; \/\/ Hata: 'x' salt okunur bir \u00f6zelliktir.\n\/\/ p1.y = 15; \/\/ Hata: 'y' salt okunur bir \u00f6zelliktir.\np1.z = 40; \/\/ Ge\u00e7erli<\/code><\/pre>\n<p><code>readonly<\/code> \u00f6zelli\u011fi, \u00f6zellikle bir nesnenin ilk olu\u015fturuldu\u011funda ald\u0131\u011f\u0131 de\u011ferlerin sonradan de\u011fi\u015ftirilmemesi gereken durumlar i\u00e7in kullan\u0131\u015fl\u0131d\u0131r (\u00f6rne\u011fin, bir nesnenin ID&#8217;si veya bir yap\u0131land\u0131rma sabiti).<\/p>\n<h3>Aray\u00fczlerde Metot Tan\u0131mlama<\/h3>\n<p>Aray\u00fczler sadece \u00f6zelliklerin de\u011fil, ayn\u0131 zamanda nesnelerin sahip olmas\u0131 gereken metotlar\u0131n imzalar\u0131n\u0131 da tan\u0131mlayabilir. Bu, belirli bir davran\u0131\u015fa sahip olmas\u0131 gereken nesneler i\u00e7in bir s\u00f6zle\u015fme olu\u015fturmam\u0131z\u0131 sa\u011flar.<\/p>\n<h4>Fonksiyon \u0130mzalar\u0131<\/h4>\n<p>Bir metot tan\u0131mlamak i\u00e7in, metot ad\u0131n\u0131, parantez i\u00e7inde parametrelerini ve ard\u0131ndan d\u00f6n\u00fc\u015f tipini belirtiriz.<\/p>\n<pre><code class=\"language-typescript\">interface HesapMakinesi {\n    topla(a: number, b: number): number;\n    cikar(a: number, b: number): number;\n    carp?(a: number, b: number): number; \/\/ Opsiyonel metot\n}<\/code><\/pre>\n<p>Yukar\u0131daki <code>HesapMakinesi<\/code> aray\u00fcz\u00fc, <code>topla<\/code> ve <code>cikar<\/code> ad\u0131nda iki metot tan\u0131mlar. Her iki metot da iki say\u0131sal parametre al\u0131r ve bir say\u0131 d\u00f6nd\u00fcr\u00fcr. <code>carp<\/code> metodu ise opsiyoneldir.<\/p>\n<h4>Parametreler ve D\u00f6n\u00fc\u015f Tipleri<\/h4>\n<p>Metot tan\u0131mlarken, her parametrenin ad\u0131n\u0131 ve tipini belirtmeli, ayr\u0131ca metodun d\u00f6n\u00fc\u015f tipini de a\u00e7\u0131k\u00e7a ifade etmeliyiz.<\/p>\n<pre><code class=\"language-typescript\">let basitHesapMakinesi: HesapMakinesi = {\n    topla: function(x: number, y: number): number {\n        return x + y;\n    },\n    cikar: (x: number, y: number): number => {\n        return x - y;\n    }\n};\n\nconsole.log(basitHesapMakinesi.topla(5, 3)); \/\/ \u00c7\u0131kt\u0131: 8\nconsole.log(basitHesapMakinesi.cikar(10, 4)); \/\/ \u00c7\u0131kt\u0131: 6\n\nlet gelismisHesapMakinesi: HesapMakinesi = {\n    topla: (x, y) => x + y,\n    cikar: (x, y) => x - y,\n    carp: (x, y) => x * y \/\/ Opsiyonel metodu uygulad\u0131k\n};\n\nconsole.log(gelismisHesapMakinesi.carp?.(2, 6)); \/\/ \u00c7\u0131kt\u0131: 12 (opsiyonel zincirleme ile g\u00fcvenli \u00e7a\u011fr\u0131)<\/code><\/pre>\n<p>Metotlar\u0131 uygularken, aray\u00fczde belirtilen parametre tipleri ve d\u00f6n\u00fc\u015f tipleriyle uyumlu olmalar\u0131 gerekir. TypeScript, bu uyumsuzluklar\u0131 derleme zaman\u0131nda tespit edecektir.<\/p>\n<h3>Fonksiyon Tiplerini Tan\u0131mlayan Aray\u00fczler<\/h3>\n<p>Aray\u00fczler, sadece nesne \u00f6zelliklerini ve metotlar\u0131n\u0131 de\u011fil, ayn\u0131 zamanda do\u011frudan fonksiyon tiplerini de tan\u0131mlamak i\u00e7in kullan\u0131labilir. Bu, \u00f6zellikle fonksiyon parametreleri olarak beklenen veya fonksiyon d\u00f6nd\u00fcren fonksiyonlar i\u00e7in kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n<h4>Aray\u00fczlerin Direkt Olarak Fonksiyon Tipi Olarak Kullan\u0131lmas\u0131<\/h4>\n<p>Bir aray\u00fcz, sadece bir \u00e7a\u011fr\u0131 imzas\u0131 (call signature) i\u00e7eriyorsa, bu aray\u00fcz\u00fc bir fonksiyon tipi olarak kullanabiliriz.<\/p>\n<pre><code class=\"language-typescript\">interface Karsilastirici {\n    (kaynak: string, altDize: string): boolean;\n}<\/code><\/pre>\n<p>Bu <code>Karsilastirici<\/code> aray\u00fcz\u00fc, iki <code>string<\/code> parametresi alan ve bir <code>boolean<\/code> d\u00f6nd\u00fcren bir fonksiyon tipini temsil eder.<\/p>\n<h4>Fonksiyon Aray\u00fczleri Olu\u015fturma<\/h4>\n<p>Bu aray\u00fcz\u00fc bir de\u011fi\u015fken veya parametre tipi olarak atayabiliriz:<\/p>\n<pre><code class=\"language-typescript\">let stringArama: Karsilastirici;\n\nstringArama = function(s: string, sub: string): boolean {\n    let sonuc = s.indexOf(sub);\n    return sonuc > -1;\n};\n\nconsole.log(stringArama(\"Merhaba D\u00fcnya\", \"D\u00fcnya\")); \/\/ \u00c7\u0131kt\u0131: true\nconsole.log(stringArama(\"TypeScript\", \"Java\")); \/\/ \u00c7\u0131kt\u0131: false<\/code><\/pre>\n<p>Burada, <code>stringArama<\/code> de\u011fi\u015fkeni <code>Karsilastirici<\/code> aray\u00fcz\u00fcne uygun bir fonksiyon olarak atanm\u0131\u015ft\u0131r. TypeScript, atanan fonksiyonun parametre tiplerinin ve d\u00f6n\u00fc\u015f tipinin aray\u00fczdeki \u00e7a\u011fr\u0131 imzas\u0131yla e\u015fle\u015fti\u011fini do\u011frular. Parametre isimleri farkl\u0131 olabilir, \u00f6nemli olan tiplerin s\u0131ras\u0131 ve uyumudur.<\/p>\n<pre><code class=\"language-typescript\">\/\/ Parametre isimleri farkl\u0131 olabilir\nstringArama = function(sira: string, altMetin: string): boolean {\n    let sonuc = sira.indexOf(altMetin);\n    return sonuc > -1;\n};<\/code><\/pre>\n<p>Bu kullan\u0131m, \u00f6zellikle callback fonksiyonlar\u0131 veya bir fonksiyonun parametre olarak belirli bir imzaya sahip bir ba\u015fka fonksiyonu bekledi\u011fi durumlarda kodun daha okunabilir ve g\u00fcvenli olmas\u0131n\u0131 sa\u011flar.<\/p>\n<h3>\u0130ndekslenebilir Tipler \u0130\u00e7in Aray\u00fczler<\/h3>\n<p>JavaScript&#8217;te diziler ve nesneler, say\u0131sal veya string indekslerle eri\u015filebilen koleksiyonlard\u0131r. TypeScript&#8217;te aray\u00fczler, bu t\u00fcr indekslenebilir tiplerin yap\u0131s\u0131n\u0131 tan\u0131mlamak i\u00e7in de kullan\u0131labilir.<\/p>\n<h4>Dizi Benzeri veya Obje Benzeri Eri\u015fim<\/h4>\n<p>\u0130ndekslenebilir bir aray\u00fcz, bir diziye veya bir objeye <code>arr[index]<\/code> veya <code>obj[\"key\"]<\/code> \u015feklinde eri\u015fildi\u011finde d\u00f6nd\u00fcr\u00fclecek tipi belirtir.<\/p>\n<pre><code class=\"language-typescript\">interface StringDizisi {\n    [index: number]: string;\n}<\/code><\/pre>\n<p>Bu <code>StringDizisi<\/code> aray\u00fcz\u00fc, say\u0131sal bir indeksle eri\u015fildi\u011finde <code>string<\/code> tipi d\u00f6nd\u00fcren bir dizi benzeri yap\u0131y\u0131 tan\u0131mlar.<\/p>\n<pre><code class=\"language-typescript\">let myStringArray: StringDizisi;\nmyStringArray = [\"Elma\", \"Armut\", \"Kiraz\"];\n\nconsole.log(myStringArray[0]); \/\/ \u00c7\u0131kt\u0131: Elma\nconsole.log(myStringArray[1]); \/\/ \u00c7\u0131kt\u0131: Armut\n\n\/\/ myStringArray[0] = 123; \/\/ Hata: 'number' tipi 'string' tipine atanamaz.<\/code><\/pre>\n<h4>String ve Number \u0130ndeks \u0130mzalar\u0131<\/h4>\n<p>\u0130ndeks imzalar\u0131, string veya number tipinde olabilir. Ancak, bir aray\u00fcz hem say\u0131sal hem de string indeks imzas\u0131 tan\u0131ml\u0131yorsa, say\u0131sal indeks imzas\u0131n\u0131n d\u00f6n\u00fc\u015f tipi, string indeks imzas\u0131n\u0131n d\u00f6n\u00fc\u015f tipinin bir alt tipi olmal\u0131d\u0131r. Bunun nedeni, JavaScript&#8217;te say\u0131sal indekslerin dahili olarak string&#8217;e d\u00f6n\u00fc\u015ft\u00fcr\u00fclmesidir (\u00f6rn. <code>arr[0]<\/code> asl\u0131nda <code>arr[\"0\"]<\/code> olarak eri\u015filir).<\/p>\n<pre><code class=\"language-typescript\">interface Dictionary {\n    [key: string]: any; \/\/ String indeks imzas\u0131\n}\n\nlet myDictionary: Dictionary = {\n    \"name\": \"Alice\",\n    \"age\": 30,\n    \"isActive\": true\n};\n\nconsole.log(myDictionary[\"name\"]); \/\/ \u00c7\u0131kt\u0131: Alice\nconsole.log(myDictionary.age); \/\/ Nokta notasyonu da kullan\u0131labilir\n\ninterface ReadonlyStringDictionary {\n    readonly [key: string]: string; \/\/ Salt okunur string indeks imzas\u0131\n}\n\nlet myConfig: ReadonlyStringDictionary = {\n    \"apiUrl\": \"https:\/\/api.example.com\",\n    \"version\": \"1.0.0\"\n};\n\n\/\/ myConfig[\"apiUrl\"] = \"new-url\"; \/\/ Hata: \u0130ndeks imzas\u0131 salt okunurdur.<\/code><\/pre>\n<p>\u0130ndeks imzalar\u0131, \u00f6zellikle dinamik \u00f6zelliklere sahip nesnelerle \u00e7al\u0131\u015f\u0131rken veya bir koleksiyonun belirli bir yap\u0131ya sahip olmas\u0131n\u0131 garanti etmek istedi\u011fimizde \u00e7ok kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n<h3>S\u0131n\u0131flar\u0131 Uygulayan Aray\u00fczler<\/h3>\n<p>Aray\u00fczler, s\u0131n\u0131flar\u0131n belirli bir yap\u0131y\u0131 veya davran\u0131\u015f\u0131 uygulamas\u0131n\u0131 zorunlu k\u0131lmak i\u00e7in de kullan\u0131labilir. Bu, nesne tabanl\u0131 programlamada &#8220;s\u00f6zle\u015fme&#8221; kavram\u0131n\u0131n \u00f6nemli bir par\u00e7as\u0131d\u0131r.<\/p>\n<h4><code>implements<\/code> Anahtar Kelimesi<\/h4>\n<p>Bir s\u0131n\u0131f\u0131n bir aray\u00fcz\u00fc uygulad\u0131\u011f\u0131n\u0131 belirtmek i\u00e7in <code>implements<\/code> anahtar kelimesini kullan\u0131r\u0131z. Bir s\u0131n\u0131f bir aray\u00fcz\u00fc uygulad\u0131\u011f\u0131nda, aray\u00fczde tan\u0131mlanan t\u00fcm \u00f6zellikleri ve metotlar\u0131 kendi i\u00e7inde bulundurmak zorundad\u0131r.<\/p>\n<pre><code class=\"language-typescript\">interface Gosterilebilir {\n    goster(): string;\n}\n\nclass KullaniciBilgisi implements Gosterilebilir {\n    constructor(public ad: string, public soyad: string) {}\n\n    goster(): string {\n        return <code>${this.ad} ${this.soyad}<\/code>;\n    }\n}\n\nclass UrunBilgisi implements Gosterilebilir {\n    constructor(public urunAdi: string, public fiyat: number) {}\n\n    goster(): string {\n        return <code>${this.urunAdi} - ${this.fiyat} TL<\/code>;\n    }\n}\n\nlet kullanici = new KullaniciBilgisi(\"Ali\", \"Can\");\nlet urun = new UrunBilgisi(\"Kitap\", 50);\n\nconsole.log(kullanici.goster()); \/\/ \u00c7\u0131kt\u0131: Ali Can\nconsole.log(urun.goster());     \/\/ \u00c7\u0131kt\u0131: Kitap - 50 TL\n\n\/\/ Polimorfizm \u00f6rne\u011fi\nfunction bilgiyiGoster(nesne: Gosterilebilir) {\n    console.log(nesne.goster());\n}\n\nbilgiyiGoster(kullanici);\nbilgiyiGoster(urun);<\/code><\/pre>\n<p>Yukar\u0131daki \u00f6rnekte, <code>Gosterilebilir<\/code> aray\u00fcz\u00fc, <code>goster()<\/code> ad\u0131nda bir metot tan\u0131mlar. <code>KullaniciBilgisi<\/code> ve <code>UrunBilgisi<\/code> s\u0131n\u0131flar\u0131 bu aray\u00fcz\u00fc uygulad\u0131klar\u0131 i\u00e7in <code>goster()<\/code> metodunu kendi i\u00e7lerinde bar\u0131nd\u0131rmak zorundad\u0131rlar. Bu, <code>bilgiyiGoster<\/code> gibi fonksiyonlar\u0131n, <code>Gosterilebilir<\/code> aray\u00fcz\u00fcn\u00fc uygulayan herhangi bir nesneyle \u00e7al\u0131\u015fabilmesini sa\u011flar; bu da polimorfizmin g\u00fczel bir \u00f6rne\u011fidir.<\/p>\n<h4>Statik ve \u00d6rnek Metotlar<\/h4>\n<p>Bir s\u0131n\u0131f bir aray\u00fcz\u00fc uygulad\u0131\u011f\u0131nda, yaln\u0131zca s\u0131n\u0131f\u0131n \u00f6rnek (instance) taraf\u0131 denetlenir. S\u0131n\u0131f\u0131n statik taraf\u0131 (yani s\u0131n\u0131f\u0131n kendisine ait olan statik \u00f6zellikler ve metotlar) aray\u00fcz taraf\u0131ndan denetlenmez.<\/p>\n<pre><code class=\"language-typescript\">interface SaatConstructor {\n    new (saat: number, dakika: number): SaatInterface;\n}\n\ninterface SaatInterface {\n    tick(): void;\n}\n\nfunction saatOlustur(ctor: SaatConstructor, saat: number, dakika: number): SaatInterface {\n    return new ctor(saat, dakika);\n}\n\nclass DijitalSaat implements SaatInterface {\n    constructor(h: number, m: number) { \/<em> ... <\/em>\/ }\n    tick() {\n        console.log(\"tik tak (dijital)\");\n    }\n}\n\nclass AnalogSaat implements SaatInterface {\n    constructor(h: number, m: number) { \/<em> ... <\/em>\/ }\n    tick() {\n        console.log(\"tik tak (analog)\");\n    }\n}\n\nlet dijital = saatOlustur(DijitalSaat, 12, 17);\nlet analog = saatOlustur(AnalogSaat, 7, 32);\n\ndijital.tick();\nanalog.tick();<\/code><\/pre>\n<p>Bu \u00f6rnekte, <code>SaatConstructor<\/code> aray\u00fcz\u00fc bir s\u0131n\u0131f\u0131n constructor&#8217;\u0131n\u0131n imzas\u0131n\u0131 tan\u0131mlar. Bu biraz daha geli\u015fmi\u015f bir kullan\u0131m olup, bir s\u0131n\u0131f\u0131n kendisini bir aray\u00fcz olarak nas\u0131l kullanabilece\u011fini g\u00f6sterir. Genellikle, s\u0131n\u0131flar do\u011frudan \u00f6rnek metotlar\u0131n\u0131 ve \u00f6zelliklerini tan\u0131mlayan aray\u00fczleri uygular.<\/p>\n<h3>Aray\u00fczlerin Geni\u015fletilmesi (Extending Interfaces)<\/h3>\n<p>Aray\u00fczler, t\u0131pk\u0131 s\u0131n\u0131flar gibi birbirlerini geni\u015fletebilirler. Bu, mevcut bir aray\u00fcze yeni \u00f6zellikler ekleyerek veya birden fazla aray\u00fcz\u00fc birle\u015ftirerek daha spesifik aray\u00fczler olu\u015fturmam\u0131z\u0131 sa\u011flar.<\/p>\n<h4><code>extends<\/code> Anahtar Kelimesi<\/h4>\n<p>Bir aray\u00fcz\u00fc ba\u015fka bir aray\u00fczden geni\u015fletmek i\u00e7in <code>extends<\/code> anahtar kelimesini kullan\u0131r\u0131z. Geni\u015fleten aray\u00fcz, geni\u015fletilen aray\u00fcz\u00fcn t\u00fcm \u00fcyelerine (\u00f6zellikler ve metotlar) sahip olur ve \u00fczerine yeni \u00fcyeler ekleyebilir.<\/p>\n<pre><code class=\"language-typescript\">interface Sekil {\n    renk: string;\n}\n\ninterface Kare extends Sekil {\n    kenarUzunlugu: number;\n}\n\nlet kare1: Kare = {\n    renk: \"mavi\",\n    kenarUzunlugu: 10\n};\n\n\/\/ kare1.genislik = 5; \/\/ Hata: 'Kare' tipinde 'genislik' \u00f6zelli\u011fi yok.<\/code><\/pre>\n<p><code>Kare<\/code> aray\u00fcz\u00fc, <code>Sekil<\/code> aray\u00fcz\u00fcnden <code>renk<\/code> \u00f6zelli\u011fini miras al\u0131r ve kendi <code>kenarUzunlugu<\/code> \u00f6zelli\u011fini ekler.<\/p>\n<h4>Birden Fazla Aray\u00fcz\u00fc Geni\u015fletme<\/h4>\n<p>Bir aray\u00fcz, birden fazla aray\u00fcz\u00fc de geni\u015fletebilir. Bu durumda, geni\u015fleten aray\u00fcz, t\u00fcm geni\u015fletilen aray\u00fczlerin \u00fcyelerinin birle\u015fimine sahip olur.<\/p>\n<pre><code class=\"language-typescript\">interface Kalem {\n    marka: string;\n}\n\ninterface Silgi {\n    silmeKapasitesi: number;\n}\n\ninterface KalemSilgi extends Kalem, Silgi {\n    model: string;\n}\n\nlet kalemSilgi1: KalemSilgi = {\n    marka: \"Faber-Castell\",\n    silmeKapasitesi: 100,\n    model: \"Grippy\"\n};\n\nconsole.log(kalemSilgi1.marka);\nconsole.log(kalemSilgi1.silmeKapasitesi);\nconsole.log(kalemSilgi1.model);<\/code><\/pre>\n<p><code>KalemSilgi<\/code> aray\u00fcz\u00fc, hem <code>Kalem<\/code> hem de <code>Silgi<\/code> aray\u00fczlerinin \u00f6zelliklerini miras al\u0131r ve \u00fczerine <code>model<\/code> \u00f6zelli\u011fini ekler. Bu, farkl\u0131 \u00f6zellik setlerini birle\u015ftirerek karma\u015f\u0131k tipler olu\u015fturmak i\u00e7in \u00e7ok g\u00fc\u00e7l\u00fc bir y\u00f6ntemdir.<\/p>\n<h4>Kal\u0131t\u0131m ve Yeniden Kullan\u0131labilirlik<\/h4>\n<p>Aray\u00fcz geni\u015fletme, kodda kal\u0131t\u0131m ve yeniden kullan\u0131labilirlik ilkelerini destekler. Daha genel aray\u00fczler tan\u0131mlayabilir ve bunlar\u0131 daha \u00f6zel durumlar i\u00e7in geni\u015fleterek DRY (Don&#8217;t Repeat Yourself) prensibine uyabiliriz. Bu, kodun daha mod\u00fcler, anla\u015f\u0131l\u0131r ve bak\u0131m\u0131 kolay olmas\u0131n\u0131 sa\u011flar. \u00d6rne\u011fin, bir <code>TemelAPIYaniti<\/code> aray\u00fcz\u00fc tan\u0131mlay\u0131p, t\u00fcm API yan\u0131t aray\u00fczlerimizi bundan geni\u015fleterek ortak alanlar\u0131 (\u00f6rn. <code>durumKodu<\/code>, <code>mesaj<\/code>) tek bir yerde tan\u0131mlayabiliriz.<\/p>\n<h3>Hibrit Tipler (Hybrid Types)<\/h3>\n<p>JavaScript&#8217;in dinamik do\u011fas\u0131 gere\u011fi, baz\u0131 nesneler hem fonksiyon olarak \u00e7a\u011fr\u0131labilir hem de \u00f6zelliklere sahip olabilir. TypeScript&#8217;teki aray\u00fczler, bu t\u00fcr &#8220;hibrit tipleri&#8221; tan\u0131mlamak i\u00e7in de kullan\u0131labilir.<\/p>\n<h4>Hem Fonksiyon Hem de \u00d6zelliklere Sahip Aray\u00fczler<\/h4>\n<p>Bir aray\u00fcz, hem bir \u00e7a\u011fr\u0131 imzas\u0131 hem de normal \u00f6zellikler i\u00e7erebilir.<\/p>\n<pre><code class=\"language-typescript\">interface Sayac {\n    (baslangic: number): string; \/\/ \u00c7a\u011fr\u0131 imzas\u0131 (fonksiyon taraf\u0131)\n    aralik: number;             \/\/ \u00d6zellik (nesne taraf\u0131)\n    reset(): void;              \/\/ Metot (nesne taraf\u0131)\n}\n\nfunction getSayac(): Sayac {\n    let sayac = <Sayac>function (baslangic: number) {\n        return <code>Sayac ${baslangic}'den ba\u015flad\u0131.<\/code>;\n    };\n    sayac.aralik = 10;\n    sayac.reset = function () {\n        console.log(\"Saya\u00e7 s\u0131f\u0131rland\u0131.\");\n    };\n    return sayac;\n}\n\nlet c = getSayac();\nconsole.log(c(5)); \/\/ Fonksiyon olarak \u00e7a\u011fr\u0131: \u00c7\u0131kt\u0131: Sayac 5'den ba\u015flad\u0131.\nc.reset();         \/\/ Metot \u00e7a\u011fr\u0131s\u0131: \u00c7\u0131kt\u0131: Saya\u00e7 s\u0131f\u0131rland\u0131.\nconsole.log(c.aralik); \/\/ \u00d6zellik eri\u015fimi: \u00c7\u0131kt\u0131: 10<\/code><\/pre>\n<p>Bu \u00f6rnekte, <code>Sayac<\/code> aray\u00fcz\u00fc hem bir fonksiyon olarak \u00e7a\u011fr\u0131labilen (bir <code>number<\/code> al\u0131p <code>string<\/code> d\u00f6nd\u00fcren) hem de <code>aralik<\/code> ad\u0131nda bir say\u0131sal \u00f6zelli\u011fe ve <code>reset()<\/code> ad\u0131nda bir metoda sahip bir yap\u0131y\u0131 tan\u0131mlar. <code>getSayac<\/code> fonksiyonu bu aray\u00fcze uygun bir nesne d\u00f6nd\u00fcr\u00fcr.<\/p>\n<h4>Nesne Tabanl\u0131 Programlamadaki Kullan\u0131m Alanlar\u0131<\/h4>\n<p>Hibrit tipler, \u00f6zellikle belirli bir global nesnenin hem konfig\u00fcrasyon \u00f6zelliklerine sahip oldu\u011fu hem de belirli bir eylemi ger\u00e7ekle\u015ftirdi\u011fi durumlarda kullan\u0131\u015fl\u0131d\u0131r. \u00d6rne\u011fin, bir logger nesnesi hem <code>log()<\/code> metotlar\u0131na sahip olabilir hem de <code>debugMode<\/code> gibi konfig\u00fcrasyon \u00f6zelliklerini tutabilir. Veya bir fabrika fonksiyonu, hem kendisi bir nesne d\u00f6nd\u00fcrebilir hem de o nesnenin \u00fczerinde metotlar bar\u0131nd\u0131rabilir. Bu, JavaScript&#8217;in esnek do\u011fas\u0131n\u0131 TypeScript&#8217;in tip g\u00fcvenli\u011fiyle birle\u015ftirmenin bir yoludur.<\/p>\n<h3>Aray\u00fczler ve Tip Takma Adlar\u0131 (Type Aliases) Aras\u0131ndaki Farklar<\/h3>\n<p>TypeScript&#8217;te aray\u00fczlere benzer bir di\u011fer kavram da tip takma adlar\u0131 (type aliases) veya <code>type<\/code> anahtar kelimesidir. Her ikisi de yeni tipler tan\u0131mlamak i\u00e7in kullan\u0131lsa da, aralar\u0131nda \u00f6nemli farklar bulunur.<\/p>\n<h4><code>interface<\/code> vs <code>type<\/code><\/h4>\n<p>| \u00d6zellik                | <code>interface<\/code>                                     | <code>type<\/code>                                              |<br \/>\n| :&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212; | :&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;- | :&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211; |<br \/>\n| <strong>Geni\u015fletilebilirlik<\/strong> | <code>extends<\/code> ile geni\u015fletilebilir.                 | <code>&<\/code> (intersection) ile birle\u015ftirilebilir.           |<br \/>\n| <strong>Birle\u015fme (Declaration Merging)<\/strong> | Ayn\u0131 isimde birden fazla aray\u00fcz tan\u0131mland\u0131\u011f\u0131nda otomatik olarak birle\u015firler. | Birle\u015fme \u00f6zelli\u011fi yoktur; ayn\u0131 isimde iki <code>type<\/code> tan\u0131m\u0131 hata verir. |<br \/>\n| <strong>Kullan\u0131m Alanlar\u0131<\/strong>  | Genellikle nesnelerin \u015feklini tan\u0131mlamak i\u00e7in kullan\u0131l\u0131r. | Primitif tipler, birle\u015fim tipleri (union types), tuple&#8217;lar, fonksiyon tipleri ve nesne tipleri i\u00e7in kullan\u0131labilir. |<br \/>\n| <strong>S\u0131n\u0131flarla Kullan\u0131m<\/strong> | <code>implements<\/code> anahtar kelimesiyle s\u0131n\u0131flar taraf\u0131ndan uygulanabilir. | <code>implements<\/code> ile s\u0131n\u0131flar taraf\u0131ndan uygulanamaz (sadece nesne tipleri i\u00e7in). |<br \/>\n| <strong>Daha Kompleks Tipler<\/strong> | Basit nesne yap\u0131lar\u0131 i\u00e7in idealdir.            | Birle\u015fim tipleri (<code>|<\/code>), kesi\u015fim tipleri (<code>&<\/code>), ko\u015fullu tipler ve tuple&#8217;lar gibi daha karma\u015f\u0131k tipler olu\u015fturmak i\u00e7in daha esnektir. |<\/p>\n<pre><code class=\"language-typescript\">\/\/ Interface Geni\u015fletme ve Birle\u015fme\ninterface Kisi {\n    ad: string;\n}\n\ninterface Kisi { \/\/ Ayn\u0131 isimde tekrar tan\u0131mlanabilir ve birle\u015fir\n    yas: number;\n}\n\ninterface Calisan extends Kisi { \/\/ Geni\u015fletilebilir\n    sicilNo: string;\n}\n\nlet calisan1: Calisan = { ad: \"Ay\u015fe\", yas: 30, sicilNo: \"TS123\" };\n\n\n\/\/ Type Takma Ad\u0131 ile Geni\u015fletme (Intersection)\ntype Personel = {\n    ad: string;\n};\n\n\/\/ type Personel = { \/\/ Hata: 'Personel' zaten tan\u0131mlanm\u0131\u015f.\n\/\/     yas: number;\n\/\/ };\n\ntype Yonetici = Personel & { \/\/ & ile birle\u015ftirme\n    departman: string;\n};\n\nlet yonetici1: Yonetici = { ad: \"Mehmet\", departman: \"IK\" };\n\/\/ yonetici1.yas = 40; \/\/ Hata: 'yas' \u00f6zelli\u011fi yok (Personel type'\u0131na eklenmedi\u011fi i\u00e7in)\n\n\/\/ Type takma adlar\u0131 ile birle\u015fim tipleri (union types)\ntype Durum = \"ba\u015far\u0131l\u0131\" | \"hata\" | \"beklemede\";\nlet islemDurumu: Durum = \"ba\u015far\u0131l\u0131\";\n\n\/\/ Type takma adlar\u0131 ile fonksiyon tipleri\ntype FonksiyonTipi = (a: number, b: number) => number;\nlet carpma: FonksiyonTipi = (x, y) => x * y;<\/code><\/pre>\n<h4>Ne Zaman Hangisini Kullanmal\u0131?<\/h4>\n<p>*   <strong><code>interface<\/code> kullan\u0131n:<\/strong><br \/>\n    *   Bir nesnenin yap\u0131s\u0131n\u0131 tan\u0131mlamak istedi\u011finizde.<br \/>\n    *   S\u0131n\u0131flar taraf\u0131ndan uygulanacak bir s\u00f6zle\u015fme olu\u015fturdu\u011funuzda (<code>implements<\/code>).<br \/>\n    *   Otomatik birle\u015fme \u00f6zelli\u011finden faydalanmak istedi\u011finizde (\u00f6rne\u011fin, bir k\u00fct\u00fcphane veya mod\u00fcl\u00fcn global tiplerini geni\u015fletmek i\u00e7in).<br \/>\n    *   API yan\u0131tlar\u0131, konfig\u00fcrasyon nesneleri gibi veri yap\u0131lar\u0131n\u0131 tan\u0131mlarken.<\/p>\n<p>*   <strong><code>type<\/code> kullan\u0131n:<\/strong><br \/>\n    *   Birle\u015fim tipleri (union types) veya kesi\u015fim tipleri (intersection types) gibi karma\u015f\u0131k tipler olu\u015fturmak istedi\u011finizde.<br \/>\n    *   Primitif tipler, tuple&#8217;lar veya fonksiyon tipleri i\u00e7in takma adlar olu\u015fturdu\u011funuzda.<br \/>\n    *   <code>typeof<\/code> veya <code>keyof<\/code> gibi operat\u00f6rlerle birlikte tipleri dinamik olarak olu\u015fturdu\u011funuzda.<\/p>\n<p>Genel bir kural olarak, bir nesnenin \u015feklini tan\u0131ml\u0131yorsan\u0131z <code>interface<\/code> kullan\u0131n. Di\u011fer t\u00fcm tip tan\u0131mlama ihtiya\u00e7lar\u0131 i\u00e7in <code>type<\/code> kullan\u0131n. \u00c7o\u011fu durumda, her ikisi de benzer sonu\u00e7lar verebilir, ancak yukar\u0131daki farklar belirli senaryolarda birinin di\u011ferine g\u00f6re daha uygun olmas\u0131n\u0131 sa\u011flar.<\/p>\n<h3>Geli\u015fmi\u015f Aray\u00fcz Kullan\u0131m Senaryolar\u0131<\/h3>\n<p>Aray\u00fczler, temel kullan\u0131mlar\u0131n\u0131n \u00f6tesinde daha karma\u015f\u0131k ve esnek senaryolar i\u00e7in de kullan\u0131labilir.<\/p>\n<h4>Generic Aray\u00fczler<\/h4>\n<p>Generic&#8217;ler, bir bile\u015fenin veya fonksiyonun birden fazla tipte veriyle \u00e7al\u0131\u015fmas\u0131na olanak tan\u0131rken tip g\u00fcvenli\u011fini korur. Aray\u00fczler de generic olabilir, bu da onlar\u0131 daha esnek hale getirir.<\/p>\n<pre><code class=\"language-typescript\">interface Kutu<T> {\n    icerik: T;\n}\n\nlet sayiKutusu: Kutu<number> = { icerik: 123 };\nlet metinKutusu: Kutu<string> = { icerik: \"Merhaba\" };\n\n\/\/ let booleanKutusu: Kutu<boolean> = { icerik: \"true\" }; \/\/ Hata: 'string' tipi 'boolean' tipine atanamaz.\n\ninterface AnahtarDegerCifti<K, V> {\n    anahtar: K;\n    deger: V;\n}\n\nlet ayar: AnahtarDegerCifti<string, number> = { anahtar: \"port\", deger: 8080 };\nlet kullaniciAyari: AnahtarDegerCifti<string, boolean> = { anahtar: \"darkMode\", deger: true };<\/code><\/pre>\n<p>Generic aray\u00fczler, farkl\u0131 veri tipleriyle \u00e7al\u0131\u015fabilen yeniden kullan\u0131labilir veri yap\u0131lar\u0131 olu\u015fturmak i\u00e7in m\u00fckemmeldir. \u00d6rne\u011fin, bir generic <code>List<T><\/code> aray\u00fcz\u00fc, hem say\u0131 listeleri hem de string listeleri i\u00e7in kullan\u0131labilir.<\/p>\n<h4>Ko\u015fullu Tipler ile Aray\u00fczler<\/h4>\n<p>TypeScript 2.8 ile tan\u0131t\u0131lan ko\u015fullu tipler (conditional types), bir tipin ba\u015fka bir tipe atanabilir olup olmad\u0131\u011f\u0131na ba\u011fl\u0131 olarak farkl\u0131 tipler se\u00e7memize olanak tan\u0131r. Aray\u00fczler, bu ko\u015fullu tipleri do\u011frudan tan\u0131mlayamaz, ancak ko\u015fullu tiplerden t\u00fcretilen tipleri uygulayabilir veya kullanabilirler. Bu, daha dinamik ve esnek aray\u00fczler olu\u015fturman\u0131n dolayl\u0131 bir yoludur.<\/p>\n<pre><code class=\"language-typescript\">type MesajTipi<T> = T extends string ? { metin: string } : { veri: T };\n\ninterface Yanit<T> {\n    status: number;\n    payload: MesajTipi<T>;\n}\n\nlet stringYanit: Yanit<string> = {\n    status: 200,\n    payload: { metin: \"\u0130\u015flem ba\u015far\u0131l\u0131\" }\n};\n\nlet objeYanit: Yanit<{ id: number, name: string }> = {\n    status: 200,\n    payload: { veri: { id: 1, name: \"Test\" } }\n};\n\n\/\/ stringYanit.payload.veri; \/\/ Hata: 'metin' \u00f6zelli\u011fi var, 'veri' yok.<\/code><\/pre>\n<p>Bu \u00f6rnekte, <code>Yanit<\/code> aray\u00fcz\u00fcn\u00fcn <code>payload<\/code> \u00f6zelli\u011fi, generic <code>T<\/code> tipine ba\u011fl\u0131 olarak farkl\u0131 bir yap\u0131ya sahip olabilir. Bu, aray\u00fczlerin \u00e7ok \u00e7e\u015fitli senaryolara uyum sa\u011flamas\u0131na olanak tan\u0131r.<\/p>\n<h4>Kullan\u0131m Alanlar\u0131 (API S\u00f6zle\u015fmeleri, Konfig\u00fcrasyon Nesneleri, Durum Y\u00f6netimi)<\/h4>\n<p>Aray\u00fczlerin pratik kullan\u0131m alanlar\u0131 olduk\u00e7a geni\u015ftir:<br \/>\n*   <strong>API S\u00f6zle\u015fmeleri:<\/strong> Backend API&#8217;lerinden beklenen veya g\u00f6nderilen veri yap\u0131lar\u0131n\u0131 tan\u0131mlamak i\u00e7in kullan\u0131l\u0131r. Bu, frontend ve backend ekipleri aras\u0131nda net bir s\u00f6zle\u015fme olu\u015fturur ve entegrasyon hatalar\u0131n\u0131 azalt\u0131r.<br \/>\n*   <strong>Konfig\u00fcrasyon Nesneleri:<\/strong> Uygulama ayarlar\u0131 veya bile\u015fen konfig\u00fcrasyonlar\u0131 i\u00e7in kullan\u0131lan nesnelerin yap\u0131s\u0131n\u0131 tan\u0131mlar. Bu, ge\u00e7ersiz veya eksik ayarlar\u0131n derleme zaman\u0131nda yakalanmas\u0131n\u0131 sa\u011flar.<br \/>\n*   <strong>Durum Y\u00f6netimi:<\/strong> Redux, Vuex gibi durum y\u00f6netim k\u00fct\u00fcphanelerinde state&#8217;in (durumun) yap\u0131s\u0131n\u0131 tan\u0131mlamak i\u00e7in aray\u00fczler kullan\u0131l\u0131r. Bu, state&#8217;in tutarl\u0131 kalmas\u0131n\u0131 ve beklenmedik mutasyonlar\u0131n \u00f6nlenmesini sa\u011flar.<br \/>\n*   <strong>Veri Modelleri:<\/strong> Veritaban\u0131 kay\u0131tlar\u0131, form verileri veya di\u011fer i\u015f nesnelerinin modellerini tan\u0131mlayarak uygulaman\u0131n veri katman\u0131nda tip g\u00fcvenli\u011fi sa\u011flar.<br \/>\n*   <strong>Mocking ve Test:<\/strong> Test yazarken sahte (mock) nesneler olu\u015fturmak i\u00e7in aray\u00fczler kullan\u0131labilir. Bir aray\u00fcz\u00fc uygulayan sahte bir s\u0131n\u0131f olu\u015fturarak, ger\u00e7ek ba\u011f\u0131ml\u0131l\u0131klar olmadan bile\u015fenleri test edebiliriz.<\/p>\n<h3>Sonu\u00e7<\/h3>\n<p>TypeScript&#8217;teki aray\u00fczler, kodumuzun sa\u011flaml\u0131\u011f\u0131n\u0131, okunabilirli\u011fini ve s\u00fcrd\u00fcr\u00fclebilirli\u011fini art\u0131ran temel bir \u00f6zelliktir. Nesnelerin, fonksiyonlar\u0131n ve s\u0131n\u0131flar\u0131n belirli bir yap\u0131y\u0131 veya davran\u0131\u015f\u0131 takip etmesini sa\u011flayan g\u00fc\u00e7l\u00fc s\u00f6zle\u015fmeler olu\u015fturmam\u0131za olanak tan\u0131r. Temel \u00f6zellik tan\u0131mlamalar\u0131ndan, metot imzalar\u0131na, indekslenebilir tiplere, s\u0131n\u0131flar\u0131 uygulamaya ve hatta generic yap\u0131larla karma\u015f\u0131k senaryolara kadar geni\u015f bir kullan\u0131m yelpazesine sahiptirler.<\/p>\n<p>Aray\u00fczler ve tip takma adlar\u0131 aras\u0131ndaki farklar\u0131 anlamak, do\u011fru arac\u0131 do\u011fru senaryoda kullanmak i\u00e7in kritik \u00f6neme sahiptir. <code>interface<\/code> genellikle nesne \u015fekillerini ve s\u0131n\u0131flar i\u00e7in s\u00f6zle\u015fmeleri tan\u0131mlamakta tercih edilirken, <code>type<\/code> daha karma\u015f\u0131k tip manip\u00fclasyonlar\u0131 ve birle\u015fim tipleri i\u00e7in daha esnektir.<\/p>\n<p>TypeScript geli\u015ftirirken aray\u00fczleri etkin bir \u015fekilde kullanmak, daha az hata, daha iyi geli\u015ftirici deneyimi ve uzun vadede daha bak\u0131m\u0131 kolay uygulamalar anlam\u0131na gelir. Bu makale, TypeScript aray\u00fczlerinin temellerini ve \u00e7e\u015fitli kullan\u0131m alanlar\u0131n\u0131 anlaman\u0131z i\u00e7in kapsaml\u0131 bir ba\u015flang\u0131\u00e7 noktas\u0131 sa\u011flam\u0131\u015ft\u0131r. Art\u0131k bu g\u00fc\u00e7l\u00fc \u00f6zelli\u011fi kendi projelerinizde kullanarak kod kalitenizi bir \u00fcst seviyeye ta\u015f\u0131yabilirsiniz.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"TypeScript&#8217;te Aray\u00fczlere Giri\u015f\nTypeScript, JavaScript&#8217;e statik tip denetimi ekleyerek b\u00fcy\u00fck \u00f6l\u00e7ekli uygulamalar\u0131n geli\u015ftirilmesini kolayla\u015ft","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-38195","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>TypeScript&#039;te Aray\u00fczlere Giri\u015f - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/typescriptte-arayuzlere-giris\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"TypeScript&#039;te Aray\u00fczlere Giri\u015f\" \/>\n<meta property=\"og:description\" content=\"TypeScript&#039;te Aray\u00fczlere Giri\u015f TypeScript, JavaScript&#039;e statik tip denetimi ekleyerek b\u00fcy\u00fck \u00f6l\u00e7ekli uygulamalar\u0131n geli\u015ftirilmesini kolayla\u015ft\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/typescriptte-arayuzlere-giris\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-25T11:40:46+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"20 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/typescriptte-arayuzlere-giris\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/typescriptte-arayuzlere-giris\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"TypeScript&#8217;te Aray\u00fczlere Giri\u015f\",\"datePublished\":\"2026-01-25T11:40:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/typescriptte-arayuzlere-giris\/\"},\"wordCount\":2957,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/typescriptte-arayuzlere-giris\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/typescriptte-arayuzlere-giris\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/typescriptte-arayuzlere-giris\/\",\"name\":\"TypeScript'te Aray\u00fczlere Giri\u015f - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-01-25T11:40:46+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/typescriptte-arayuzlere-giris\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/typescriptte-arayuzlere-giris\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/typescriptte-arayuzlere-giris\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"TypeScript&#8217;te Aray\u00fczlere Giri\u015f\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"TypeScript'te Aray\u00fczlere Giri\u015f - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/typescriptte-arayuzlere-giris\/","og_locale":"tr_TR","og_type":"article","og_title":"TypeScript'te Aray\u00fczlere Giri\u015f","og_description":"TypeScript'te Aray\u00fczlere Giri\u015f TypeScript, JavaScript'e statik tip denetimi ekleyerek b\u00fcy\u00fck \u00f6l\u00e7ekli uygulamalar\u0131n geli\u015ftirilmesini kolayla\u015ft","og_url":"https:\/\/fatihsoysal.com\/blog\/typescriptte-arayuzlere-giris\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-01-25T11:40:46+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"20 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/typescriptte-arayuzlere-giris\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/typescriptte-arayuzlere-giris\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"TypeScript&#8217;te Aray\u00fczlere Giri\u015f","datePublished":"2026-01-25T11:40:46+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/typescriptte-arayuzlere-giris\/"},"wordCount":2957,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/typescriptte-arayuzlere-giris\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/typescriptte-arayuzlere-giris\/","url":"https:\/\/fatihsoysal.com\/blog\/typescriptte-arayuzlere-giris\/","name":"TypeScript'te Aray\u00fczlere Giri\u015f - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-01-25T11:40:46+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/typescriptte-arayuzlere-giris\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/typescriptte-arayuzlere-giris\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/typescriptte-arayuzlere-giris\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"TypeScript&#8217;te Aray\u00fczlere Giri\u015f"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/38195","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=38195"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/38195\/revisions"}],"predecessor-version":[{"id":38196,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/38195\/revisions\/38196"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=38195"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=38195"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=38195"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}