TypeScript: dilin özü, sıkı tür denetimi ve React Native

TypeScript Nedir?

TypeScript, Microsoft (2012) tarafından Anders Hejlsberg (C# ve Turbo Pascal'ın yaratıcısı) tarafından oluşturulmuş bir programlama dilidir. TypeScript, JavaScript'i statik bir tür sistemi, arayüzler, generics, numaralandırmalar ve dekoratörlerle genişletir. TS kodu, tsc derleyicisi veya Babel aracılığıyla saf JavaScript'e (dönüştürme) derlenir — çıktı, her ortamda çalışan standart JS'dir.

TypeScript'in oluşturulma motivasyonu, büyük projelerde JavaScript'in sınırlamalarıdır. JS'nin dinamik tür denetimi, yalnızca çalışma zamanında keşfedilen hatalara yol açar: undefined is not a function, Cannot read property of null. TypeScript, tür denetimini derleme zamanına taşıyarak bu hataları kod yürütülmeden önler. Proje ne kadar büyükse, TS'nin faydaları o kadar büyük olur: 100.000+ satırlık bir kod tabanında, TS yüzlerce potansiyel hatayı önler.

TypeScript'in temel bir özelliği, tsconfig.json'da isteğe bağlı strict: true bayrağı ile sıkı tür denetimidir. Sıkı mod tüm denetimleri etkinleştirir: strictNullChecks (null/undefined diğer türlerle uyumsuz), noImplicitAny (örtük any'yi yasaklar), strictFunctionTypes (fonksiyon parametrelerinin kontravaryansı). Varsayılan olarak, tüm yeni projeler için strict: true önerilir.

TypeScript vs JavaScript

TypeScript, JavaScript'ten yalnızca geliştirme aşamasında farklılık gösterir. Derlemeden sonra türler silinir — çalışma zamanı, performans kaybı olmadan normal JS yürütür. Bu bir ödünleşimdir: geliştirme ek bir derleme adımı gerektirir, ancak IDE'de otomatik tamamlama, sembol yeniden adlandırmayla yeniden düzenleme ve doğrudan kodda tür dokümantasyonu sağlar.

TypeScript Tür Sistemi

TypeScript'in tür sistemi yapısaldır, nominal değildir: iki tür, adlarından bağımsız olarak yapıları eşleşiyorsa uyumludur. Bu, uyumluluğun sınıf veya arayüz adıyla belirlendiği Java/C#'dan farklıdır. Yapısal tür denetimi, mevcut JS koduyla entegrasyonu basitleştirir — her tür için implements bildirmek gerekmez.

Temel ve Gelişmiş Türler

TypeScript, JS temel türlerine ek olarak şunları destekler: any (denetimi devre dışı bırakır), unknown (güvenli any — kullanımdan önce denetim gerektirir), never (asla dönmez), void (dönüş yok), tuple (sabit uzunlukta demet), enum (numaralandırma), union (string | number), intersection (A & B), literal ('red' | 'blue'), index signature ([key: string]: number).

// TypeScript temel tür sistemi
// İlkel türler
const name: string = 'React Native';
const version: number = 0.73;
const isReady: boolean = true;

// Union ve Literal türleri
type Platform = 'ios' | 'android' | 'web';
type Status = 'idle' | 'loading' | 'success' | 'error';

function getSDKVersion(platform: Platform): number {
  switch (platform) {
    case 'ios': return 17;
    case 'android': return 34;
    case 'web': return 2025;
  }
}

// Tuple — sabit uzunlukta demet
type Coordinate = [number, number];
const position: Coordinate = [55.75, 37.61];

// Enum — otomatik artan numaralandırma
enum AppState {
  Background,
  Foreground,
  Inactive
}

// Unknown — any'ye güvenli alternatif
function parseJSON(json: string): unknown {
  return JSON.parse(json);
}

const data = parseJSON('{"name":"TS"}');
if (typeof data === 'object' && data !== null) {
  console.log((data as Record<string, unknown>).name);
}

Platform türü, değerleri üç seçenekle sınırlayan bir dize değişmezleri birleşimidir. 'windows' geçirirseniz, TypeScript hata verir. Coordinate demeti tam olarak iki sayıyı garanti eder — koordinatlar veya RGB renkleri için kullanışlıdır. AppState enum'u ters eşleme ile bir nesneye derlenir. Unknown, kullanımdan önce tür denetimini zorunlu kılar — any'nin aksine, unknown varsayılan olarak güvenlidir.

Arayüzler ve Tür Takma Adları

Arayüzler ve tür takma adları TypeScript'te nesne şekillerini tanımlar. Arayüzler bildirim birleştirmeyi (yeniden bildirim alan ekler) ve genişletmeyi (extends) destekler. Tür takma adları birleşimler, kesişimler, demetler ve koşullu türleri tanımlayabilir ancak bildirim birleştirmeyi desteklemez. Kural: API nesneleri için interface, diğer her şey için type kullanın.

// React Native için arayüzler ve türler
// İsteğe bağlı alanlarla arayüz
interface User {
  id: string;
  name: string;
  email: string;
  avatar?: string; // isteğe bağlı alan
  readonly createdAt: Date; // salt okunur
}

// Arayüz genişletme (extends)
interface AdminUser extends User {
  role: 'admin';
  permissions: string[];
}

// API verileri için tür
type ApiResponse<T> = {
  data: T;
  status: Status;
  error?: string;
};

// Utility types — Partial tüm alanları isteğe bağlı yapar
type PartialUser = Partial<User>;

// Pick — belirtilen alanları seçer
type UserPreview = Pick<User, 'id' | 'name' | 'avatar'>;

// Record — tür denetimli anahtarlarla sözlük
type UserMap = Record<string, User>;

User arayüzü ? (isteğe bağlı alan) ve readonly (salt okunur) ile. ApiResponse<T> API yanıtları için genel bir arayüzdür. Partial<User> tüm alanları isteğe bağlı yapan bir yardımcı türdür (düzenleme formları için kullanışlı). Pick<User, 'id' | 'name'> yalnızca belirtilen alanları seçer — önizleme bileşenleri için kullanışlıdır. Record<string, User> kimliğe göre kullanıcı sözlüğüdür.

Generics ve Yardımcı Türler

Generics, TypeScript'in temel bir özelliğidir ve tür güvenliğini kaybetmeden herhangi bir türle çalışan bileşenler oluşturmanıza olanak tanır. Genel bir işlev, açılı parantezler içinde bir tür parametresiyle tanımlanır: function identity<T>(arg: T): T. T türü, bağımsız değişkenden otomatik olarak çıkarılır veya açıkça belirtilir: identity<string>('hello').

Yardımcı türler, tür dönüşümleri için yerleşik genericslerdir: Partial<T> (tüm alanlar isteğe bağlı), Required<T> (tüm alanlar zorunlu), Readonly<T> (tüm alanlar salt okunur), Pick<T, K> (alanları seç), Omit<T, K> (alanları çıkar), Record<K, T> (sözlük), Exclude<T, U> (birleşimden çıkar), Extract<T, U> (birleşimden ayıkla), NonNullable<T> (null/undefined'ı çıkar).

// TypeScript'te Generics
// API ile çalışmak için genel işlev
async function fetchData<T>(url: string): Promise<T> {
  const response = await fetch(url);

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return response.json() as Promise<T>;
}

// Belirli bir türle kullanım
interface Product {
  id: number;
  title: string;
  price: number;
}

const products = await fetchData<Product[]>('/api/products');

// Durum yönetimi için genel sınıf
class StateManager<S> {
  private state: S;

  constructor(initial: S) {
    this.state = initial;
  }

  getState(): S {
    return this.state;
  }

  updateState(partial: Partial<S>): void {
    this.state = { ...this.state, ...partial };
  }
}

// Redux Reducer ile tür denetimli çalışma
type Action<T, P> = {
  type: T;
  payload: P;
};

type UserAction =
  | Action<'SET_USER', User>
  | Action<'CLEAR_USER', undefined>
  | Action<'UPDATE_USER', Partial<User>>;

fetchData<T> işlevi, fetch çevresinde tür denetimli bir sarmalayıcıdır. T parametresi yanıt şeklini belirler: fetchData<Product[]> çağrılırken TypeScript, döndürülen dizinin Product nesneleri içerdiğini bilir. StateManager<S> sınıfı herhangi bir türün durumunu yönetir — kısmi güncellemeler için Partial<S>. Action<T, P>, switch'te otomatik tür daraltma ile Redux eylemleri için ayırt edilmiş bir birleşimdir.

React Native'de TypeScript

React Native'de TypeScript, bileşen props ve state için sıkı tür denetimi sağlar. React Native CLI, .tsx uzantılı ve tsconfig.json içeren bir şablon oluşturur. PropTypes (JS), TypeScript arayüzleriyle değiştirilir — denetim çalışma zamanında değil, derleme zamanında yapılır. styled-components ve React Navigation tam tür desteğine sahiptir.

Bileşen Tür Denetimi

React.FC<Props>, props'a sahip işlevsel bir bileşenin türüdür. Children otomatik olarak tür denetimlidir. useRef<T> — yerel bir bileşene referans. useState<S> — tür çıkarımı ile durum. useNavigation<T> — tür denetimli gezinme. useCallback, useMemo — otomatik tür çıkarımı ile. Tüm React hook'ları tamamen tür denetimlidir.

// Tür denetimli React Native bileşeni
import React, { useState, useCallback } from 'react';
import {
  View, Text, FlatList, TouchableOpacity,
  StyleSheet
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';

// Navigasyon ve veri için türler
type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string };
  Settings: undefined;
};

type NavigationProp =
  NativeStackNavigationProp<RootStackParamList, 'Home'>;

// Props için arayüz
interface ProductListProps {
  products: Product[];
  onSelect: (id: number) => void;
}

// Tür denetimli işlevsel bileşen
const ProductList: React.FC<ProductListProps> = ({
  products,
  onSelect
}) => {
  const navigation = useNavigation<NavigationProp>();
  const [selectedId, setSelectedId] = useState<number | null>(null);

  const handlePress = useCallback((id: number) => {
    setSelectedId(id);
    onSelect(id);
    navigation.navigate('Profile', { userId: String(id) });
  }, [onSelect, navigation]);

  const renderItem = useCallback(({ item }: { item: Product }) => (
    <TouchableOpacity onPress={() => handlePress(item.id)}>
      <Text>{item.title}</Text>
      <Text>${item.price.toFixed(2)}</Text>
    </TouchableOpacity>
  ), [handlePress]);

  return (
    <FlatList
      data={products}
      renderItem={renderItem}
      keyExtractor={(item) => String(item.id)}
    />
  );
};

RootStackParamList türü, parametreleriyle birlikte yolların bir sözlüğüdür. NavigationProp, tür denetimli gezinme sağlar: navigation.navigate('Profile', { userId }), Profile'in userId'yi kabul ettiğini doğrular. Tür denetimli parametrelerle useCallback, gereksiz yeniden oluşturmaları önler. FlatList, generics aracılığıyla tür denetimlidir: — data ve renderItem otomatik olarak tür alır.

TypeScript Geliştirici Araçları

TypeScript araçları, tsc derleyicisi, tsconfig.json, VS Code'da IDE desteği, @typescript-eslint ile ESLint, Prettier ve DefinitelyTyped'ı (@types/*) içerir. tsc, .ts'yi .js'ye dönüştüren derleyicidir. tsconfig.json şunları yapılandırır: target (ES2020), module (ESNext), strict: true, outDir (çıktı klasörü). sourceMap — kod haritaları aracılığıyla tarayıcıda TS hata ayıklama.

DefinitelyTyped, yerleşik türleri olmayan kitaplıklar için tür tanımları deposudur. Kurulum: npm install @types/react @types/react-native --save-dev. .d.ts dosyaları tür bildirimleridir. Modern kitaplıklar (React, React Native, Angular) yerleşik türler içerir ve @types/ gerektirmez. Eski JS kitaplıkları için DefinitelyTyped tek tür kaynağıdır.

// tsconfig.json — minimum yapılandırma
{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "strict": true,
    "jsx": "react-native",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "noEmit": true // yalnızca denetim, JS oluşturma yok
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "exclude": ["node_modules", "babel.config.js"]
}

strict: true seçeneği tüm tür denetimlerini etkinleştirir — tüm projeler için önerilir. jsx: 'react-native' JSX'i dönüşüm olmadan korur (React Native, JSX'i Babel aracılığıyla işler). moduleResolution: 'node' — Node.js'deki gibi modül çözümlemesi. esModuleInterop — CommonJS modülleriyle uyumluluk. noEmit: true — JS dosyaları oluşturmadan yalnızca denetim (Babel veya Metro JS'yi oluşturur).