TypeScript Başlangıç Rehberi: JavaScript'e Tip Güvenliği

TypeScript Nedir?

TypeScript, Microsoft tarafından geliştirilen, JavaScript'in typed superset'idir. Compile-time tip kontrolü sağlar.

Neden TypeScript?

• Compile-time hata yakalama
• Daha iyi IDE desteği (autocomplete)
• Refactoring güvenliği
• Self-documenting code
• Büyük projeler için ölçeklenebilirlik

Temel Tipler

// Primitive types
let name: string = "John";
let age: number = 30;
let isActive: boolean = true;

// Arrays
let numbers: number[] = [1, 2, 3];
let names: Array<string> = ["a", "b"];

// Objects
let user: { name: string; age: number } = {
    name: "John",
    age: 30
};

// Union types
let id: string | number = "123";
id = 123; // OK

// Any (escape hatch)
let data: any = "anything";

Interface

interface User {
    id: number;
    name: string;
    email: string;
    role?: string; // Optional
    readonly createdAt: Date; // Read-only
}

function createUser(user: User): User {
    return user;
}

// Extending interfaces
interface Admin extends User {
    permissions: string[];
}

Type Aliases

type ID = string | number;
type Status = "pending" | "approved" | "rejected";

type ApiResponse<T> = {
    success: boolean;
    data: T;
    error?: string;
};

Generics

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

let output = identity<string>("hello");

// Generic interface
interface Repository<T> {
    find(id: number): T;
    findAll(): T[];
    create(item: T): T;
}

Classes

class UserService {
    private users: User[] = [];

    constructor(private apiUrl: string) {}

    async getUsers(): Promise<User[]> {
        const response = await fetch(this.apiUrl);
        return response.json();
    }
}

TypeScript + React

interface Props {
    title: string;
    onClick: () => void;
}

const Button: React.FC<Props> = ({ title, onClick }) => {
    return <button onClick={onClick}>{title}</button>;
};

Kurulum

npm install -D typescript
npx tsc --init

// tsconfig.json
{
    "compilerOptions": {
        "target": "ES2020",
        "module": "ESNext",
        "strict": true,
        "esModuleInterop": true
    }
}

Sonuç

TypeScript, JavaScript projelerinde kod kalitesini ve maintainability'yi artırır. Öğrenme yatırımına değer.