📝🎯 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?
💡🚀 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
🧪Temel Tip Tanımlamaları
typescript
// 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",
};💡💡 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
🧪Generic Fonksiyon ve Sınıf
typescript
// 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
🧪Sık Kullanılan Utility Tipler
typescript
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
❗Strict Mode Kullanın
JSON
// tsconfig.json
{
"compilerOptions": {
"strict": true,
"noImplicitAny": true,
"strictNullChecks": true
}
}📖Interface vs Type
typescript
// 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;
};💬Enum Kullanımı
typescript
// 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
🧪React ile TypeScript Kullanımı
typescript
// 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
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!