TypeScript: tilning mohiyati, qattiq tiplash va React Native

TypeScript nima?

TypeScript — Microsoft-dan (2012) dasturlash tili, Anders Hejlsberg (C# va Turbo Pascal yaratuvchisi) tomonidan ishlab chiqilgan. TypeScript JavaScriptni statik tur tizimi, interfeyslar, generiklar, sanab o'tishlar va dekoratorlar bilan kengaytiradi. TSdagi kod tsc yoki Babel kompilyatori yordamida toza JavaScriptga (transpilyatsiya) kompilyatsiya qilinadi — natijada har qanday muhitda ishlaydigan standart JS olinadi.

TypeScript yaratilishining motivi — katta loyihalarda JavaScriptning cheklovlaridir. JSning dinamik tiplashi faqat ish vaqtida aniqlanadigan xatolarga olib keladi: undefined is not a function, Cannot read property of null. TypeScript tur tekshirishni kompilyatsiya bosqichiga o'tkazadi, bu xatolarni kod bajarilishidan oldin oldini oladi. Loyiha qanchalik katta bo'lsa, TSning afzalliklari shunchalik muhim: 100 000+ qatorli kod bazasida TS yuzlab potentsial xatolarning oldini oladi.

TypeScript ning asosiy xususiyati — tsconfig.json da strict: true ixtiyoriy bayrog'i bilan qattiq tiplash. Qattiq rejimda barcha tekshirishlar yoqiladi: strictNullChecks (null/undefined boshqa turlar bilan mos kelmaydi), noImplicitAny (yashirin anyni taqiqlaydi), strictFunctionTypes (funksiya parametrlarining kontravariantligi). Odatiy bo'lib, strict: true barcha yangi loyihalar uchun tavsiya etiladi.

TypeScript vs JavaScript

TypeScript JavaScriptdan faqat rivojlanish bosqichida farq qiladi. Kompilyatsiyadan so'ng turlar o'chiriladi — ish vaqti performans yo'qotmasdan oddiy JSnI bajaradi. Bu murosa: rivojlanish qo'shimcha kompilyatsiya qadamini talab qiladi, lekin IDEda avtomatik to'ldirish, simvollarni nomlash bilan refaktoring va to'g'ridan-to'g'ri kodda tur hujjatlarini beradi.

TypeScript tur tizimi

TypeScript tur tizimi — strukturaviy (structural typing), nominativ emas: ikki tur, nomidan qat'iy nazar, agar ularning tuzilishi mos kelsa, mos keladi. Bu Java/C# dan farq qiladi, bu erda moslik sinf yoki interfeys nomi bilan belgilanadi. Strukturaviy tiplash mavjud JS kod bilan integratsiyani soddalashtiradi — har bir tur uchun implements e'lon qilish shart emas.

Asosiy va ilg'or turlar

TypeScript JSning ibtidoiy turlarini va qo'shimchasini qo'llab-quvvatlaydi: any (tekshirishni o'chirish), unknown (xavfsiz any — ishlatishdan oldin tekshirish talab qiladi), never (hech qachon qaytarmaydi), void (qaytarish yo'q), tuple (qat'iy uzunlikdagi kortej), enum (sanab o'tish), union (string | number), intersection (A & B), literal ('red' | 'blue'), index signature ([key: string]: number).

// TypeScript asosiy tur tizimi
// Ibtidoiy turlar
const name: string = 'React Native';
const version: number = 0.73;
const isReady: boolean = true;

// Union va Literal turlari
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 — qat'iy uzunlikdagi kortej
type Coordinate = [number, number];
const position: Coordinate = [55.75, 37.61];

// Enum — avtomatik o'sish bilan sanab o'tish
enum AppState {
  Background,
  Foreground,
  Inactive
}

// Unknown — anyga xavfsiz 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 turi — qiymatlarni uch variant bilan cheklovchi satr literallarining unionidir. Agar 'windows' uzatilsa, TypeScript xato beradi. Coordinate korteji roppa-rosa ikki raqamni kafolatlaydi — bu koordinatalar yoki RGB ranglar uchun qulay. AppState enum-i teskari xaritalash bilan ob'ektga kompilyatsiya qilinadi. Unknown ishlatishdan oldin tur tekshirishni majbur qiladi — anydan farqli o'laroq, unknown odatiy bo'lib xavfsizdir.

Interfeyslar va type-aliaslar

Interfeyslar (interface) va type-aliaslar (type) TypeScriptda ob'ektlarning shaklini tavsiflaydi. Interfeyslar birlashtirilishi mumkin (declaration merging — qayta e'lon qilish maydonlarni qo'shadi) va kengaytirilishi mumkin (extends). Type-aliaslar union, intersection, tuple va shartli turlarni tavsiflashi mumkin, lekin declaration mergingni qo'llab-quvvatlamaydi. Qoida: API ob'ektlari uchun interface, qolgan hamma narsa uchun type dan foydalaning.

// React Native uchun interfeyslar va turlar
// Ixtiyoriy maydonlar bilan Interface
interface User {
  id: string;
  name: string;
  email: string;
  avatar?: string; // ixtiyoriy maydon
  readonly createdAt: Date; // faqat o'qish uchun
}

// Interfeysni kengaytirish (extends)
interface AdminUser extends User {
  role: 'admin';
  permissions: string[];
}

// API ma'lumotlari uchun tur
type ApiResponse<T> = {
  data: T;
  status: Status;
  error?: string;
};

// Utility types — Partial barcha maydonlarni ixtiyoriy qiladi
type PartialUser = Partial<User>;

// Pick — ko'rsatilgan maydonlarni tanlaydi
type UserPreview = Pick<User, 'id' | 'name' | 'avatar'>;

// Record — tiplangan kalitlar bilan lug'at
type UserMap = Record<string, User>;

User interfeysi ? (ixtiyoriy maydon) va readonly (faqat o'qish uchun) bilan. ApiResponse<T> — API javoblari uchun generik-interfeys. Partial<User> — barcha maydonlarni ixtiyoriy qiladigan utilitar tip (tahrirlash shakllari uchun foydali). Pick<User, 'id' | 'name'> faqat ko'rsatilgan maydonlarni tanlaydi — oldindan ko'rish komponentlari uchun qulay. Record<string, User> — ID bo'yicha foydalanuvchilar lug'ati.

Generiklar va utilitar turlar

Generiklar — TypeScriptning asosiy xususiyatlaridan biri, tur xavfsizligini yo'qotmasdan har qanday turlar bilan ishlaydigan komponentlar yaratishga imkon beradi. Generik-funksiya burchak qavslarida tur parametri bilan aniqlanadi: function identity<T>(arg: T): T. T turi argumentdan avtomatik ravishda chiqariladi yoki aniq ko'rsatiladi: identity<string>('hello').

Utilitar turlar — turlarni transformatsiya qilish uchun o'rnatilgan generiklar: Partial<T> (barcha maydonlar ixtiyoriy), Required<T> (barcha maydonlar majburiy), Readonly<T> (barcha maydonlar faqat o'qish uchun), Pick<T, K> (maydon tanlash), Omit<T, K> (maydonlarni chiqarib tashlash), Record<K, T> (lug'at), Exclude<T, U> (unionni chiqarib tashlash), Extract<T, U> (unionni ajratib olish), NonNullable<T> (null/undefinedni chiqarib tashlash).

// TypeScriptda generiklar
// API bilan ishlash uchun 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>;
}

// Aniq tur bilan foydalanish
interface Product {
  id: number;
  title: string;
  price: number;
}

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

// Holatni boshqarish uchun generik-sinf
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 bilan tiplangan ish
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> funksiyasi — fetchning tiplangan o'rami. T parametri javobning shaklini belgilaydi: fetchData<Product[]> chaqiruvida TypeScript qaytarilgan massiv Product ob'ektlarini o'z ichiga olganligini biladi. StateManager<S> sinfi har qanday turning holatini boshqaradi — qisman yangilash uchun Partial<S>. Action<T, P> — switchda avtomatik tur torayishi bilan Redux harakatlari uchun discriminated union.

TypeScript React Nativeda

TypeScript React Nativeda komponentlarning props va holatini qattiq tiplashni ta'minlaydi. React Native CLI .tsx kengaytmasi va tsconfig.json bilan shablon yaratadi. PropTypes (JS) TypeScript interfeyslari bilan almashtiriladi — tekshirish ish vaqtida emas, balki kompilyatsiya bosqichida amalga oshiriladi. styled-components va React Navigation to'liq turlarga ega.

Komponentni tiplash

React.FC<Props> — props bilan funksional komponentning turi. Bolalar (children) avtomatik tiplanadi. useRef<T> — mahalliy komponentga havola. useState<S> — tur chiqarish bilan holat. useNavigation<T> — tiplangan navigatsiya. useCallback, useMemo — avtomatik tur chiqarish bilan. Barcha React hooklari to'liq tiplangan.

// Tiplangan 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';

// Navigatsiya va ma'lumotlar uchun turlar
type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string };
  Settings: undefined;
};

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

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

// Tiplangan 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 turi — parametrlari bilan marshrutlar lug'ati. NavigationProp — tiplangan navigatsiya: navigation.navigate('Profile', { userId }) Profile userId ni qabul qilishini tekshiradi. Tiplangan parametrlar bilan useCallback keraksiz qayta renderlarning oldini oladi. FlatList generik orqali tiplanadi: — data va renderItem avtomatik turlarni oladi.

TypeScript dasturchisi vositalari

TypeScript vositalari tsc kompilyatori, tsconfig.json, VS Codeda IDE qo'llab-quvvatlashi, @typescript-eslint bilan ESLint, Prettier va DefinitelyTyped (@types/*) ni o'z ichiga oladi. tsc — .ts fayllarini .js ga aylantiruvchi kompilyator. tsconfig.json — konfiguratsiya: target (ES2020), module (ESNext), strict: true, outDir (chiqish papkasi). sourceMap — kod xaritalari orqali brauzerda TSni tuzatish.

DefinitelyTyped — o'rnatilgan turlari bo'lmagan kutubxonalar uchun tiplashmalar ombori. O'rnatish: npm install @types/react @types/react-native --save-dev. .d.ts fayllari — tur deklaratsiyalari. Zamonaviy kutubxonalar (React, React Native, Angular) o'rnatilgan turlarni o'z ichiga oladi va @types/ talab qilmaydi. Eski JS kutubxonalari uchun DefinitelyTyped yagona tur manbaidir.

// tsconfig.json — minimal konfiguratsiya
{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "strict": true,
    "jsx": "react-native",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "noEmit": true // faqat tekshirish, JS yaratmasdan
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "exclude": ["node_modules", "babel.config.js"]
}

strict: true opsiyasi barcha tur tekshirishlarini yoqadi — barcha loyihalar uchun tavsiya etiladi. jsx: 'react-native' JSXni transformatsiyasiz saqlaydi (React Native JSXni Babel orqali qayta ishlaydi). moduleResolution: 'node' — modullarni Node.jsdagi kabi qidirish. esModuleInterop — CommonJS modullari bilan moslik. noEmit: true — faqat tekshirish, JS fayllarini yaratmasdan (Babel yoki Metro JS yaratadi).