TypeScript: dilin mahiyyəti, ciddi tipləşdirmə və React Native

TypeScript nədir?

TypeScript — Microsoft-dan (2012) proqramlaşdırma dili, Anders Hejlsberg (C# və Turbo Pascal yaradıcısı) tərəfindən hazırlanmışdır. TypeScript JavaScript-i statik tip sistemi, interfeyslər, generiklər, sadalamalar və dekoratorlarla genişləndirir. TS-də kod tsc və ya Babel kompilyatoru vasitəsilə təmiz JavaScript-ə (transpilasiya) kompilyasiya olunur — nəticədə istənilən mühitdə işləyən standart JS alınır.

TypeScript-in yaradılma motivasiyası — böyük layihələrdə JavaScript-in məhdudiyyətləridir. JS-nin dinamik tipləşdirməsi yalnız işləmə vaxtında aşkarlanan səhvlərə gətirib çıxarır: undefined is not a function, Cannot read property of null. TypeScript tip yoxlamasını kompilasiya mərhələsinə köçürür, bu səhvlərin kod icra olunmadan qarşısını alır. Layihə nə qədər böyükdürsə, TS-nin üstünlükləri bir o qədər əhəmiyyətlidir: 100 000+ sətirlik kod bazasında TS yüzlərlə potensial səhvin qarşısını alır.

TypeScript-in əsas xüsusiyyəti — tsconfig.json-da strict: true isteğe bağlı bayrağı ilə ciddi tipləşdirmədir. Ciddi rejimdə bütün yoxlamalar aktivləşir: strictNullChecks (null/undefined digər tiplərlə uyğunsuzdur), noImplicitAny (gizli any-ı qadağan edir), strictFunctionTypes (funksiya parametrlərinin kontravariantlığı). Varsayılan olaraq strict: true bütün yeni layihələr üçün tövsiyə olunur.

TypeScript vs JavaScript

TypeScript JavaScript-dən yalnız inkişaf mərhələsində fərqlənir. Kompilyasiyadan sonra tiplər silinir — işləmə vaxtı performans itkisi olmadan adi JS icra edir. Bu kompromisdir: inkişaf əlavə kompilyasiya addımı tələb edir, lakin IDE-də avtomatik tamamlama, simvolların adlandırılması ilə refaktorinq və birbaşa koddə tip sənədləşdirməsi verir.

TypeScript tip sistemi

TypeScript tip sistemi — struktur (structural typing), nominal deyil: iki tip, adından asılı olmayaraq, strukturları uyğun gəlirsə uyğunlaşır. Bu, Java/C#-dən fərqlənir, burada uyğunluq sinif və ya interfeysin adı ilə müəyyən edilir. Struktur tipləşdirmə mövcud JS kodu ilə inteqrasiyanı sadələşdirir — hər tip üçün implements bəyan etmək lazım deyil.

Əsas və qabaqcıl tiplər

TypeScript JS-nin primitiv tiplərini üstəgəl dəstəkləyir: any (yoxlamanı söndürmə), unknown (təhlükəsiz any — istifadədən əvvəl yoxlama tələb edir), never (heç vaxt qaytarmır), void (qaytarma yoxdur), tuple (sabit uzunluqlu kortej), enum (sadalama), union (string | number), intersection (A & B), literal ('red' | 'blue'), index signature ([key: string]: number).

// TypeScript-in əsas tip sistemi
// Primitiv tiplər
const name: string = 'React Native';
const version: number = 0.73;
const isReady: boolean = true;

// Union və Literal tipləri
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 uzunluqlu kortej
type Coordinate = [number, number];
const position: Coordinate = [55.75, 37.61];

// Enum — avtomatik artımla sadalama
enum AppState {
  Background,
  Foreground,
  Inactive
}

// Unknown — any-ə təhlükəsiz alternativ
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 tipi — dəyərləri üç varianta məhdudlaşdıran sətir literallarının union-udur. 'windows' ötürülərsə, TypeScript səhv verəcək. Coordinate korteji tam iki ədədə zəmanət verir — bu koordinatlar və ya RGB rəngləri üçün əlverişlidir. AppState enum-ı tərs xəritələmə ilə obyektə kompilyasiya olunur. Unknown istifadədən əvvəl tip yoxlamasını məcbur edir — any-dən fərqli olaraq, unknown varsayılan olaraq təhlükəsizdir.

İnterfeyslər və type-aliaslar

İnterfeyslər (interface) və type-aliaslar (type) TypeScript-də obyektlərin formasını təsvir edir. İnterfeyslər birləşdirilə bilər (declaration merging — təkrar bəyanetmə sahələr əlavə edir) və genişləndirilə bilər (extends). Type-aliaslar union, intersection, tuple və şərti tipləri təsvir edə bilər, lakin declaration merging-i dəstəkləmir. Qayda: API obyektləri üçün interface, qalan hər şey üçün type istifadə edin.

// React Native üçün interfeyslər və tiplər
// İsteğe bağlı sahələri olan Interface
interface User {
  id: string;
  name: string;
  email: string;
  avatar?: string; // isteğe bağlı sahə
  readonly createdAt: Date; // yalnız oxumaq üçün
}

// İnterfeysin genişləndirilməsi (extends)
interface AdminUser extends User {
  role: 'admin';
  permissions: string[];
}

// API məlumatları üçün tip
type ApiResponse<T> = {
  data: T;
  status: Status;
  error?: string;
};

// Utility types — Partial bütün sahələri isteğe bağlı edir
type PartialUser = Partial<User>;

// Pick — göstərilən sahələri seçir
type UserPreview = Pick<User, 'id' | 'name' | 'avatar'>;

// Record — tipləşdirilmiş açarlarla lüğət
type UserMap = Record<string, User>;

User interfeysi ? (isteğe bağlı sahə) və readonly (yalnız oxumaq üçün) ilə. ApiResponse<T> — API cavabları üçün generik-interfeys. Partial<User> — bütün sahələri isteğe bağlı edən utilitar tip (redaktə formaları üçün faydalıdır). Pick<User, 'id' | 'name'> yalnız göstərilən sahələri seçir — ön baxış komponentləri üçün əlverişlidir. Record<string, User> — ID üzrə istifadəçilər lüğəti.

Generiklər və utilitar tiplər

Generiklər — TypeScript-in əsas xüsusiyyətlərindən biri, tip təhlükəsizliyini itirmədən istənilən tiplərlə işləyən komponentlər yaratmağa imkan verir. Generik-funksiya bucaq mötərizələrində tip parametri ilə təyin olunur: function identity<T>(arg: T): T. T tipi arqumentdən avtomatik çıxarılır və ya açıq şəkildə göstərilir: identity<string>('hello').

Utilitar tiplər — tiplərin transformasiyası üçün daxili generiklər: Partial<T> (bütün sahələr isteğe bağlıdır), Required<T> (bütün sahələr məcburidir), Readonly<T> (bütün sahələr yalnız oxumaq üçün), Pick<T, K> (sahə seçimi), Omit<T, K> (sahələrin xaric edilməsi), Record<K, T> (lüğət), Exclude<T, U> (union-un xaric edilməsi), Extract<T, U> (union-un çıxarılması), NonNullable<T> (null/undefined-in xaric edilməsi).

// TypeScript-də generiklər
// API ilə iş üçün generik-funksiya
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>;
}

// Konkret tiplə istifadə
interface Product {
  id: number;
  title: string;
  price: number;
}

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

// Vəziyyəti idarə etmək üçün generik-sinif
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 ilə tipləşdirilmiş iş
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> funksiyası — fetch-in tipləşdirilmiş sarğısı. T parametri cavabın formasını təyin edir: fetchData<Product[]> çağırışında TypeScript qaytarılan massivin Product obyektləri ehtiva etdiyini bilir. StateManager<S> sinfi istənilən tipin vəziyyətini idarə edir — qismən yeniləmə üçün Partial<S>. Action<T, P> — switch-də avtomatik tip daralması ilə Redux hərəkətləri üçün discriminated union.

TypeScript React Native-də

TypeScript React Native-də komponentlərin props və vəziyyətinin ciddi tipləşdirilməsini təmin edir. React Native CLI .tsx genişlənməsi və tsconfig.json ilə şablon yaradır. PropTypes (JS) TypeScript interfeysləri ilə əvəz olunur — yoxlama işləmə vaxtında deyil, kompilasiya mərhələsində aparılır. styled-components və React Navigation tam tiplərə malikdir.

Komponentin tipləşdirilməsi

React.FC<Props> — props ilə funksional komponentin tipi. Uşaqlar (children) avtomatik tipləşdirilir. useRef<T> — yerli komponentə istinad. useState<S> — tip çıxarılması ilə vəziyyət. useNavigation<T> — tipləşdirilmiş naviqasiya. useCallback, useMemo — avtomatik tip çıxarılması ilə. Bütün React hookları tam tipləşdirilmişdir.

// Tipləşdirilmiş React Native komponenti
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';

// Naviqasiya və məlumatlar üçün tiplər
type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string };
  Settings: undefined;
};

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

// Props üçün interfeys
interface ProductListProps {
  products: Product[];
  onSelect: (id: number) => void;
}

// Tipləşdirilmiş funksional komponent
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 tipi — parametrləri ilə marşrutlar lüğəti. NavigationProp — tipləşdirilmiş naviqasiya: navigation.navigate('Profile', { userId }) Profile-in userId qəbul etdiyini yoxlayır. Tipləşdirilmiş parametrlərlə useCallback lazımsız yenidən renderlərin qarşısını alır. FlatList generik vasitəsilə tipləşdirilir: — data və renderItem avtomatik tiplər alır.

TypeScript tərtibatçısının alətləri

TypeScript alətləri tsc kompilyatoru, tsconfig.json, VS Code-da IDE dəstəyi, @typescript-eslint ilə ESLint, Prettier və DefinitelyTyped (@types/*) daxildir. tsc — .ts fayllarını .js-ə çevirən kompilyator. tsconfig.json — konfiqurasiya: target (ES2020), module (ESNext), strict: true, outDir (çıxış qovluğu). sourceMap — kod xəritələri vasitəsilə brauzerdə TS-nin debug-u.

DefinitelyTyped — daxili tipləri olmayan kitabxanalar üçün tipləşdirmələr deposudur. Quraşdırma: npm install @types/react @types/react-native --save-dev. .d.ts faylları — tip bəyannamələri. Müasir kitabxanalar (React, React Native, Angular) daxili tipləri ehtiva edir və @types/ tələb etmir. Köhnə JS kitabxanaları üçün DefinitelyTyped yeganə tip mənbəyidir.

// tsconfig.json — minimal konfiqurasiya
{
  "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ız yoxlama, JS yaratmadan
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "exclude": ["node_modules", "babel.config.js"]
}

strict: true seçimi bütün tip yoxlamalarını aktivləşdirir — bütün layihələr üçün tövsiyə olunur. jsx: 'react-native' JSX-i transformasiyasız saxlayır (React Native JSX-i Babel vasitəsilə emal edir). moduleResolution: 'node' — modulların Node.js-dəki kimi axtarışı. esModuleInterop — CommonJS modulları ilə uyğunluq. noEmit: true — yalnız yoxlama, JS faylları yaratmadan (Babel və ya Metro JS yaradır).