JavaScript ve TypeScript

JavaScript ve TypeScript

JavaScript ve TypeScript'e Genel Bakış

JavaScript, web geliştirme için yaygın olarak kullanılan dinamik, yorumlanmış bir programlama dilidir. TypeScript, geliştiricilerin hataları çalışma zamanında değil derleme zamanında yakalamasını sağlayan statik yazım ekleyen bir JavaScript üst kümesidir. Bu belge, sizi her iki dilin temel özellikleri ve sözdiziminde yönlendirecektir.

Ortamınızı Kurma

Kodlamaya başlamadan önce aşağıdakilerin yüklü olduğundan emin olun:

• Node.js : Kod çalıştırmak için kullanılan JavaScript çalışma zamanı.
• TypeScript : npm ile kurulum:

  
  npm install -g typescript
  

• Visual Studio Code : TypeScript desteğine sahip popüler bir kod düzenleyicisi.

Temel Sözdizimi ve Komutlar

1. Değişkenler

JavaScript ve TypeScript'te değişkenleri , , veya kullanarak bildirebilirsiniz.  'let'  'const'  'var'

• let: Yeniden atanabilen değişkenleri bildirmenize olanak tanır.
• const: Yeniden atanamayan değişkenleri bildirir (ancak işaret ettikleri nesne hala değiştirilebilir).
• var: Fonksiyon kapsamlı veya küresel kapsamlı; kullanımı genellikle ve lehine önerilmez .letconst

Örnek:

let mutableVariable: string = "Initial Value";
mutableVariable = "Updated Value"; // This is allowed

const immutableVariable: number = 42;
// immutableVariable = 50; // Error: Cannot assign to 'immutableVariable' because it is a constant.

var globalVariable = "I am global"; // Avoid using 'var' in modern code

2. Fonksiyonlar

TypeScript'teki fonksiyonlar, yazılmış parametrelere ve dönüş türlerine sahip olabilir; bu da kodun anlaşılırlığını artırır.Örnek:

function add(a: number, b: number): number {
    return a + b;
}

console.log(add(5, 10)); // Output: 15

// Optional Parameters
function greetUser(name: string, greeting?: string): string {
    return `${greeting || "Hello"}, ${name}!`;
}

console.log(greetUser("Alice")); // Output: Hello, Alice!
console.log(greetUser("Bob", "Welcome")); // Output: Welcome, Bob!

3. Arayüzler

Arayüzler, özel türleri tanımlamak ve nesnelerin belirli bir yapıya uymasını sağlamak için güçlüdür.Örnek:

interface Product {
    id: number;
    name: string;
    price: number;
}

const product1: Product = {
    id: 1,
    name: "Laptop",
    price: 999.99,
};

// Function using an interface
function displayProduct(product: Product): void {
    console.log(`Product Name: ${product.name}, Price: $${product.price}`);
}

displayProduct(product1); // Output: Product Name: Laptop, Price: $999.99

4. Sınıflar

TypeScript, erişim değiştiricileri ve arayüzler gibi özellikler ile JavaScript sınıflarını geliştirir.Örnek:

class Animal {
    protected name: string;

    constructor(name: string) {
        this.name = name;
    }

    public speak(): string {
        return `${this.name} makes a noise.`;
    }
}

class Dog extends Animal {
    public speak(): string {
        return `${this.name} barks.`;
    }
}

const dog = new Dog("Rex");
console.log(dog.speak()); // Output: Rex barks.

5. Jenerikler

Jenerikler, tür güvenliğini koruyarak herhangi bir veri türüyle çalışabilen yeniden kullanılabilir bileşenler oluşturmanıza olanak tanır.Örnek:

function wrapInArray<T>(item: T): T[] {
    return [item];
}

const numberArray = wrapInArray<number>(123); // [123]
const stringArray = wrapInArray<string>("Hello"); // ["Hello"]

6. Diziler ve Tuple'larla Çalışma

TypeScript, diziler ve gruplar için güçlü tipleme sağlayarak daha yapılandırılmış veri işleme olanağı sağlar.Yöntemlerle Diziler Örneği:

let fruits: string[] = ["Apple", "Banana", "Cherry"];
fruits.push("Orange");
console.log(fruits); // Output: ["Apple", "Banana", "Cherry", "Orange"]

// Using map to transform data
const fruitLengths = fruits.map(fruit => fruit.length);
console.log(fruitLengths); // Output: [5, 6, 6, 6]

Yapıbozumlu Tuple Örneği:

let userInfo: [string, number] = ["Alice", 30];
const [userName, userAge] = userInfo;
console.log(`Name: ${userName}, Age: ${userAge}`); // Output: Name: Alice, Age: 30

7. Enumlar

Enumlar, sayısal değer kümelerine kullanışlı isimler vermenin bir yoludur.Dize Enum'ları ile Örnek:

enum Color {
    Red = "RED",
    Green = "GREEN",
    Blue = "BLUE",
}

let favoriteColor: Color = Color.Green;
console.log(favoriteColor); // Output: GREEN

8. Tür İddiaları

Tür doğrulamaları, bir değişkenin türünden emin olduğunuzda onun için daha belirli bir tür belirtmenize olanak tanır.Boş Olmayan Doğrulama Operatörü (!) ile Örnek:

let someValue: any = "This is a string";
let strLength1: number = (someValue as string).length; // Type assertion
let strLength2: number = (<string>someValue).length; // Another syntax for type assertion

console.log(strLength1); // Output will be the length of the string.

9. TypeScript'te Hata İşleme

TypeScript, derleme zamanında hataları yakalamanıza yardımcı olarak kodunuzun daha sağlam olmasını sağlar.Fonksiyon Parametrelerinde Tip Güvenliğine Örnek:

function multiply(a: number, b: number): number {
    return a * b;
}

// multiply(5, "10"); // Error! Argument of type 'string' is not assignable to parameter of type 'number'.

TypeScript'i JavaScript'e Derleme

TypeScript kodunuzu JavaScript'e derlemek için:

1. Adında bir dosya oluşturun .example.ts
2. TypeScript kodunuzu bunun içine yazın.
3. Terminalinizde aşağıdaki komutu çalıştırın:

   vuruş
   tsc example.ts
   

4. Bu, Node.js kullanarak çalıştırabileceğiniz bir dosya oluşturacaktır :example.js

   vuruş
   node example.js
   

JavaScript ve TypeScript üzerinde bir örnek program 

JavaScript Örnek Programı

JavaScript'te Görev Yöneticisi

javascript
// Task Manager using JavaScript

class TaskManager {
    constructor() {
        this.tasks = [];
    }

    addTask(task) {
        this.tasks.push(task);
        console.log(`Task added: "${task}"`);
    }

    removeTask(task) {
        const index = this.tasks.indexOf(task);
        if (index > -1) {
            this.tasks.splice(index, 1);
            console.log(`Task removed: "${task}"`);
        } else {
            console.log(`Task not found: "${task}"`);
        }
    }

    displayTasks() {
        if (this.tasks.length === 0) {
            console.log("No tasks available.");
            return;
        }
        console.log("Current Tasks:");
        this.tasks.forEach((task, index) => {
            console.log(`${index + 1}: ${task}`);
        });
    }
}

// Usage
const myTasks = new TaskManager();
myTasks.addTask("Learn JavaScript");
myTasks.addTask("Build a project");
myTasks.displayTasks();
myTasks.removeTask("Learn JavaScript");
myTasks.displayTasks();

JavaScript Programı Nasıl Çalıştırılır

1. Kodu . adlı bir dosyaya kopyalayın .taskManager.js
2. Terminalinizi açın ve dosyanın kaydedildiği dizine gidin.
3. Programı Node.js kullanarak çalıştırın:

   vuruş
   node taskManager.js
   

TypeScript Örnek Programı

TypeScript'te Görev Yöneticisi

// Task Manager using TypeScript

class TaskManager {
    private tasks: string[];

    constructor() {
        this.tasks = [];
    }

    public addTask(task: string): void {
        this.tasks.push(task);
        console.log(`Task added: "${task}"`);
    }

    public removeTask(task: string): void {
        const index = this.tasks.indexOf(task);
        if (index > -1) {
            this.tasks.splice(index, 1);
            console.log(`Task removed: "${task}"`);
        } else {
            console.log(`Task not found: "${task}"`);
        }
    }

    public displayTasks(): void {
        if (this.tasks.length === 0) {
            console.log("No tasks available.");
            return;
        }
        console.log("Current Tasks:");
        this.tasks.forEach((task, index) => {
            console.log(`${index + 1}: ${task}`);
        });
    }
}

// Usage
const myTasks = new TaskManager();
myTasks.addTask("Learn TypeScript");
myTasks.addTask("Build a TypeScript project");
myTasks.displayTasks();
myTasks.removeTask("Learn TypeScript");
myTasks.displayTasks();

TypeScript Programı Nasıl Çalıştırılır

1. Kodu . adlı bir dosyaya kopyalayın .taskManager.ts
2. Terminalinizi açın ve dosyanın kaydedildiği dizine gidin.
3. TypeScript kodunu JavaScript'e derleyin:

   vuruş
   tsc taskManager.ts
   

4. Bu bir dosya oluşturacaktır .taskManager.js
5. Derlenmiş JavaScript programını Node.js kullanarak çalıştırın:

   vuruş
   node taskManager.js
   

Beklenen Çıktı

Her iki program da çalıştırıldığında benzer çıktılar üretecektir:

metin
Task added: "Learn JavaScript"
Task added: "Build a project"
Current Tasks:
1: Learn JavaScript
2: Build a project
Task removed: "Learn JavaScript"
Current Tasks:
1: Build a project

Bu örnek programlar, hem JavaScript hem de TypeScript'te sınıflar kullanılarak görevlerin nasıl yönetileceğini, benzerliklerini ve TypeScript'in tür güvenliğini nasıl sağladığını gösterir. İyi kodlamalar!