Articles
TypeScript'e Giriş
TypeScript'in Temelleri

TypeScript'in Temelleri

Bu makale, TypeScript'in temel kavramlarını açıklamaktadır.

YouTube Video

"Hello World!"'ü Çalıştırma

Öncelikle, Visual Studio Code kullanarak TypeScript'te klasik "Hello World!" örneğini çalıştıracağız.

npm install -g typescript

npm komutunu kullanarak typescript kurun.

tsconfig.json dosyası oluşturun.

1{
2  "compilerOptions": {
3    "target": "ES6",
4    "module": "CommonJS",
5    "outDir": "out",
6    "sourceMap": true
7  }
8}

Visual Studio Code içinde main.ts dosyasını çalıştırmayı etkinleştirmek için .vscode/launch.json dosyası oluşturun.

 1{
 2    "version": "0.2.0",
 3    "configurations": [
 4        {
 5            "type": "node",
 6            "request": "launch",
 7            "name": "Launch Program",
 8            "skipFiles": [
 9                "<node_internals>/**"
10            ],
11            "program": "${workspaceFolder}/main.ts",
12            "preLaunchTask": "tsc: build - tsconfig.json",
13            "outFiles": [
14                "${workspaceFolder}/out/main.js"
15            ]
16        }
17    ]
18}

"Hello World!" görüntüleyen bir main.ts dosyası oluşturun. Visual Studio Code'da F5 tuşuna basarak çalıştırabilirsiniz.

1console.log("Hello World!");

Bu şekilde yapılandırarak, TypeScript dosyalarını VSCode içinde çalıştırabilirsiniz.

TypeScript'e Genel Bakış

TypeScript (TS), Microsoft tarafından geliştirilen bir JavaScript üst kümesidir. TypeScript, daha sağlam ve sürdürülebilir kodlar yazılmasını sağlayan statik tür tanımlamayı destekler.

Statik Tür Tanımlama

  • TypeScript, JavaScript'e türler ekler ve derleme zamanında tür denetimi yapar. Bu, türle ilgili hataların önceden önlenmesini sağlar.
1let message: string = "Hello, TypeScript";
2console.log(message);

Derleme

  • TypeScript bir tarayıcıda doğrudan çalıştırılamadığı için JavaScript'e dönüştürülmesi (derlenmesi) gerekir. TS dosyalarını JS dosyalarına dönüştürmek için tsc (TypeScript Derleyicisi) kullanın.

Opsiyonel Tür Açıklamaları

  • TypeScript, tür çıkarımı yapar ancak gerektiğinde türleri açık bir şekilde belirtmenize de olanak tanır. Bu, kod okunabilirliğini ve güvenilirliğini artırır.
1function greet(name: string): string {
2    return `Hello, ${name}`;
3}
4console.log(greet('John'));

Arayüzler (Interfaces)

  • TypeScript, nesnelerin yapısını tanımlamak için interface sağlar. Bu, nesne yapısının sıkı bir şekilde yönetilmesini sağlar.
1interface Person {
2    name: string;
3    age: number;
4}
5const user: Person = { name: "John", age: 30 };
6console.log(user.name);

Sınıflar

  • TypeScript, JavaScript'in sınıf söz dizimine uzantılar ekler ve kalıtım, erişim belirteçleri (public, private, protected) ve soyut sınıfları destekler.
 1class Animal {
 2    protected name: string;
 3    constructor(name: string) {
 4        this.name = name;
 5    }
 6    speak(): void {
 7        console.log(`${this.name} makes a sound.`);
 8    }
 9}
10
11class Dog extends Animal {
12    speak(): void {
13        console.log(`${this.name} barks.`);
14    }
15}
16const animal = new Animal('Generic Animal');
17animal.speak();
18
19const dog = new Dog('Buddy');
20dog.speak();

Genel Türler (Generics)

  • TypeScript'te, genel türler (generics) kullanarak yeniden kullanılabilir ve tür güvenliği sağlayan kod yazabilirsiniz.
1function identity<T>(arg: T): T {
2    return arg;
3}
4console.log(identity<string>("Hello Generics"));

Ekosistem

  • TypeScript, JavaScript ekosistemiyle tamamen uyumludur ve mevcut JavaScript kodlarını olduğu gibi kullanabilir. Ayrıca, React ve Node.js gibi popüler kütüphanelerle entegredir.

Güçlü Geliştirici Araçları

  • TypeScript, VSCode gibi editörlerde otomatik tamamlama, kod yeniden düzenleme desteği ve hata denetimi gibi gelişmiş özellikler sunar.

TypeScript, büyük projelerde güvenilirliği artırmak ve geliştirici verimliliğini iyileştirmek için özellikle faydalıdır.

TypeScript'teki Değişkenler

Bu, TypeScript'teki değişkenlerin temel kavramlarını ve kullanımını açıklar.

Değişken Tanımlama

TypeScript'te değişkenler, let, const ve var olmak üzere üç anahtar kelime ile tanımlanır. Her anahtar kelimenin farklı özellikleri vardır.

let Örneği:

let blok kapsamına sahiptir (sadece süslü parantezler {} içinde geçerlidir). Değerler daha sonra yeniden atanabilir.

1let count: number = 10;
2console.log(count);  // Outputs: 10
3
4count = 20;
5console.log(count);  // Outputs: 20

const Örneği:

const yeniden atanamaz, bu nedenle bir kez atanan değer değiştirilemez. Ancak, nesnelerin ve dizilerin içeriği değiştirilebilir.

1const pi: number = 3.14;
2console.log(pi);  // Outputs: 3.14
3
4// pi = 3.14159; // Error: Reassignment is not allowed
5
6const fruits: string[] = ["apple", "banana"];
7fruits.push("orange");
8console.log(fruits);  // Outputs: ["apple", "banana", "orange"]

var Örneği:

var işlev kapsamına sahiptir ve yeniden atanabilir. Ancak, blok kapsamını göz ardı ettiğinden, let veya const ile karşılaştırıldığında beklenmeyen davranışlara neden olabilir.

 1var message: string = "Hello, world!";
 2console.log(message);  // Outputs: Hello, world!
 3
 4message = "Hello, TypeScript!";
 5console.log(message);  // Outputs: Hello, TypeScript!
 6
 7// (`var` ignores block scope)
 8if (true) {
 9    var localMessage = "Hello again!";
10}
11console.log(localMessage); // "Hello again!"

Tür Açıklamaları

TypeScript'te, değişkenler için türleri açıkça belirtebilirsiniz. Tür çıkarımı da desteklenir, ancak tür açıklamaları karmaşık senaryolarda faydalıdır.

1let isDone: boolean = false;
2console.log(isDone);  // Outputs: false
3
4let userName: string = "Alice";
5console.log(userName);  // Outputs: Alice

Başlatılmamış Değişkenler

Bir değişken başlatılmadan tanımlanırsa, varsayılan olarak undefined atanır. let ile tanımlanan bir değişken başlatılmamışsa, açıkça undefined atanmalı veya türüne undefined dahil edilmelidir.

1let uninitialized: number | undefined;
2console.log(uninitialized);  // Outputs: undefined
3
4uninitialized = 5;
5console.log(uninitialized);  // Outputs: 5

Değişken Kapsamı

let ve const blok kapsamına sahiptir, bu yüzden yalnızca aynı blok içinde geçerlidir.

1if (true) {
2    let blockScoped: string = "Block Scoped";
3    console.log(blockScoped);  // Outputs: Block Scoped
4}
5// console.log(blockScoped);  // Error: blockScoped is out of scope

Değişken Kaldırma

TypeScript, JavaScript'in bir üst kümesi olduğu için, JavaScript'in kaldırma özelliğini devralır. Kaldırma, değişken ve fonksiyon tanımlamalarının kapsamlarının en üstüne taşınmış gibi davranıldığı durumu ifade eder. Ancak, yalnızca tanımlama kaldırılır, başlatma olduğu yerde kalır. var ile tanımlanan değişkenler kaldırılır, ancak let veya const kullanımı tanımlamadan önce hata oluşturur.

1console.log(a); // undefined
2var a = 10;
3console.log(a); // 10
  • Bu durumda, var ile tanımlanan değişkenler kaldırılır ve değerleri çıktılanır.
1console.log(b); // ReferenceError
2let b = 20;
  • let ile tanımlanan değişkenler kaldırılmaz ve bu bir hataya neden olur.

Özet

Aşağıda let, const ve var özetlenmiştir.

  • let yeniden atanabilir ve blok kapsamına sahiptir.
  • const yeniden atanamaz ve blok kapsamına sahiptir.
  • var yeniden atanabilir ve fonksiyon kapsamına sahiptir.
  • Bunların hepsi, değişken türlerini belirlemek için açık tür açıklamasına izin verir.

TypeScript'te Kaçış Karakterleri

Kaçış karakterleri, belirli karakterlerin doğrudan girilemediği durumlarda veya bir dizede özel anlamı olan karakterleri temsil etmek için kullanılır. TypeScript'te kaçış karakterleri, kontrol karakterlerini veya özel karakterleri temsil etmek için kullanılır.

Örneğin, bir mesajın yeni bir satır içerdiğini belirtebilmek için \n kullanılır.

1const message: string = "Hello,\nWorld!";
2console.log(message);
3// Output:
4// Hello,
5// World!

Özel Karakterleri Kaçış Yapma

Kaçış karakterleri, bir dize içine özel karakterler dahil ederken de kullanışlıdır. Örneğin, bir dizede doğrudan çift tırnak veya tek tırnak kullanmak isteyebilirsiniz.

1const singleQuoteExample: string = 'It\'s a beautiful day!';
2console.log(singleQuoteExample);
3// Output: It's a beautiful day!
4
5const doubleQuoteExample: string = "He said, \"Welcome!\"";
6console.log(doubleQuoteExample);
7// Output: He said, "Welcome!"

Ters Eğik Çizgiyi Kaçış Yapma

Bir dizede ters eğik çizgi eklemek için, çifti kullanarak \\ şeklinde yazmanız gerekir.

1const path: string = "C:\\Program Files\\MyApp";
2console.log(path);
3// Output: C:\Program Files\MyApp

Unicode ve Onaltılık Kaçışlar

TypeScript'te Unicode kod noktaları, kaçış dizileri kullanılarak temsil edilebilir.

Unicode Kaçış Dizisi

Unicode karakterlerini \u ardından dört basamaklı bir onaltılık sayı belirterek temsil edebilirsiniz.

1const smileyFace: string = "\u263A";
2console.log(smileyFace);
3// Output: ☺ (Copyright Mark)

Onaltılık Kaçış

\x ardından iki basamaklı bir onaltılık sayı kullanarak belirli karakterleri temsil edebilirsiniz.

1const letterA: string = "\x41";
2console.log(letterA);
3// Output: A

Şablon Sözdizimleri ve Kaçışlar

Şablon sabitleri, backtick işaretleri içine alınarak tanımlanır ve gömülü ifadeler veya çok satırlı metinler oluşturmayı kolaylaştırır. Normal kaçış karakterleri, şablon sözdizimlerinde doğrudan kullanılabilir.

1const multiLine: string = `This is
2a multi-line
3string.`;
4console.log(multiLine);
5// Output:
6// This is
7// a multi-line
8// string.

Özel Durumlar

TypeScript'te, bir dize içinde geçersiz kaçış dizileri kullanmak bir sözdizimi hatasına neden olabilir. Bu nedenle, kaçış karakterlerinin geçerli olup olmadığını kontrol etmek önemlidir.

1// Invalid escape sequence
2const invalidString: string = "\xZZ"; // Error

Pratik Kullanım Örnekleri

Kaçış karakterleri kullanarak karmaşık bir dize oluşturma örneği aşağıda verilmiştir.

1const jsonExample: string = "{\n\t\"name\": \"John Doe\",\n\t\"age\": 30\n}";
2console.log(jsonExample);
3// Output:
4// {
5//     "name": "John Doe",
6//     "age": 30
7// }

Bu örnekte, \n yeni bir satır için ve \t girinti eklemek için kullanılmıştır. Bu, JSON yapısını daha okunabilir hale getirir.

Özet

Kaçış karakterleri, TypeScript'teki dizelerle çalışırken çok önemlidir. Bir dizede özel karakterler veya kontrol karakterleri eklemek istediğinizde, uygun kaçış dizilerini kullanarak anlamlı dizeler oluşturabilirsiniz. Kaçış karakterlerini doğru bir şekilde anlamak ve kullanmak, kod okunabilirliğini ve sürdürülebilirliğini artırabilir.

TypeScript Sürümleri

Burada TypeScript sürümüne genel bir bakış atalım.

  1. TypeScript 1.0 (2014)

    TypeScript'in ilk kararlı sürümü. Tür belirleme, sınıflar ve modüller gibi temel özellikler tanıtıldı.

  2. TypeScript 2.0 (2016)

    Null olamayan Türler, Kontrol Akışı Analizi, Salt Okunur Özellikler ve Never türü tanıtılarak tür çıkarımı geliştirildi.

  3. TypeScript 3.0 (2018)

    Daha esnek bir tür sistemi tanıtıldı; Proje Referansları, Grup Türleri genişletmeleri ve Dinlenme Parametreleri iyileştirmeleri gibi özellikler eklendi.

  4. TypeScript 4.0 (2020)

    Değişken Sayılı Grup Türleri, editör iyileştirmeleri, geliştirilmiş tür çıkarımı ve Etiketli Grup Öğeleri gibi özellikler, geliştirme deneyimini iyileştirmek için eklendi.

  5. TypeScript 4.1 (2020)

    Şablon Dize Türleri tanıtıldı ve dize türü manipülasyonunu daha güçlü hale getirdi.

  6. TypeScript 4.3 (2021)

    Override anahtar kelimesinin eklenmesi, yapıcılar içindeki erişim düzenleyicilerinin iyileştirilmesi ve WeakMap ve WeakSet için geliştirilmiş tür desteği.

  7. TypeScript 4.5 (2021)

    Awaited türü, ModuleSuffixes ve ECMAScript modülleriyle artırılmış uyumluluk eklendi.

  8. TypeScript 5.0 (2023)

    Decorators'ın standartlaştırılması, proje oluşturma hızının artırılması, tür sisteminin geliştirilmesi ve en son ECMAScript özelliklerine destek sağlandı.

TypeScript sürekli olarak gelişmekte, her yıl birden fazla sürüm yayınlanarak yeni özellikler ve iyileştirmeler sunulmaktadır.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video

TypeScript'teki Veri Türleri