Neler yeni

Yazılım Forum

Tüm özelliklerimize erişmek için şimdi bize katılın. Kayıt olduktan ve giriş yaptıktan sonra konu oluşturabilecek, mevcut konulara yanıt gönderebilecek, itibar kazanabilecek, özel mesajlaşmaya erişebilecek ve çok daha fazlasını yapabileceksiniz! Bu hizmetlerimiz ise tamamen ücretsiz ve kurallara uyulduğu sürece sınırsızdır, o zaman ne bekliyorsunuz? Hadi, sizde aramıza katılın!

TypeScript'e Hızlı Başlangıç: Temel Adımlar ve Geliştirme Sürecinizi Hızlandırın

TypeScript'e Giriş: Neden Kullanmalısınız?

Web geliştirme dünyası sürekli evrim geçirirken, geliştiricilerin daha büyük, daha karmaşık uygulamaları daha verimli bir şekilde yönetmelerine yardımcı olacak araçlara olan ihtiyaç da artıyor. İşte tam bu noktada TypeScript devreye giriyor. Microsoft tarafından geliştirilen ve açık kaynaklı olan TypeScript, JavaScript'in bir üst kümesidir. Yani, geçerli her JavaScript kodu aynı zamanda geçerli bir TypeScript kodudur. Ancak TypeScript, JavaScript'e statik tipleme, arayüzler, sınıflar gibi modern programlama dillerinin özelliklerini ekleyerek geliştirme sürecine önemli avantajlar getirir.

Peki, neden TypeScript kullanmalısınız? Temel olarak, büyük ölçekli uygulamalarda kodun daha okunabilir, bakımı daha kolay ve hata bulması daha az zahmetli olmasını sağlar. Geliştirme sırasında tip hatalarını yakalamanıza olanak tanıyarak, çalışma zamanı hatalarının önüne geçer. Bu, özellikle ekip içinde çalışırken veya projenin zamanla büyümesiyle büyük bir fark yaratır. IDE'ler (Entegre Geliştirme Ortamı) için daha iyi otamlama (autocomplete) ve kod gezinme yetenekleri sunar, bu da geliştirme verimliliğini artırır.

Kurulum ve İlk Adımlar

TypeScript kullanmaya başlamak oldukça basittir. Öncelikle, sisteminizde Node.js ve npm (Node Package Manager) kurulu olması gerekmektedir. Eğer kurulu değilse, Node.js resmi web sitesinden kolayca kurabilirsiniz.

Kurulum tamamlandıktan sonra, TypeScript derleyicisini global olarak kurmak için aşağıdaki komutu kullanabilirsiniz:

Kod:
npm install -g typescript

Bu komut, `tsc` (TypeScript Compiler) komutunu sisteminizde erişilebilir hale getirecektir. Şimdi ilk TypeScript dosyamızı oluşturalım. Proje dizininizde `hello.ts` adında bir dosya oluşturun ve içine aşağıdaki kodu yazın:

Kod:
function selamla(isim: string) {
  return `Merhaba, ${isim}!`;
}

let kullanici = "Dünya";
console.log(selamla(kullanici));

// Tip hatası örneği (derleme zamanında yakalanır)
// let sayi: number = "metin"; // Hata: Tür 'string' türe 'number' atanamaz.

Bu kodu derlemek için terminalde aşağıdaki komutu çalıştırın:

Kod:
tsc hello.ts

Bu komut, `hello.ts` dosyasını `hello.js` adında bir JavaScript dosyasına dönüştürecektir. Artık bu JavaScript dosyasını Node.js ile çalıştırabilirsiniz:

Kod:
node hello.js[/ncode]

Çıktı olarak "Merhaba, Dünya!" görmelisiniz. Gördüğünüz gibi, TypeScript kodu nihayetinde standart JavaScript'e derlenir, bu da onu tarayıcılarda veya Node.js ortamlarında sorunsuz bir şekilde kullanabileceğiniz anlamına gelir.

[b]Temel Tipler[/b]

TypeScript, JavaScript'in temel tiplerine ek olarak bazı yeni tipler sunar. İşte en sık kullanılanlar:

[list]
[*] [b]number:[/b] Hem tam sayıları hem de ondalık sayıları temsil eder. Örn: `let yas: number = 30;`
[*] [b]string:[/b] Metinsel verileri temsil eder. Örn: `let ad: string = "Alice";`
[*] [b]boolean:[/b] `true` veya `false` değerlerini alır. Örn: `let aktifMi: boolean = true;`
[*] [b]any:[/b] Herhangi bir tipte veri tutabilir. Tip kontrolünü geçici olarak devre dışı bırakmak için kullanılır. Örn: `let veri: any = "Merhaba"; veri = 123;`
[*] [b]void:[/b] Bir fonksiyonun hiçbir değer döndürmediğini belirtir. Örn: `function logla(): void { console.log("Mesaj"); }`
[*] [b]null[/b] ve [b]undefined:[/b] JavaScript'teki karşılıklarıdır ve varsayılan olarak diğer tiplere atanabilirler (katı null kontrolü açık değilse).
[*] [b]Array:[/b] Aynı tipten elemanların listesi. Örn: `let sayilar: number[] = [1, 2, 3];` veya `let isimler: Array<string> = ["Ali", "Ayşe"];`
[*] [b]Tuple:[/b] Farklı tiplerde, sabit sayıda elemanın bulunduğu bir dizi. Örn: `let kullaniciBilgisi: [string, number] = ["Mehmet", 25];`
[*] [b]Enum:[/b] Bir dizi adlandırılmış sabit tanımlamanıza olanak tanır. Örn:
[code]
enum Renk {
  Kirmizi, Yesil, Mavi
}
let c: Renk = Renk.Yesil;
[/list]

Arayüzler (Interfaces)

Arayüzler, TypeScript'in en güçlü özelliklerinden biridir. Nesnelerin hangi özelliklere sahip olması gerektiğini veya belirli bir sınıfın hangi yöntemleri uygulaması gerektiğini tanımlamanıza olanak tanır. Bu, kodunuzun daha tutarlı ve anlaşılır olmasını sağlar.

Kod:
interface Kullanici {
  id: number;
  ad: string;
  email?: string; // Opsiyonel özellik
  kayitTarihi: Date;
  readonly parolaHash: string; // Sadece okunabilir özellik
}

function kullaniciBilgileriniGoster(kullanici: Kullanici) {
  console.log(`ID: ${kullanici.id}, Ad: ${kullanici.ad}`);
  if (kullanici.email) {
    console.log(`Email: ${kullanici.email}`);
  }
  console.log(`Kayıt Tarihi: ${kullanici.kayitTarihi.toLocaleDateString()}`);
}

const yeniKullanici: Kullanici = {
  id: 1,
  ad: "Can",
  email: "can@example.com",
  kayitTarihi: new Date(),
  parolaHash: "abc123xyz"
};

kullaniciBilgileriniGoster(yeniKullanici);

// yeniKullanici.parolaHash = "yeni_hash"; // Hata: 'parolaHash' salt okunur bir özelliktir.

Sınıflar (Classes)

TypeScript, ECMAScript 2015'teki (ES6) sınıfların tam desteğini sunar ve ek olarak tip güvenliği, arayüz uygulaması gibi özellikler ekler. Bu sayede nesne tabanlı programlama (OOP) ilkelerini JavaScript projelerinizde daha sağlam bir şekilde uygulayabilirsiniz.

Kod:
class Calisan {
  ad: string;
  protected sicilNo: number; // Sadece miras alan sınıflarda ve kendi sınıfında erişilebilir
  private _departman: string; // Sadece sınıf içinde erişilebilir

  constructor(ad: string, sicilNo: number, departman: string) {
    this.ad = ad;
    this.sicilNo = sicilNo;
    this._departman = departman;
  }

  bilgiVer() {
    return `${this.ad}, ${this._departman} departmanında çalışıyor.`;
  }

  get departman(): string {
    return this._departman;
  }

  set departman(yeniDepartman: string) {
    if (yeniDepartman === "") {
      throw new Error("Departman boş bırakılamaz.");
    }
    this._departman = yeniDepartman;
  }
}

class Yonetici extends Calisan {
  constructor(ad: string, sicilNo: number, departman: string) {
    super(ad, sicilNo, departman);
  }

  projeyiYonet(): string {
    return `${this.ad}, sicil numarası ${this.sicilNo} olan yönetici projeyi yönetiyor.`;
  }
}

let calisan1 = new Calisan("Ayşe Yılmaz", 1001, "İnsan Kaynakları");
console.log(calisan1.bilgiVer());

let yonetici1 = new Yonetici("Hakan Demir", 2005, "Yazılım Geliştirme");
console.log(yonetici1.projeyiYonet());
console.log(yonetici1.bilgiVer());

console.log(`Ayşe'nin Departmanı: ${calisan1.departman}`);
calisan1.departman = "Finans";
console.log(`Ayşe'nin Yeni Departmanı: ${calisan1.departman}`);

Fonksiyonlar

Fonksiyonlara tip eklemek, beklenen girişleri ve çıktıları netleştirir. Bu, fonksiyonların doğru şekilde kullanılmasını sağlar ve olası hataları azaltır.

Kod:
// Parametre tipleri ve dönüş tipi
function topla(x: number, y: number): number {
  return x + y;
}

// Opsiyonel parametre (? ile belirtilir)
function selamlaOpsiyonel(ad: string, soyad?: string): string {
  if (soyad) {
    return `Merhaba, ${ad} ${soyad}!`;
  }
  return `Merhaba, ${ad}!`;
}

// Varsayılan parametre değeri
function usAl(taban: number, us: number = 2): number {
  return taban ** us;
}

// Rest parametreleri
function tumSayilariTopla(...sayilar: number[]): number {
  return sayilar.reduce((acc, current) => acc + current, 0);
}

console.log(topla(5, 3)); // Çıktı: 8
console.log(selamlaOpsiyonel("Ahmet")); // Çıktı: Merhaba, Ahmet!
console.log(selamlaOpsiyonel("Zeynep", "Demir")); // Çıktı: Merhaba, Zeynep Demir!
console.log(usAl(4)); // Çıktı: 16 (4^2)
console.log(usAl(3, 3)); // Çıktı: 27 (3^3)
console.log(tumSayilariTopla(1, 2, 3, 4, 5)); // Çıktı: 15

Generics (Jenerikler)

Generics, yeniden kullanılabilir bileşenler oluşturmanıza olanak tanır. Bir bileşenin alacağı veya döndüreceği verinin tipini önceden belirlemek yerine, o tipin kullanım anında belirtilmesini sağlar. Bu, kodunuzu daha esnek ve tip güvenli hale getirir.

Kod:
function kimlik<T>(arg: T): T {
  return arg;
}

let stringOutput = kimlik<string>("benimMetnim"); // stringOutput tipi string
let numberOutput = kimlik<number>(123);

console.log(stringOutput); // Çıktı: benimMetnim
console.log(numberOutput); // Çıktı: 123

interface JenerikDizi<T> {
  dizi: T[];
  elemanEkle(eleman: T): void;
  elemanCikar(): T | undefined;
}

class StringDizisi implements JenerikDizi<string> {
  dizi: string[] = [];

  elemanEkle(eleman: string): void {
    this.dizi.push(eleman);
  }

  elemanCikar(): string | undefined {
    return this.dizi.pop();
  }
}

let stringListesi = new StringDizisi();
stringListesi.elemanEkle("Elma");
stringListesi.elemanEkle("Armut");
console.log(stringListesi.dizi); // Çıktı: [ 'Elma', 'Armut' ]
console.log(stringListesi.elemanCikar()); // Çıktı: Armut

Modüller

Büyük uygulamalarda kodu küçük, yönetilebilir dosyalara bölmek önemlidir. TypeScript, JavaScript'in `import` ve `export` anahtar kelimelerini kullanarak modül sistemini destekler. Bu, kodunuzu daha organize ve yeniden kullanılabilir hale getirir.

Kod:
// matematik.ts dosyası
export function toplaModul(a: number, b: number): number {
  return a + b;
}

export const PI = 3.14159;

// uygulama.ts dosyası
import { toplaModul, PI } from './matematik';

console.log(toplaModul(10, 20)); // Çıktı: 30
console.log(PI); // Çıktı: 3.14159

// Tümünü import etmek
import * as Matematik from './matematik';
console.log(Matematik.toplaModul(5, 5)); // Çıktı: 10

tsconfig.json: Projenizi Yapılandırma

`tsconfig.json` dosyası, TypeScript projenizin kök dizininde bulunan bir yapılandırma dosyasıdır. Bu dosya, `tsc` derleyicisinin TypeScript dosyalarını JavaScript'e nasıl derleyeceğini kontrol eder. Derleme hedefini (örneğin ES2015, ESNext), modül sistemini (CommonJS, ESNext), çıktı dizinini ve daha birçok ayarı belirtebilirsiniz. İşte temel bir örnek:

Kod:
{
  "compilerOptions": {
    "target": "es5",                      /* Hedef JavaScript sürümü */
    "module": "commonjs",                /* Modül sistemi */
    "outDir": "./dist",                  /* Çıktı JavaScript dosyalarının kaydedileceği dizin */
    "strict": true,                      /* Tüm katı tip denetleme seçeneklerini etkinleştir */
    "esModuleInterop": true,             /* CommonJS ve ES modülleri arasında uyumluluk */
    "forceConsistentCasingInFileNames": true, /* Dosya adlarında büyük/küçük harf tutarlılığı */
    "skipLibCheck": true                 /* Tüm declaration file'larda tip denetimini atla */
  },
  "include": [
    "src/**/*.ts"                        /* Derlenecek dosyaları belirtir */
  ],
  "exclude": [
    "node_modules",                      /* Derleme dışında bırakılacak dosyaları belirtir */
    "**/*.spec.ts"                      /* Test dosyalarını derleme dışında bırakır */
  ]
}

Bu dosya sayesinde, terminalde sadece `tsc` komutunu çalıştırarak tüm projenizi belirtilen ayarlara göre derleyebilirsiniz.

Sonuç

TypeScript, modern JavaScript geliştirmenin vazgeçilmez bir parçası haline gelmiştir. Statik tipleme, arayüzler, sınıflar ve daha birçok özelliği sayesinde, büyük ölçekli ve karmaşık uygulamaların geliştirilmesini çok daha yönetilebilir, güvenli ve keyifli hale getirir. Projenizin büyüklüğü ne olursa olsun, TypeScript'i kullanarak kod kalitenizi artırabilir ve geliştirme sürecindeki hataları azaltabilirsiniz.

"TypeScript'in en büyük avantajı, hataları derleme zamanında yakalayarak çalışma zamanı hatalarını azaltması ve geliştirme sürecini hızlandırmasıdır."

Umarız bu hızlı başlangıç rehberi TypeScript dünyasına adım atmanız için size sağlam bir temel sağlamıştır. Daha derinlemesine bilgi edinmek için resmi TypeScript belgelerini incelemenizi şiddetle tavsiye ederiz. İyi kodlamalar!
 
shape1
shape2
shape3
shape4
shape5
shape6
Üst

Bu web sitenin performansı Hazal Host tarafından sağlanmaktadır.

YazilimForum.com.tr internet sitesi, 5651 sayılı Kanun’un 2. maddesinin 1. fıkrasının (m) bendi ve aynı Kanun’un 5. maddesi kapsamında Yer Sağlayıcı konumundadır. Sitede yer alan içerikler ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır.

YazilimForum.com.tr, kullanıcılar tarafından paylaşılan içeriklerin doğruluğunu, güncelliğini veya hukuka uygunluğunu garanti etmez ve içeriklerin kontrolü veya araştırılması ile yükümlü değildir. Kullanıcılar, paylaştıkları içeriklerden tamamen kendileri sorumludur.

Hukuka aykırı içerikleri fark ettiğinizde lütfen bize bildirin: lydexcoding@gmail.com

Sitemiz, kullanıcıların paylaştığı içerik ve bilgileri 6698 sayılı KVKK kapsamında işlemektedir. Kullanıcılar, kişisel verileriyle ilgili haklarını KVKK Politikası sayfasından inceleyebilir.

Sitede yer alan reklamlar veya üçüncü taraf bağlantılar için YazilimForum.com.tr herhangi bir sorumluluk kabul etmez.

Sitemizi kullanarak Forum Kuralları’nı kabul etmiş sayılırsınız.

DMCA.com Protection Status Copyrighted.com Registered & Protected