GitHub

Bölüm 2: TypeScript Temel Tipler: string, array, enum ve daha fazlası

TypeScript Temel Tipler: string, array, enum ve daha fazlası

2.1 Temel Tipler Nedir?

TypeScript, JavaScript’in tüm değer türlerini statik tiplerle tanımlamamıza olanak tanır. Bu, kodun hataya daha az açık olmasını sağlar.

Temel Veri Tipleri:

TipAçıklamaÖrnek
stringMetin değeri"Hello"
numberSayı değeri42, 3.14
booleantrue veya falsetrue
null, undefinedBoş değerlernull, undefined
anyHer türlü değer olabilir (kaçınılmalı)let a: any = 5;
unknownTürü bilinmeyen değer (daha güvenli any)let u: unknown = "X"
voidFonksiyon geriye değer döndürmezfunction log(): void
neverAsla gerçekleşmeyen durumfunction fail(): never { throw ... }

2.2 TypeScript ile Değişken Tanımı

1
let userName: string = "Yasin";
2
let age: number = 26;
3
let isOnline: boolean = true;

2.3 array ve tuple

Dizi (Array):

1
const numbers: number[] = [1, 2, 3];
2
const names: string[] = ["Ali", "Ayşe"];
3


4
// Alternatif
5
const numbersAlt: Array<number> = [1, 2, 3];

Tuple: Sıralı, sabit uzunlukta farklı türlerden dizi

1
let person: [string, number] = ["Yasin", 26];

2.4 enum – Sabit Değer Listesi

1
enum UserRole {
2
  Admin = "admin",
3
  User = "user",
4
  Guest = "guest",
5
}
6


7
const role: UserRole = UserRole.Admin;

✅ Özellikle UI’de rol, durum, tema gibi sabitler için kullanılır.

2.5 any ve unknown Farkı

TipAçıklamaGüvenlik
anyHer şeyi kabul eder, kontrol yok❌ Tehlikeli
unknownÖnce kontrol gerek✅ Daha güvenli
1
let val: unknown = "merhaba";
2


3
if (typeof val === "string") {
4
  console.log(val.toUpperCase()); // Güvenli
5
}

2.6 void ve never

void: Geriye değer döndürmeyen fonksiyon

1
function logMessage(msg: string): void {
2
  console.log(msg);
3
}

never: Fonksiyon hiçbir zaman tamamlanmaz

1
function throwError(): never {
2
  throw new Error("Bir hata oluştu!");
3
}

Uygulama Örneği: Kullanıcı Kartı

Amaç: Temel tipleri içeren bir bileşen oluşturmak

1
// types/UserCardProps.ts
2
export type UserCardProps = {
3
  name: string;
4
  age: number;
5
  isPremium: boolean;
6
  interests: string[];
7
};
1
// components/UserCard.tsx
2
import { UserCardProps } from "../types/UserCardProps";
3


4
export default function UserCard({ name, age, isPremium, interests }: UserCardProps) {
5
  return (
6
    <div className="p-4 border rounded">
7
      <h2>{name} ({age})</h2>
8
      <p>{isPremium ? "🌟 Premium Üye" : "Ücretsiz Üye"}</p>
9
      <ul>
10
        {interests.map((i) => <li key={i}>{i}</li>)}
11
      </ul>
12
    </div>
13
  );
14
}
1
// App.tsx
2
import UserCard from "./components/UserCard";
3


4
export default function App() {
5
  return (
6
    <UserCard
7
      name="Yasin"
8
      age={26}
9
      isPremium={true}
10
      interests={["React", "TypeScript", "Next.js"]}
11
    />
12
  );
13
}

Alıştırma / Mini Ödev

  • Kendi adını, yaşını, premium durumunu ve hobilerini alan bir bileşen oluştur
  • Hobileri boş dizi olarak ver
  • age değerini string olarak ver ve TypeScript hatasını gözlemle
  • interests: string[] | undefined yaparak opsiyonel hale getir

Bölüm Özeti

KonuAçıklama
string, number, booleanTemel tipler
array, tupleDizi ve sıralı karma değer
enumSabit değer listesi
any, unknownHer şey olabilir, dikkatli olunmalı
void, neverFonksiyon geri dönüşleri için özel tipler