TypeScript, JavaScript'e statik tip kontrolü ekleyen güçlü bir programlama dilidir. Bu kapsamlı rehberde, Next.js projelerinizde TypeScript kullanımı, tip güvenliği, advanced types, generics ve modern web geliştirme best practices'lerini ele alıyoruz.

TypeScript Nedir?

TypeScript, Microsoft tarafından geliştirilen, JavaScript'in üzerine tip sistemi ekleyen bir programlama dilidir. TypeScript kodu derlendiğinde JavaScript'e dönüşür ve tüm JavaScript özelliklerini destekler.

TypeScript'in temel avantajları:

• Tip Güvenliği: Derleme zamanında hata yakalama
• Daha İyi IDE Desteği: Autocomplete ve IntelliSense
• Kod Dokümantasyonu: Tipler kendini dokümante eder
• Refactoring Güvenliği: Büyük kod tabanlarında güvenli değişiklikler
• JavaScript Uyumluluğu: Mevcut JavaScript kodlarıyla çalışır

TypeScript Kurulumu

TypeScript'i projenize kurmak oldukça basittir:

# npm ile kurulum
npm install -D typescript @types/node @types/react

# TypeScript config dosyası oluşturma
npx tsc --init

Next.js projelerinde TypeScript zaten dahil gelir ve `tsconfig.json` dosyası otomatik olarak oluşturulur.

Temel Tipler

TypeScript, JavaScript'in temel tiplerini genişletir:

// Primitive tipler
let name: string = "Nexentio";
let age: number = 5;
let isActive: boolean = true;

// Array tipleri
let tags: string[] = ["Next.js", "TypeScript"];
let numbers: Array<number> = [1, 2, 3];

// Object tipleri
interface User {
  name: string;
  age: number;
  email?: string; // Optional property
}

let user: User = {
  name: "Ahmet",
  age: 30
};

Interface ve Type

TypeScript'te tip tanımlamak için `interface` ve `type` kullanılır:

// Interface kullanımı
interface BlogPost {
  title: string;
  content: string;
  publishedAt: Date;
  tags: string[];
}

// Type kullanımı
type Status = "draft" | "published" | "archived";

type BlogPostWithStatus = BlogPost & {
  status: Status;
};

Generics

Generics, tip güvenli kod yazarken esneklik sağlar:

// Generic function
function getFirst<T>(items: T[]): T | undefined {
  return items[0];
}

// Kullanım
const firstString = getFirst<string>(["a", "b", "c"]);
const firstNumber = getFirst<number>([1, 2, 3]);

// Generic interface
interface ApiResponse<T> {
  data: T;
  status: number;
  message: string;
}

type UserResponse = ApiResponse<User>;
type PostResponse = ApiResponse<BlogPost>;

Next.js TypeScript Entegrasyonu

Next.js TypeScript'i first-class citizen olarak destekler. App Router ile birlikte güçlü tip güvenliği sağlar.

Next.js TypeScript örnekleri:

// app/blog/[slug]/page.tsx
interface PageProps {
  params: Promise<{ slug: string }>;
}

export default async function BlogPost({ params }: PageProps) {
  const { slug } = await params;
  // ...
}

// API Route
import { NextRequest, NextResponse } from 'next/server';

export async function POST(request: NextRequest) {
  const body = await request.json();
  // ...
  return NextResponse.json({ success: true });
}

Advanced Types

TypeScript, gelişmiş tip özellikleri sunar:

• Union Types: `string | number`
• Intersection Types: `TypeA & TypeB`
• Utility Types: `Partial`, `Pick`, `Omit`, `Required`
• Conditional Types: Koşullu tip tanımlamaları
• Mapped Types: Tip dönüşümleri

TypeScript Best Practices

Profesyonel TypeScript kodu yazmak için:

• Strict Mode: `tsconfig.json`'da strict modu açın
• Explicit Types: Gerekli yerlerde açık tip tanımlamaları
• Avoid `any`: `any` kullanımından kaçının
• Type Guards: Tip kontrolü için type guard'lar kullanın
• Code Organization: Tipleri ayrı dosyalarda organize edin

Sonuç

TypeScript, modern web geliştirmede tip güvenliği ve daha iyi geliştirici deneyimi sağlar. Next.js projelerinizde TypeScript kullanarak, daha güvenli ve sürdürülebilir kod yazabilirsiniz. Bu rehberdeki teknikleri uygulayarak, profesyonel seviyede TypeScript projeleri geliştirebilirsiniz.

Deployment stratejileri için Vercel deployment rehberimizi, mobil uygulama geliştirme için mobil uygulama rehberimizi inceleyebilirsiniz.