Bölüm 4: Object, Type ve Interface Kullanımı

Bu bölümde neler öğreneceğiz?

• Object tiplerini nasıl tanımlarız?
• type ve interface nedir, farkları nelerdir?
• readonly, ? gibi alanlar ne işe yarar?
• extends ve & ile nasıl genişletme yapılır?
• Gerçek dünya örnekleriyle tüm kavramları pekiştirme

4.1 Object Tipleri Nedir?

JavaScript’te her şey nesnedir: kullanıcı, ürün, form verisi, bileşen props...
TypeScript ile bu nesnelerin yapısını önceden tanımlayarak daha güvenli ve okunabilir hale getirebiliriz.

1
const user = {
2
  name: "Yasin",
3
  age: 26,
4
  isAdmin: true,
5
};

Bunun için ya type ya da interface kullanırız.

4.2 type ile Object Tipi Tanımlama

1
type User = {
2
  name: string;
3
  age: number;
4
  isAdmin: boolean;
5
};

Artık User adında bir obje tipi oluşturduk.

1
const admin: User = {
2
  name: "Yasin",
3
  age: 26,
4
  isAdmin: true,
5
};

✅ Tüm alanlar doğru tipte olmalı. Eksik ya da fazla alan varsa TypeScript uyarır.

4.3 interface ile Object Tipi Tanımlama

1
interface User {
2
  name: string;
3
  age: number;
4
  isAdmin: boolean;
5
}

Kullanımı tamamen type ile aynıdır:

1
const user: User = {
2
  name: "Ali",
3
  age: 30,
4
  isAdmin: false,
5
};

4.4 type vs interface: Ne Farkları Var?

Her ikisi de objelerin şeklini tanımlar. Ama bazı teknik farkları vardır:

Genel kullanım önerisi:

• interface ➜ React props, class yapıları için
• type ➜ Veri yapıları, birleşik yapılar (union/intersection) için

Ama modern projelerde ikisini karıştırmak da yaygındır.

4.5 Opsiyonel Alanlar (?)

1
type Product = {
2
  id: number;
3
  name: string;
4
  description?: string; // opsiyonel alan
5
};
6

7
const p1: Product = { id: 1, name: "Mouse" }; // ✅ description yok
8
const p2: Product = { id: 2, name: "Klavye", description: "RGB" }; // ✅ var

? ile tanımlanan alanlar isteğe bağlıdır.

4.6 Readonly Alanlar

1
interface Account {
2
  readonly id: number;
3
  name: string;
4
}
5

6
const acc: Account = { id: 101, name: "Yasin" };
7
// acc.id = 102; ❌ Error

✅ readonly alanlar bir kez atanır, sonra değiştirilemez.
➡️ Özellikle id, createdAt gibi değişmemesi gereken alanlarda kullanılır.

4.7 Genişletme – extends ve &

Interface Genişletme (extends)

1
interface BaseUser {
2
  name: string;
3
  age: number;
4
}
5

6
interface AdminUser extends BaseUser {
7
  role: "admin";
8
}
9

10
const admin: AdminUser = {
11
  name: "Yasin",
12
  age: 26,
13
  role: "admin",
14
};

AdminUser, BaseUser'ın tüm alanlarını miras alır.

Type Birleşimi (& - Intersection)

1
type Name = { name: string };
2
type Age = { age: number };
3

4
type Person = Name & Age;
5

6
const p: Person = {
7
  name: "Yasin",
8
  age: 26,
9
};

& iki tipin birleşimidir. Her iki tipin de tüm alanlarını ister.

4.8 Union Type ile Farklı Varyasyonlar

1
type Theme = "light" | "dark" | "system";
2

3
function setTheme(theme: Theme) {
4
  console.log("Tema ayarlandı:", theme);
5
}
6

7
setTheme("dark");      // ✅
8
setTheme("blue");      // ❌ Error

Bu yapı sadece 3 sabit değeri kabul eder. Hatalı değerler anında reddedilir.

Gerçek Uygulama: Kullanıcı Kartı

🎯 Amacımız: Kullanıcıyı ekranda gösteren tip güvenli bir bileşen.

1
export interface User {
2
  id: number;
3
  name: string;
4
  age: number;
5
  email?: string;
6
  readonly createdAt: string;
7
}

1
import { User } from "../types/User";
2

3
export default function UserCard({ name, age, email }: User) {
4
  return (
5
    <div>
6
      <h3>{name} ({age})</h3>
7
      {email && <p>Email: {email}</p>}
8
    </div>
9
  );
10
}

1
import UserCard from "./components/UserCard";
2

3
const user = {
4
  id: 1,
5
  name: "Yasin",
6
  age: 26,
7
  email: "yasin@example.com",
8
  createdAt: "2023-01-01"
9
};
10

11
export default function App() {
12
  return <UserCard {...user} />;
13
}

✅ Props otomatik olarak tip güvenli hale geldi.

Alıştırmalar

• Product adında bir interface oluştur: id, name, price, description?.
• Readonly>Product< kullanarak değişmez bir ürün oluştur.
• User'dan email alanı hariç her alanı içeren bir UserPreview tipi oluştur (Omit).
• AdminUser, GuestUser ve RegisteredUser gibi extend edilen farklı kullanıcı rolleri oluştur.

Özet

Kazanımlar

• Object yapısını tip güvenli hale getirebilir
• Kendi interface ve type tanımlarını oluşturabilir
• Genişletme, opsiyonellik, readonly gibi gelişmiş yapıları kullanabilir
• React component’lerinde sağlam props tipleri tanımlayabilir