Temel tipler ve çıkarım

Tip Belirtmek

TypeScript'te bir değişkenin, parametrenin ya da dönüş değerinin tipi, adından sonra iki nokta üst üste ile yazılır. Buna type annotation denir.¹

let productName: string = "Kablosuz Kulaklık";
let price: number = 1299.9;
let inStock: boolean = true;

price = "1299";
// Hata: Type 'string' is not assignable to type 'number'.

Üç temel (primitive) tip string, number ve boolean'dır. number tam sayı ve ondalık sayıyı ayırmaz; JavaScript'te ikisi de aynı tiptir. Tipleri her zaman küçük harfle yazın: String, Number ve Boolean başka şeylerdir.¹ Daha seyrek kullanılan bigint ve symbol de vardır.

Tip Çıkarımı

Yukarıdaki örnekte tipleri yazmaya gerek yoktu. TypeScript, değişkenin tipini ilk değerinden kendisi çıkarır. Buna tip çıkarımı (type inference) denir.¹² let price = 1299.9; yazdığınızda price yine number olur ve price = "1299" aynı hatayı verir. Editörde değişkenin üzerine geldiğinizde çıkarılan tipi görürsünüz. Resmi Handbook'un önerisi açıktır: "Yeni başlıyorsanız düşündüğünüzden daha az type annotation yazmayı deneyin."¹

Dan Vanderkam da Effective TypeScript'te aynı kuralı verir: yerel değişkenlere değil, fonksiyon imzalarına tip yazın.³ Dönüş tipini yazmak, fonksiyonun içindeki bir hatanın onu kullanan her yere yayılmasını engeller; hata fonksiyonun kendisinde görünür.³ Matt Pocock da modülün en üst seviyesindeki fonksiyonlara dönüş tipi yazmayı, JSX döndüren component'leri ise bunun dışında tutmayı önerir.⁴

export function getShippingCost(total: number): number {
  if (total >= 500) {
    return 0;
  }
  return "49.90";
  // Hata: Type 'string' is not assignable to type 'number'.
}

let ve const farkı

let ile tanımlanan değişken sonradan değişebileceği için genel tipi alır. const değişmeyeceği için tam değerin kendisi tip olur. Buna literal tip denir.¹

let orderStatus = "pending"; // string, sonra "shipped" atanabilir
const currency = "TRY"; // "TRY"

Array ve Tuple

Array tipi, eleman tipinin sonuna [] eklenerek yazılır. Array<number> yazımı da aynı anlama gelir; bu <> yazımını Generic'ler dersinde göreceksiniz.¹

Farklı tipte elemanlar varsa TypeScript hepsini kapsayan bir tip seçer.² Tuple ise eleman sayısı ve her sıradaki tipi sabit olan bir array'dir.⁵ React'te useState'in döndürdüğü [value, setValue] çifti de bir tuple'dır.

const prices: number[] = [1299.9, 249];
const tags: Array<string> = ["ses", "kablosuz"];
const ids = [1, 2, 3]; // number[]
ids.push("4");
// Hata: Argument of type 'string' is not assignable to parameter of type 'number'.

const mixed = [1, "iki", null]; // (string | number | null)[]
const entry: [string, number] = ["Kablosuz Kulaklık", 2]; // tuple

Fonksiyonlar

Parametre tipleri parametre adından sonra, dönüş tipi parantezden sonra yazılır. Tip yazılan parametreye gelen her argüman kontrol edilir.¹

function calculateTotal(price: number, quantity: number): number {
  return price * quantity;
}

calculateTotal(1299.9);
// Hata: Expected 2 arguments, but got 1.

Opsiyonel ve varsayılan parametreler

Parametre adından sonra ? koymak onu opsiyonel yapar; içeride tipi string | undefined olur. Varsayılan değer verilen parametre de opsiyoneldir ve tipini o değerden alır.⁶

function formatPrice(amount: number, currency?: string) {
  return `${amount.toFixed(2)} ${currency ?? "TRY"}`;
}

function applyDiscount(price: number, rate = 0.1) {
  return price * (1 - rate); // rate: number
}

formatPrice(249); // "249.00 TRY"
applyDiscount(1000, "0.2");
// Hata: Argument of type 'string' is not assignable to parameter of type 'number'.

void ve arrow function

Değer döndürmeyen fonksiyonun dönüş tipi void'dir.⁶ Arrow function'larda tipler aynı yerlere yazılır. Fonksiyon map gibi tipini bilen bir yere verildiğinde parametre tipi bağlamdan çıkarılır; buna contextual typing denir.¹²

function logOrder(orderId: string): void {
  console.log(`Sipariş alındı: ${orderId}`);
}

const toUpper = (text: string) => text.toUpperCase(); // dönüş: string
const labels = [249, 89.5].map((p) => p.toFixed(2)); // p: number

Fonksiyon tipi

Bir fonksiyonu parametre olarak alırken ya da prop olarak verirken tipini (parametre: tip) => dönüşTipi şeklinde yazarsınız. Parametre adı zorunludur.⁶

type PriceFormatter = (amount: number) => string;

function renderPrice(amount: number, format: PriceFormatter) {
  return format(amount);
}

renderPrice(249, (amount) => `${amount} TL`);
renderPrice(249, (amount) => amount * 2);
// Hata: Type 'number' is not assignable to type 'string'.

type ile tipe isim verme konusunu Interface, type ve union dersinde ayrıntılı göreceksiniz.

null ve undefined

strictNullChecks açıkken null ve undefined kendi tipleridir; string bekleyen yere null veremezsiniz.⁷ Bu ayar strict ile birlikte gelir ve TypeScript 7'de strict artık varsayılan olarak açıktır.⁸ Bir değer olmayabilirse bunu tipte | ile söylersiniz:

function formatCoupon(code: string | null) {
  code.toUpperCase();
  // Hata: 'code' is possibly 'null'.

  if (code !== null) {
    return code.toUpperCase(); // burada code: string
  }
  return "Kupon yok";
}

| ile yazılan union tiplere sonraki derste, if ile tipi daraltmaya (narrowing) Narrowing ve type guard dersinde değineceğiz.

any, unknown ve never

any tip kontrolünü kapatır: her şeyi kabul eder, her işleme izin verir. Bu yüzden kaçınılması gerekir.¹ function getTotal(items) {...} gibi tipsiz bir parametreyi TypeScript any sayar; noImplicitAny ayarı (strict ile açık) bunu Parameter 'items' implicitly has an 'any' type. hatasına çevirir.⁹

unknown, any'nin güvenli karşılığıdır: her değer atanabilir ama tipi kontrol edilmeden üzerinde hiçbir işlem yapılamaz.¹⁰ Bu yüzden JSON.parse ya da API'den gelen veri gibi tipi bilinmeyen değerler için doğru seçimdir.¹¹

const fromAny: any = JSON.parse('{"price": 249}');
fromAny.prise.toFixed(2); // derlenir, çalışırken patlar

const fromUnknown: unknown = JSON.parse('{"price": 249}');
fromUnknown.price;
// Hata: 'fromUnknown' is of type 'unknown'.

unknown bir değeri kullanmadan önce typeof gibi kontrollerle tipini doğrularsınız; bunu Narrowing ve type guard dersinde göreceksiniz.

never hiçbir zaman oluşmayan değerin tipidir; örneğin her zaman hata fırlatan function fail(message: string): never fonksiyonunun dönüş tipi.⁶

Literal Tipler ve as const

Literal tipleri | ile birleştirerek bir değişkenin alabileceği değerleri sınırlayabilirsiniz: let size: "S" | "M" | "L" değişkenine "XL" atanamaz.¹ Bunu bir sonraki derste ayrıntılı göreceksiniz.

Object içindeki özellikler değişebileceği için genel tipi alır. Sonuna as const eklemek tüm değerleri literal ve readonly yapar.¹

const config = { currency: "TRY", taxRate: 0.2 };
// { currency: string; taxRate: number }

const constConfig = { currency: "TRY", taxRate: 0.2 } as const;
// { readonly currency: "TRY"; readonly taxRate: 0.2 }
constConfig.taxRate = 0.1;
// Hata: Cannot assign to 'taxRate' because it is a read-only property.

Object Tipine İlk Bakış

Object'in tipini, özelliklerini süslü parantez içinde sayarak doğrudan yazabilirsiniz. Eksik bir özellik hata verir.¹

function printProduct(product: { name: string; price: number }) {
  console.log(`${product.name}: ${product.price} TL`);
}

printProduct({ name: "Kablosuz Kulaklık" });
// Hata: Property 'price' is missing in type '{ name: string; }' but required in type '{ name: string; price: number; }'.

Bu yazım tek seferlik kullanımlar içindir. Aynı şekli birden çok yerde kullanmak için ona type ya da interface ile isim verirsiniz; bunu bir sonraki derste anlatıyoruz.

Kendin Dene

TypeScript Playground'u açın ve:

• const total = calculateTotal(249, 2) yazıp total'ın üzerine gelin; çıkarılan tipi görün.

• calculateTotal'ın parametrelerinden tipleri silin ve çıkan implicitly has an 'any' type hatasını okuyun.

• getShippingCost'tan : number dönüş tipini silin; hatanın kaybolduğunu ve dönüş tipinin "49.90" | 0 olarak çıkarıldığını görün.

• JSON.parse sonucunu unknown tipinde bir değişkene atayın ve typeof kontrolüyle number olduğunu doğrulayın.

Detaylı Öğrenmek İçin

• Resmi doküman: TypeScript Handbook'un Everyday Types sayfası; bu dersteki tüm konuların kaynağı.¹

• Kitap: Matt Pocock'un çevrimiçi okunabilen Total TypeScript Essentials kitabının "Essential Types and Annotations" bölümü.¹²

• Yazı: Dan Vanderkam'ın Effective TypeScript kitabından "Avoid Cluttering Your Code with Inferable Types" maddesi.³

• Konuşma: Stefan Baumgartner'ın any, unknown ve tip kontrolünün kaçırdığı yerleri anlattığı "The Lies We Tell Ourselves Using TypeScript" konuşması (TypeScript Congress 2023, 28 dk).¹³

• Alıştırma: Matt Pocock'un ücretsiz, etkileşimli Beginner's TypeScript eğitimi (18 ders).¹⁴