TypeScript Nedir ve Neden Projelerinizde Kullanmalısınız?

Modern web geliştirme dünyasında, büyük ve karmaşık projelerin yönetimi giderek daha zorlu bir hal alıyor. JavaScript’in esnek yapısı, bazen beklenmedik hatalara ve bakım zorluklarına yol açabiliyor. Peki, bu sorunların üstesinden gelmek ve daha güvenli, ölçeklenebilir uygulamalar geliştirmek mümkün mü? İşte tam bu noktada TypeScript devreye giriyor! Bu kapsamlı rehberde, sıfırdan başlayarak güçlü bir TypeScript projesi kurmanın tüm adımlarını, ipuçlarını ve en iyi uygulamalarını keşfedeceksiniz.

TypeScript Nedir ve Neden Projelerinizde Kullanmalısınız?

TypeScript, Microsoft tarafından geliştirilen ve JavaScript’in bir üst kümesi olan açık kaynaklı bir programlama dilidir. Başka bir deyişle, tüm geçerli JavaScript kodları aynı zamanda geçerli TypeScript kodlarıdır. Ancak TypeScript, JavaScript’e statik tip denetimi, sınıflar, arayüzler ve modüller gibi gelişmiş özellikler ekleyerek, özellikle büyük ölçekli uygulamaların geliştirilmesini kolaylaştırır. Temelde, TypeScript yazdığınız kodu derleyerek (transpile ederek) standart JavaScript’e dönüştürür ve bu süreçte potansiyel hataları çalışma zamanından önce tespit etmenizi sağlar. Bu, geliştirme sürecinde zaman ve maliyet tasarrufu anlamına gelir.

Geliştiricilerin TypeScript’i tercih etmelerinin pek çok geçerli nedeni bulunmaktadır. Öncelikle, tip güvenliği sağlar. Değişkenlerin, fonksiyon parametrelerinin ve dönüş değerlerinin tiplerini açıkça belirtmek, kodunuzun daha öngörülebilir olmasını ve tip uyumsuzluğu kaynaklı hataların önüne geçilmesini mümkün kılar. Örneğin, bir fonksiyona sayı beklerken yanlışlıkla bir dize göndermeniz durumunda, TypeScript derleyici hatası alırsınız. Bu, çalışma zamanında ortaya çıkabilecek beklenmedik davranışları engeller. İkinci olarak, kod okunabilirliğini ve bakımını artırır. Tip tanımları, kodun ne beklediğini ve ne döndürdüğünü açıkça gösterir, bu da özellikle büyük ekiplerde veya uzun süre sonra koda geri dönüldüğünde anlaşılırlığı önemli ölçüde artırır. Üçüncü olarak, geliştirici verimliliğini yükseltir. Visual Studio Code gibi modern IDE’ler, TypeScript’in sağladığı tip bilgileri sayesinde gelişmiş otomatik tamamlama, kod navigasyonu ve hata ayıklama özellikleri sunar. Bu, kod yazma hızınızı artırır ve hataları daha hızlı bulmanıza yardımcı olur.

Bir diğer önemli avantaj ise ölçeklenebilirliktir. Kurumsal düzeyde büyük projelerde, yüz binlerce satır kodun yönetimi JavaScript ile oldukça karmaşık hale gelebilir. TypeScript’in modüler yapısı ve tip sistemi, bu tür projelerin daha düzenli ve yönetilebilir olmasını sağlar. Ayrıca, birçok popüler JavaScript kütüphanesi ve çerçevesi (React, Angular, Vue, Node.js) TypeScript ile mükemmel uyum içindedir ve çoğu zaman kendi tip tanımlarıyla birlikte gelir. Bu da mevcut ekosisteme kolayca entegre olabileceğiniz anlamına gelir. Son olarak, TypeScript, JavaScript’in gelecekteki özelliklerini (örneğin, yeni ECMAScript standartları) genellikle daha erken destekler ve bunları güncel tarayıcılarda veya Node.js ortamlarında çalıştırılabilir hale getirir. Dolayısıyla, TypeScript sadece bir dil değil, aynı zamanda daha güvenli, daha üretken ve daha sürdürülebilir yazılım geliştirme pratiklerini benimsemenizi sağlayan kapsamlı bir araç setidir.

TypeScript Geliştirme Ortamı Nasıl Hazırlanır?

Yeni bir TypeScript projesine başlamadan önce, bilgisayarınızda gerekli geliştirme ortamını kurmanız gerekmektedir. Bu süreç, temel olarak Node.js’i, bir paket yöneticisini (npm veya Yarn) ve bir kod düzenleyiciyi (tercihen Visual Studio Code) içerir. Gelin bu adımları detaylıca inceleyelim.

1. Node.js ve npm Kurulumu: TypeScript kodunuzu derlemek ve çalıştırmak için bir JavaScript çalışma zamanına ihtiyacınız vardır. Node.js, sunucu tarafı JavaScript çalıştırma ortamı olmasının yanı sıra, npm (Node Package Manager) ile birlikte gelir. npm, TypeScript derleyicisi ve diğer tüm kütüphaneler için bir paket yöneticisi görevi görür. Node.js’i kurmak için resmi web sitesini ziyaret edin ve işletim sisteminize uygun kararlı (LTS) sürümü indirin. Kurulum adımlarını takip ettikten sonra, komut istemcisini veya terminali açarak kurulumun başarılı olup olmadığını kontrol edebilirsiniz:

    node -v
    npm -v
    

Bu komutlar, kurulu Node.js ve npm sürümlerini göstermelidir. Alternatif olarak, Yarn gibi başka bir paket yöneticisi kullanmayı tercih edebilirsiniz. Yarn, npm’e benzer işlevsellik sunar ve bazı durumlarda daha hızlı olabilir. Yarn’ı npm aracılığıyla kurabilirsiniz:

    npm install -g yarn
    yarn -v
    

Hangi paket yöneticisini seçerseniz seçin, projenizin bağımlılıklarını yönetmek için birine ihtiyacınız olacaktır.

2. TypeScript Derleyicisinin Kurulumu: Node.js ve paket yöneticiniz hazır olduğunda, TypeScript derleyicisini (tsc) global olarak kurmanız gerekir. Bu, TypeScript kodunuzu JavaScript’e dönüştürecek ana araçtır. Komut istemcinizde aşağıdaki komutu çalıştırın:

    npm install -g typescript
    

veya Yarn kullanıyorsanız:

    yarn global add typescript
    

Kurulum tamamlandıktan sonra, tsc -v komutuyla TypeScript derleyicisinin sürümünü kontrol edebilirsiniz. Bu derleyici, daha sonra göreceğimiz gibi, .ts uzantılı dosyalarınızı .js uzantılı dosyalara çevirmek için kullanılacaktır.

3. Kod Düzenleyici (IDE) Seçimi: TypeScript geliştirme için en popüler ve önerilen kod düzenleyici Visual Studio Code’dur (VS Code). Microsoft tarafından geliştirilen VS Code, TypeScript için mükemmel yerleşik desteğe sahiptir. Akıllı otomatik tamamlama (IntelliSense), hata ayıklama araçları, kod navigasyonu ve entegre terminal gibi özellikler sunar. VS Code’u resmi web sitesinden ücretsiz olarak indirebilirsiniz. Kurulumdan sonra, TypeScript dil servisleri otomatik olarak etkinleşecektir. Diğer popüler IDE’ler arasında WebStorm ve Sublime Text gibi seçenekler de bulunmaktadır, ancak VS Code’un TypeScript ile entegrasyonu genellikle en sorunsuz olanıdır.

Bu adımları tamamladıktan sonra, yeni bir TypeScript projesi oluşturmaya ve kod yazmaya hazırsınız demektir. Ortamınızın doğru şekilde ayarlandığından emin olmak, sorunsuz bir geliştirme deneyimi için kritik öneme sahiptir. Herhangi bir adımda takılırsanız, genellikle hata mesajları sorunun ne olduğunu açıkça belirtir ve internet üzerindeki geniş geliştirici topluluklarından hızlıca yardım bulabilirsiniz.

Adım Adım Yeni Bir TypeScript Projesi Başlatma ve Temel Yapılandırma

Geliştirme ortamınız hazır olduğuna göre, şimdi ilk TypeScript projemizi oluşturalım. Bu bölüm, temel dosya yapısından tsconfig.json ayarlarının derinlemesine incelenmesine kadar tüm süreci kapsayacaktır. Amacımız, hem basit bir proje başlatmayı öğrenmek hem de TypeScript’in projenizi nasıl şekillendirdiğini anlamaktır.

Yeni Bir Proje Klasörü Oluşturma ve Başlatma

İlk olarak, projeniz için bir klasör oluşturun ve terminalinizde bu klasöre gidin. Örneğin:

    mkdir ilk-ts-projem
    cd ilk-ts-projem
    

Ardından, projenizi bir Node.js projesi olarak başlatmak için npm veya Yarn kullanın. Bu, package.json dosyasını oluşturacaktır. Bu dosya, projenizin metadata’sını (adı, sürümü, açıklaması vb.) ve bağımlılıklarını içerir.

    npm init -y
    

veya

    yarn init -y
    

-y bayrağı, tüm varsayılan seçenekleri kabul etmenizi sağlar. Bu adım, projenizin temel iskeletini oluşturur. Şimdi TypeScript derleyicisini bu projeye özgü bir bağımlılık olarak ekleyelim. Bu, projenizi başkalarıyla paylaştığınızda, onların da doğru TypeScript sürümünü kullanmasını sağlar.

    npm install typescript --save-dev
    

veya

    yarn add typescript --dev
    

--save-dev veya --dev, TypeScript’in sadece geliştirme ortamında gerekli olan bir bağımlılık olduğunu belirtir.

tsconfig.json Dosyası ve Önemi

TypeScript projenizin kalbi, tsconfig.json dosyasıdır. Bu dosya, TypeScript derleyicisine (tsc) projenizi nasıl derlemesi gerektiğini söyleyen tüm yapılandırma ayarlarını içerir. Bu dosyayı oluşturmak için terminalde aşağıdaki komutu çalıştırın:

    npx tsc --init
    

npx komutu, yerel olarak kurulu paketleri çalıştırmanıza olanak tanır. Bu komut, projenizin kök dizininde varsayılan ayarlarla dolu bir tsconfig.json dosyası oluşturacaktır. Bu dosya, yorum satırlarıyla birlikte birçok seçenek içerir. Gelin en önemli ayarlara odaklanalım:

    {
      "compilerOptions": {
        "target": "es2016",                       /* Hedef JavaScript sürümü. Genellikle "es2016" veya "es2020" kullanılır. */
        "module": "commonjs",                     /* Modül sistemi. Node.js için "commonjs", tarayıcı için "esnext" veya "es2015". */
        "outDir": "./dist",                       /* Derlenmiş JS dosyalarının kaydedileceği dizin. */
        "rootDir": "./src",                       /* TypeScript kaynak dosyalarının bulunduğu dizin. */
        "strict": true,                           /* Tüm sıkı tip denetleme seçeneklerini etkinleştirir. Şiddetle tavsiye edilir. */
        "esModuleInterop": true,                  /* CommonJS/ES modülleri arasındaki uyumluluğu sağlar. */
        "skipLibCheck": true,                     /* Deklarasyon dosyalarının tip denetimini atlar. Performansı artırır. */
        "forceConsistentCasingInFileNames": true  /* Aynı dosya için farklı büyük/küçük harf kullanımını engeller. */
      },
      "include": ["src/**/*"],                    /* Derlenecek dosyaları belirtir. */
      "exclude": ["node_modules", "**/*.spec.ts"] /* Derlenmeyecek dosyaları belirtir. */
    }
    

• target: TypeScript’in hangi ECMAScript sürümüne derleneceğini belirler. Daha modern bir sürüm (örn. es2020) seçmek, daha az derleme kodu ve daha fazla yerel tarayıcı/Node.js optimizasyonu anlamına gelir.
• module: TypeScript’in hangi modül sistemini kullanacağını belirtir (CommonJS, ESNext, UMD vb.). Node.js projeleri için genellikle commonjs veya esnext tercih edilir. Tarayıcı tabanlı projeler için esnext daha yaygındır.
• outDir: Derlenmiş JavaScript dosyalarının kaydedileceği dizini belirler. Genellikle ./dist veya ./build olarak ayarlanır.
• rootDir: TypeScript kaynak dosyalarınızın nerede olduğunu belirtir. Bu, derleyicinin kaynak dizin yapısını koruyarak çıktı dizinine yansıtmasını sağlar. Genellikle ./src olarak ayarlanır.
• strict: Bu bayrak, TypeScript’in en sıkı tip denetim modunu etkinleştirir. Bu, noImplicitAny, noImplicitReturns, noFallthroughCasesInSwitch ve noUnusedLocals gibi birçok alt bayrağı içerir. Yeni projeler için kesinlikle etkinleştirilmesi önerilir, çünkü potansiyel hataları erken aşamada yakalar.
• esModuleInterop: Modüllerin nasıl içe aktarıldığıyla ilgili bir uyumluluk bayrağıdır. Özellikle CommonJS modüllerini ES modülleri gibi içe aktarırken sorunları önler.
• include ve exclude: Derleyiciye hangi dosyaların işleneceğini (include) ve hangilerinin göz ardı edileceğini (exclude) söyler. Genellikle kaynak dosyalarınız src klasöründe bulunur ve node_modules ile test dosyaları hariç tutulur.

İlk TypeScript Dosyasını Oluşturma ve Çalıştırma

Şimdi src adında bir klasör oluşturalım ve içine basit bir TypeScript dosyası ekleyelim:

    mkdir src
    

src/index.ts dosyasını oluşturun ve aşağıdaki kodu ekleyin:

    // src/index.ts
    function selamVer(isim: string): string {
        return Merhaba, ${isim}! TypeScript dünyasına hoş geldiniz.;
    }

    const kullaniciAdi: string = "Geliştirici";
    console.log(selamVer(kullaniciAdi));

    // Tip hatası örneği (derleme zamanında yakalanır)
    // console.log(selamVer(123)); // Hata: 'number' türü 'string' türüne atanamaz.
    

Bu kodda, selamVer fonksiyonunun bir string parametresi aldığını ve bir string döndürdüğünü açıkça belirttik. kullaniciAdi değişkeninin de bir string olduğunu tanımladık. TypeScript’in tip denetimini test etmek için yorum satırı içindeki hatalı satırı aktif ederseniz, derleme sırasında bir hata alırsınız.

Projenizi derlemek için terminalde tsc komutunu çalıştırın:

    npx tsc
    

Eğer tsconfig.json dosyanızda "outDir": "./dist" olarak ayarlandıysa, bu komut ./dist/index.js adında bir JavaScript dosyası oluşturacaktır. Bu dosyanın içeriği şöyle görünecektir:

    // dist/index.js
    function selamVer(isim) {
        return Merhaba, ${isim}! TypeScript dünyasına hoş geldiniz.;
    }
    const kullaniciAdi = "Geliştirici";
    console.log(selamVer(kullaniciAdi));
    

Gördüğünüz gibi, tip tanımlamaları (: string) derlenmiş JavaScript çıktısında yer almaz, çünkü bunlar sadece geliştirme zamanında tip denetimi için kullanılır. Şimdi derlenmiş JavaScript dosyasını Node.js ile çalıştırabilirsiniz:

    node dist/index.js
    

Çıktı olarak Merhaba, Geliştirici! TypeScript dünyasına hoş geldiniz. mesajını görmelisiniz. Bu adımlarla, temel bir TypeScript projesini başarıyla kurmuş ve çalıştırmış oldunuz. Bu yapılandırma, daha karmaşık projelere temel oluşturacaktır.

Modül Sistemleri ve Kütüphane Entegrasyonu Nasıl Yapılır?

Modern JavaScript ve TypeScript projelerinde modüller, kodun düzenli, yeniden kullanılabilir ve yönetilebilir olmasını sağlayan temel yapı taşlarıdır. Ayrıca, harici kütüphaneleri projemize dahil etmek ve onların tip tanımlarını kullanmak da kritik bir süreçtir. Bu bölümde, TypeScript projelerinde modül sistemlerini, kütüphane entegrasyonunu ve tip tanımlarının önemini ele alacağız.

JavaScript Modül Sistemleri ve TypeScript

JavaScript ekosisteminde iki ana modül sistemi bulunmaktadır: CommonJS ve ES Modules (ESM). TypeScript, her ikisini de destekler ve tsconfig.json dosyasındaki "module" seçeneğiyle hangisini kullanacağınızı belirtirsiniz.

• CommonJS: Genellikle Node.js ortamlarında kullanılır. Modülleri require() ile içe aktarır ve module.exports veya exports ile dışa aktarır.
• ES Modules (ESM): ECMAScript standardının bir parçasıdır ve modern tarayıcılarda ve Node.js’in daha yeni sürümlerinde (.mjs uzantısı veya "type": "module" ile) kullanılır. import ve export anahtar kelimelerini kullanır.

Projeniz bir Node.js uygulamasıysa, genellikle "module": "commonjs" veya "module": "esnext" (daha yeni Node.js sürümleri için) kullanırsınız. Eğer bir frontend projesi geliştiriyorsanız ve bir paketleyici (Webpack, Vite) kullanıyorsanız, "module": "esnext" veya "module": "es2020" gibi seçenekler daha uygun olabilir, çünkü paketleyiciler bu modülleri tarayıcı uyumlu hale getirir.

Örnek Modül Kullanımı (ES Modules ile):

src/utils.ts:

    // src/utils.ts
    export function toUpper(text: string): string {
        return text.toUpperCase();
    }

    export const PI: number = 3.14159;
    

src/index.ts:

    // src/index.ts
    import { toUpper, PI } from './utils';

    const mesaj: string = "merhaba typescript";
    console.log(toUpper(mesaj)); // MERHABA TYPESCRIPT
    console.log(Pi sayısı: ${PI}); // Pi sayısı: 3.14159
    

Bu örnekte, utils.ts dosyasındaki fonksiyon ve sabit, index.ts dosyasına import anahtar kelimesiyle dahil edilmiştir. tsconfig.json dosyanızda "module": "esnext" ve "target": "es2020" gibi ayarların bulunduğundan emin olun.

Harici Kütüphaneler ve Tip Tanımları (Type Definitions)

Çoğu modern JavaScript kütüphanesi, TypeScript ile uyumlu olacak şekilde kendi tip tanımlarıyla birlikte gelir. Ancak, bazı eski veya sadece JavaScript olarak yazılmış kütüphaneler için tip tanımlarını ayrı olarak yüklemeniz gerekebilir. Bu tip tanımları genellikle DefinitelyTyped projesi tarafından sağlanır ve @types/ ön ekiyle npm üzerinden kurulur.

Vaka Analizi: Express.js ile Bir Web API Projesi Kurulumu

Node.js tabanlı bir web API oluşturmak için popüler Express.js kütüphanesini TypeScript ile nasıl kullanacağımıza bakalım. Bu senaryo, harici bir kütüphanenin entegrasyonunu ve tip tanımlarının nasıl yönetileceğini gösteren harika bir örnektir.

Adım 1: Express ve Tip Tanımlarını Yükleme

Öncelikle, Express.js’i ve onun TypeScript tip tanımlarını projenize ekleyin:

    npm install express
    npm install --save-dev @types/express @types/node
    

veya Yarn ile:

    yarn add express
    yarn add --dev @types/express @types/node
    

Burada @types/express, Express kütüphanesinin TypeScript tip tanımlarını sağlar ve @types/node ise Node.js’in temel API’leri için tip tanımlarını içerir, bu da geliştirme sırasında otomatik tamamlama ve tip denetimi için gereklidir.

Adım 2: Express Uygulaması Oluşturma (src/app.ts)

src/app.ts adında bir dosya oluşturun ve içine basit bir Express uygulaması yazın:

    // src/app.ts
    import express, { Request, Response } from 'express';

    const app = express();
    const port = 3000;

    app.get('/', (req: Request, res: Response) => {
        res.send('Merhaba, TypeScript ile Express API!');
    });

    app.get('/api/kullanicilar', (req: Request, res: Response) => {
        const kullanicilar = [
            { id: 1, ad: 'Ali', email: 'ali@example.com' },
            { id: 2, ad: 'Ayşe', email: 'ayse@example.com' }
        ];
        res.json(kullanicilar);
    });

    app.listen(port, () => {
        console.log(Sunucu http://localhost:${port} adresinde çalışıyor.);
    });
    

Bu kodda, express modülünü içe aktarıyoruz. Request ve Response tipleri, Express’in tip tanımlarından gelir ve rotaların geri çağırım fonksiyonlarındaki parametrelerin tiplerini belirtmemizi sağlar. Bu sayede, req ve res objeleri üzerinde çalışırken tam IntelliSense desteği alırsınız ve olası tip hataları derleme zamanında yakalanır.

Adım 3: package.json Komutlarını Güncelleme

Projenizi daha kolay derlemek ve çalıştırmak için package.json dosyanıza bazı komutlar ekleyebilirsiniz:

    {
      "name": "ilk-ts-projem",
      "version": "1.0.0",
      "description": "",
      "main": "dist/app.js",
      "scripts": {
        "build": "npx tsc",
        "start": "node dist/app.js",
        "dev": "npx tsc --watch & node dist/app.js"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "@types/express": "^4.17.21",
        "@types/node": "^20.12.7",
        "typescript": "^5.4.5"
      },
      "dependencies": {
        "express": "^4.19.2"
      }
    }
    

• "build": TypeScript kodunuzu JavaScript’e derler.
• "start": Derlenmiş JavaScript uygulamasını çalıştırır.
• "dev": Geliştirme sırasında kaynak dosyalarınızı izler ve değişikliklerde otomatik olarak derler (--watch), ardından uygulamayı çalıştırır. Ancak bu basit dev komutu, derleme bittiğinde Node’u yeniden başlatmaz. Gerçek bir geliştirme ortamı için nodemon gibi araçlar kullanmak daha iyi olacaktır.

Adım 4: Uygulamayı Çalıştırma

Şimdi projenizi derleyin ve çalıştırın:

    npm run build
    npm run start
    

Tarayıcınızda http://localhost:3000 adresine giderek “Merhaba, TypeScript ile Express API!” mesajını görmelisiniz. http://localhost:3000/api/kullanicilar adresinde ise JSON formatında kullanıcı listesini göreceksiniz. Bu vaka analizi, TypeScript’in harici kütüphanelerle nasıl sorunsuz bir şekilde çalıştığını ve tip güvenliğinin geliştirme deneyimini nasıl iyileştirdiğini açıkça göstermektedir. Modül sistemleri ve tip tanımlarının doğru kullanımı, büyük ve karmaşık projelerde kod kalitesini ve sürdürülebilirliği artırmanın anahtarıdır.

TypeScript Projelerinde Gelişmiş Yapılandırmalar ve Optimizasyonlar

Temel bir TypeScript projesi kurduktan sonra, geliştirme sürecini daha verimli hale getirmek, kod kalitesini artırmak ve uygulamanızın performansını optimize etmek için bazı ileri düzey yapılandırmalar ve araçlar kullanabilirsiniz. Bu bölüm, linting, kod biçimlendirme, paketleyiciler ve mobil uyumlu tasarım örnekleri gibi konuları ele alacaktır.

Kod Kalitesini Artırma: Linting ve Biçimlendirme

Büyük projelerde tutarlı bir kod stili ve kalitesi sağlamak için linting ve biçimlendirme araçları vazgeçilmezdir.

• ESLint: JavaScript ve TypeScript kodunuzdaki potansiyel hataları, stil tutarsızlıklarını ve şüpheli yapıları tespit eden popüler bir linting aracıdır. Projenize ESLint’i entegre etmek için aşağıdaki adımları izleyebilirsiniz:

    npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
    npx eslint --init
    

npx eslint --init komutu, size bir dizi soru sorarak .eslintrc.js dosyasını yapılandırmanıza yardımcı olacaktır. Bu dosya, kuralları, eklentileri ve uzantıları tanımlar. Örneğin, React veya Node.js ortamları için özel kurallar ekleyebilirsiniz. @typescript-eslint/parser ve @typescript-eslint/eslint-plugin, ESLint’in TypeScript kodunu anlamasını ve ona özgü kuralları uygulamasını sağlar.

• Prettier: Kodunuzu otomatik olarak biçimlendiren bir araçtır. ESLint ile birlikte kullanıldığında, kod stilini tutarlı tutarak manuel biçimlendirme çabasını ortadan kaldırır.

    npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier
    

Daha sonra .eslintrc.js dosyanızda Prettier’ı bir kural olarak etkinleştirmeniz gerekir. Bu araçlar, özellikle büyük ekiplerde kod inceleme süreçlerini hızlandırır ve geliştiricilerin daha önemli görevlere odaklanmasını sağlar.

Uygulama Boyutunu ve Performansı Optimize Etme: Paketleyiciler (Bundlers)

Frontend tabanlı TypeScript projelerinde, yazdığınız modülleri tek bir dosya veya birkaç dosyada birleştirmek (paketlemek) ve tarayıcıya göndermek için paketleyiciler kullanılır. Bu, HTTP istek sayısını azaltır ve uygulamanın yükleme süresini optimize eder. En popüler paketleyiciler Webpack ve Vite’tır.

• Webpack: Çok güçlü ve esnek bir paketleyicidir. Geniş bir eklenti (plugin) ve yükleyici (loader) ekosistemine sahiptir, bu da onu hemen hemen her türlü proje için uygun hale getirir. Ancak yapılandırması karmaşık olabilir.
• Vite: Daha modern ve hızlı bir alternatif olarak ortaya çıkmıştır. Geliştirme sunucusunda ES modüllerini kullanarak çok daha hızlı sıcak modül değişimi (HMR) sunar ve üretim derlemesi için Rollup’ı kullanır.

Örneğin, bir React projesini TypeScript ile kurarken Vite’ı kullanmak, hızlı bir başlangıç ve geliştirme deneyimi sağlar:

    npm create vite@latest
    # Proje adını ve framework olarak React, varyant olarak TypeScript seçin.
    cd your-project-name
    npm install
    npm run dev
    

Bu, size önceden yapılandırılmış bir TypeScript + React projesi sunar ve Vite’ın hızlı geliştirme sunucusunu kullanır. Paketleyiciler, TypeScript kodunuzu derlemekle kalmaz, aynı zamanda CSS, resimler ve diğer statik varlıkları da işleyerek uygulamanızın dağıtıma hazır hale gelmesini sağlar.

Test Ortamının Kurulumu

Yazılım kalitesini sağlamanın bir diğer önemli yolu da test yazmaktır. TypeScript projelerinde testler için Jest veya Vitest gibi çerçeveler popülerdir.

    npm install --save-dev jest @types/jest ts-jest
    npx ts-jest config:init
    

Bu komutlar, Jest’i, Jest için TypeScript tip tanımlarını ve TypeScript kodunu Jest ile çalıştırmak için ts-jest dönüştürücüsünü kurar. ts-jest config:init komutu, jest.config.js dosyasını oluşturur. Artık .test.ts veya .spec.ts uzantılı test dosyaları yazabilir ve bunları npm test komutuyla çalıştırabilirsiniz.

Mobil Uyumlu HTML ve CSS Örneği

TypeScript projeleri genellikle web uygulamaları geliştirmek için kullanılır ve bu uygulamaların mobil cihazlarda da düzgün çalışması gerekir. Mobil uyumlu (responsive) tasarım, CSS medya sorguları kullanılarak sağlanır. İşte bir TypeScript projesinde geliştirilen bir UI bileşeni için temel bir mobil uyumlu CSS örneği:

    <!-- Bu HTML, bir TypeScript React/Vue bileşeninin render ettiği çıktı olabilir -->
    <div class="responsive-card-container">
        <div class="card">
            <h3>Ürün A</h3>
            <p>Bu, harika bir ürünün açıklamasıdır.</p>
            <button>Daha Fazla</button>
        </div>
        <div class="card">
            <h3>Ürün B</h3>
            <p>Bu da bir başka harika ürünün açıklamasıdır.</p>
            <button>Daha Fazla</button>
        </div>
    </div>
    

    /* styles.css veya bir .scss/tailwind dosyası */
    .responsive-card-container {
        display: flex;
        flex-direction: column; /* Mobil cihazlarda kartlar alt alta */
        gap: 20px;
        padding: 15px;
        max-width: 1200px;
        margin: 0 auto;
    }

    .card {
        background-color: #ffffff;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        text-align: center;
    }

    .card h3 {
        color: #333;
        margin-bottom: 10px;
    }

    .card p {
        color: #666;
        font-size: 0.9em;
        line-height: 1.5;
        margin-bottom: 15px;
    }

    .card button {
        background-color: #007bff;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .card button:hover {
        background-color: #0056b3;
    }

    /* Tablet ve küçük masaüstü ekranlar için medya sorgusu */
    @media (min-width: 768px) {
        .responsive-card-container {
            flex-direction: row; /* Tablette yan yana */
            flex-wrap: wrap;
            justify-content: space-around;
        }
        .card {
            flex: 1 1 calc(50% - 40px); /* İki sütun */
            max-width: calc(50% - 40px);
        }
    }

    /* Büyük masaüstü ekranlar için medya sorgusu */
    @media (min-width: 1024px) {
        .card {
            flex: 1 1 calc(33.33% - 40px); /* Üç sütun */
            max-width: calc(33.33% - 40px);
        }
    }
    

Bu CSS kodu, .responsive-card-container içindeki kartların ekran boyutuna göre düzenini değiştirir. Küçük ekranlarda kartlar alt alta sıralanırken, tablet boyutunda iki sütuna, büyük masaüstü boyutunda ise üç sütuna geçer. Bu tür CSS yapıları, bir TypeScript projesinde React, Vue veya Angular gibi bir framework ile geliştirilen kullanıcı arayüzlerinin mobil cihazlarda da erişilebilir ve estetik olmasını sağlar.

Bu gelişmiş yapılandırmalar ve araçlar, TypeScript projelerinizin sadece tip güvenli olmasını değil, aynı zamanda yüksek kaliteli, performanslı ve bakımı kolay olmasını da sağlar. Her projenin ihtiyaçları farklı olsa da, bu araçların çoğu modern geliştirme iş akışının ayrılmaz bir parçasıdır.

Sonuç ve Sıkça Sorulan Sorular

Bu kapsamlı makalede, yeni bir TypeScript projesi kurmanın tüm inceliklerini adım adım keşfettik. TypeScript’in ne olduğundan, neden bu kadar değerli bir araç olduğuna, geliştirme ortamının nasıl hazırlanacağından, temel ve ileri düzey yapılandırmalara kadar birçok konuya değindik. Statik tip denetimi sayesinde daha güvenilir kodlar yazmanın, modül sistemleri ve kütüphane entegrasyonu ile projelerinizi daha yönetilebilir hale getirmenin ve linting, biçimlendirme, paketleyiciler gibi araçlarla kod kalitesini ve performansı artırmanın yollarını gördük. Özellikle Express.js ile bir web API kurulumu vaka analizi, TypeScript’in gerçek dünya senaryolarında nasıl kullanılabileceğine dair somut bir örnek sundu. Unutmayın ki TypeScript’e yatırım yapmak, uzun vadede daha az hata, daha kolay bakım ve daha üretken bir geliştirme deneyimi anlamına gelir.

TypeScript, modern yazılım geliştirme dünyasında giderek daha fazla benimsenen bir standart haline gelmektedir. Özellikle büyük ölçekli ve ekip tabanlı projelerde sağladığı avantajlar göz ardı edilemez. Bu rehberdeki bilgileri uygulayarak, sağlam temellere sahip, ölçeklenebilir ve bakımı kolay TypeScript projeleri oluşturmaya başlayabilirsiniz. Şimdi, sıkça sorulan bazı sorulara göz atalım:

Sıkça Sorulan Sorular (SSS)