This page has not been translated to English yet — showing the original Turkish version.

Kodlama

TypeScript Nedir? JavaScript'ten Farkı, Kurulum ve İlk Proje

TypeScript'in JavaScript'ten farkı, neden web projelerinde standart olduğu, kurulumu ve ilk tip tanımları. Adım adım başlangıç.

TypeScript Nedir? JavaScript'ten Farkı, Kurulum ve İlk Proje
TypeScript Nedir? JavaScript'ten Farkı, Kurulum ve İlk Proje

TypeScript, JavaScript'in üzerine tip sistemi koyan bir dildir. Yazdığınız kod derlenince düz JavaScript'e dönüşür ve tarayıcıda ya da Node.js'te çalışır. Büyük web projelerinin çoğu artık TypeScript ile yazılıyor.

Neden önemli? Tipler, bir hatayı kullanıcı görmeden önce editörünüzde kırmızı çizgi olarak gösterir. Özellikle birden çok kişinin çalıştığı ya da büyüyen projelerde bu fark çok değerlidir.

Step-by-step guide
  • 6 steps
  • 3 min read
In this guide
  1. JavaScript bilmeniz gerekir mi?
  2. Node.js ve TypeScript'i kurun
  3. İlk tipli kodu yazın
  4. Nesne şekillerini tanımlayın
  5. Birleşik tipleri ve null'u yönetin
  6. Derleyin ve çalıştırın
  1. JavaScript bilmeniz gerekir mi?

    Evet, temel JavaScript bilmek işi çok kolaylaştırır: değişkenler, fonksiyonlar, diziler, nesneler. TypeScript JavaScript'in yerine geçmez, onu tamamlar. Her geçerli JavaScript dosyası zaten geçerli bir TypeScript dosyasıdır; yani öğrendiğiniz hiçbir şey boşa gitmez.

  2. Node.js ve TypeScript'i kurun

    nodejs.org adresinden güncel LTS sürümünü kurun. Sonra bir proje klasöründe:

    mkdir ts-deneme
    cd ts-deneme
    npm init -y
    npm install --save-dev typescript
    npx tsc --init

    Son komut bir tsconfig.json dosyası üretir. Bu dosya derleyicinin kurallarını belirler. Başlangıçta içindeki varsayılan ayarlar yeterlidir.

  3. İlk tipli kodu yazın

    index.ts adında bir dosya açın:

    function topla(a: number, b: number): number {
      return a + b;
    }
    
    console.log(topla(2, 3));      // 5
    console.log(topla(2, "3"));    // hata!

    Son satır editörde kırmızıya döner: "3" bir string, number bekleniyordu. Düz JavaScript'te bu satır sessizce "23" üretirdi. İşte TypeScript'in vaadi budur.

  4. Nesne şekillerini tanımlayın

    type Kullanici = {
      ad: string;
      yas: number;
      eposta?: string;   // ? işareti: isteğe bağlı
    };
    
    function selamla(k: Kullanici) {
      return `Merhaba ${k.ad}`;
    }
    
    selamla({ ad: "Ayşe", yas: 29 });        // tamam
    selamla({ ad: "Ali" });                    // hata: yas eksik

    type ve interface aynı işi görür; yeni başlayanlar için type yeterlidir.

  5. Birleşik tipleri ve null'u yönetin

    type Durum = "bekliyor" | "tamam" | "hata";
    
    function renk(d: Durum) {
      if (d === "tamam") return "yeşil";
      if (d === "hata") return "kırmızı";
      return "gri";
    }
    
    const ad: string | null = null;
    console.log(ad?.toUpperCase());  // null ise hata vermez

    Birleşik tipler (|) sayesinde bir değişkenin alabileceği değerleri tek tek sıralayabilirsiniz. Yazım hatası yaparsanız editör uyarır.

  6. Derleyin ve çalıştırın

    npx tsc
    node index.js

    tsc TypeScript dosyalarını JavaScript'e çevirir. Yeni Node.js sürümleri node index.ts ile TypeScript dosyalarını doğrudan da çalıştırabilir; ancak bu yöntem yalnızca tipleri siler, tip denetimi yapmaz. Denetim için npx tsc --noEmit komutunu kullanın.

    Gerçek projelerde genellikle Vite, Next.js ya da Astro gibi araçlar derlemeyi sizin yerinize halleder; TypeScript desteği hazır gelir.

Sık Sorulanlar

TypeScript mi JavaScript mi öğrenmeliyim?

Önce JavaScript'in temellerini, sonra TypeScript'i öğrenin. TypeScript tek başına bir başlangıç dili olarak değil, JavaScript üzerine bir katman olarak düşünülmelidir.

TypeScript yavaşlatır mı?

Tarayıcıda hiçbir fark yoktur, çünkü sonuç düz JavaScript'tir. Yalnızca geliştirirken derleme adımı eklenir.

Yapay zekâ araçları TypeScript ile daha iyi mi çalışır?

Tipler, yapay zekâ asistanına ve size kodun beklentisini açıkça söyler. Bu nedenle üretilen kodda hataları yakalamak genelde daha kolaydır.

TypeScript 7 neyi değiştiriyor?

TypeScript 7, derleyicinin daha hızlı çalışması için yeniden yazılmış sürümdür. Dili öğrenme açısından bir fark yoktur; bu rehberdeki kodlar aynen geçerlidir.

Next guides

Comments (0)

No comments yet.

Your email will not be published, it is kept only for moderation. See our privacy policy. Log in and your comment will be saved under your name.

Comments are moderated before publishing.