Typescript ile Tip Güvenli Geliştirme

Not (🎯 Bu Yazıda Neler Öğreneceksiniz?)

TypeScript, JavaScript geliştirme süreçlerinde güvenlik ve verimlilik sağlayan güçlü bir araçtır. Bu yazıda, TypeScript'in temel özelliklerini ve best practice'leri ele alacağız.

TypeScript Neden Önemli?

Ipucu (🚀 TypeScript'in Gücü)

Modern web geliştirmede TypeScript kullanmanın başlıca sebepleri şunlardır:

Compile-time hata yakalama - Çalışma zamanı hatalarını önleme
Daha iyi IDE desteği - IntelliSense ve otomatik tamamlama
Kod okunabilirliği - Tip tanımları ile daha anlaşılır kod
Refactoring kolaylığı - Güvenli kod değişiklikleri

Temel Tipler

Örnek (Temel Tip Tanımlamaları)

// Primitive tipler
let isActive: boolean = true;
let count: number = 42;
let message: string = "Merhaba";

// Array tipler
let numbers: number[] = [1, 2, 3];
let names: Array<string> = ["Ali", "Veli"];

// Object tipler
interface User {
	id: number;
	name: string;
	email?: string; // Optional property
}

const user: User = {
	id: 1,
	name: "Furkan",
};

Ipucu (💡 Pro İpucu)

Optional properties (?) kullanarak esnek interface'ler oluşturabilirsiniz. Bu, API'lerden gelen verileri tip güvenli şekilde handle etmenizi sağlar.

Generic Tipler

Örnek (Generic Fonksiyon ve Sınıf)

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

// Generic interface
interface Repository<T> {
	findById(id: number): T | null;
	save(entity: T): T;
	delete(id: number): boolean;
}

// Generic class
class DataStore<T> {
	private items: T[] = [];

	add(item: T): void {
		this.items.push(item);
	}

	getAll(): T[] {
		return this.items;
	}
}

Utility Tipler

Örnek (Sık Kullanılan Utility Tipler)

interface User {
	id: number;
	name: string;
	email: string;
	age: number;
}

// Partial - tüm property'leri optional yapar
type PartialUser = Partial<User>;

// Pick - belirli property'leri seçer
type UserBasicInfo = Pick<User, "id" | "name">;

// Omit - belirli property'leri çıkarır
type UserWithoutId = Omit<User, "id">;

// Required - tüm property'leri zorunlu yapar
type RequiredUser = Required<PartialUser>;

Best Practices

Önemli (Strict Mode Kullanın)

// tsconfig.json
{
	"compilerOptions": {
		"strict": true,
		"noImplicitAny": true,
		"strictNullChecks": true
	}
}

Tanım (Interface vs Type)

// Interface - extending için uygun
interface Animal {
	name: string;
}

interface Dog extends Animal {
	breed: string;
}

// Type - union/intersection için uygun
type Status = "loading" | "success" | "error";
type ApiResponse<T> = {
	data: T;
	status: Status;
};

Açıklama (Enum Kullanımı)

// Const enum daha performanslı
const enum HttpStatus {
	OK = 200,
	NOT_FOUND = 404,
	INTERNAL_ERROR = 500,
}

// String enum daha okunabilir
enum LogLevel {
	DEBUG = "debug",
	INFO = "info",
	WARN = "warn",
	ERROR = "error",
}

React ile TypeScript

Örnek (React ile TypeScript Kullanımı)

// Component props typing
interface ButtonProps {
	children: React.ReactNode;
	onClick: () => void;
	variant?: "primary" | "secondary";
	disabled?: boolean;
}

const Button: React.FC<ButtonProps> = ({
	children,
	onClick,
	variant = "primary",
	disabled = false,
}) => {
	return (
		<button
			onClick={onClick}
			disabled={disabled}
			className={`btn btn-${variant}`}
		>
			{children}
		</button>
	);
};

// Hook typing
const useCounter = (initialValue: number = 0) => {
	const [count, setCount] = useState<number>(initialValue);

	const increment = useCallback(() => {
		setCount((prev) => prev + 1);
	}, []);

	const decrement = useCallback(() => {
		setCount((prev) => prev - 1);
	}, []);

	return { count, increment, decrement };
};

Sonuç

Özet (Özet)

TypeScript, JavaScript geliştirmede güvenlik ve verimlilik sağlayan vazgeçilmez bir araçtır. Doğru kullanıldığında:

Hataları erken yakalar
Kod kalitesini artırır
Team çalışmalarını kolaylaştırır
Maintenance süreçlerini iyileştirir

TypeScript'i projelerinizde kullanmaya başlayın ve farkı kendiniz deneyimleyin!

Geri Dön