TypeScript: същност на езика, строга типизация и React Native

Какво е TypeScript?

TypeScript — език за програмиране от Microsoft (2012), разработен от Андерс Хейлсберг (създател на C# и Turbo Pascal). TypeScript разширява JavaScript със статическа система от типове, интерфейси, генерици, изброявания и декоратори. Кодът на TS се компилира в чист JavaScript (транспилация) чрез компилатора tsc или Babel — на изхода се получава стандартен JS, работещ във всяка среда.

Мотивацията за създаване на TypeScript — ограниченията на JavaScript в големи проекти. Динамичната типизация на JS води до грешки, които се откриват само в runtime: undefined is not a function, Cannot read property of null. TypeScript премества проверката на типовете на етапа на компилация, предотвратявайки тези грешки преди изпълнението на кода. Колкото по-голям е проектът, толкова по-значими са предимствата на TS: в кодова база от 100 000+ реда TS предотвратява стотици потенциални грешки.

Ключова характеристика на TypeScript — строга типизация с опционален флаг strict: true в tsconfig.json. В строг режим се включват всички проверки: strictNullChecks (null/undefined са несъвместими с други типове), noImplicitAny (забранява имплицитен any), strictFunctionTypes (контравариантност на параметри на функции). По подразбиране strict: true се препоръчва за всички нови проекти.

TypeScript срещу JavaScript

TypeScript се различава от JavaScript само на етапа на разработка. След компилация типовете се изтриват — runtime изпълнява обикновен JS без загуба на производителност. Това е компромис: разработката изисква допълнителна стъпка на компилация, но дава autocomplete в IDE, рефакториране с преименуване на символи и документиране на типове директно в кода.

Система от типове на TypeScript

Системата от типове на TypeScript — структурна (structural typing), а не номинативна: два типа са съвместими, ако структурата им съвпада, независимо от името. Това се различава от Java/C#, където съвместимостта се определя от името на класа или интерфейса. Структурната типизация опростява интеграцията със съществуващ JS код — не е нужно да декларирате implements за всеки тип.

Основни и напреднали типове

TypeScript поддържа примитивните типове на JS плюс: any (изключване на проверка), unknown (безопасен any — изисква проверка преди употреба), never (никога не връща), void (без връщане), tuple (кортеж с фиксирана дължина), enum (изброяване), union (string | number), intersection (A & B), literal ('red' | 'blue'), index signature ([key: string]: number).

// Основна система от типове на TypeScript
// Примитивни типове
const name: string = 'React Native';
const version: number = 0.73;
const isReady: boolean = true;

// Union и Literal типове
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 — кортеж с фиксирана дължина
type Coordinate = [number, number];
const position: Coordinate = [55.75, 37.61];

// Enum — изброяване с автоинкремент
enum AppState {
  Background,
  Foreground,
  Inactive
}

// Unknown — безопасна алтернатива на any
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 — union от низови литерали, ограничаващ стойностите до три варианта. Ако се подаде 'windows', TypeScript ще даде грешка. Кортежът Coordinate гарантира точно две числа — удобно за координати или RGB цветове. Enum AppState се компилира в обект с обратно картографиране. Unknown принуждава проверка на типа преди употреба — за разлика от any, unknown е безопасен по подразбиране.

Интерфейси и type-алиаси

Интерфейси (interface) и type-алиаси (type) в TypeScript описват формата на обекти. Интерфейсите могат да бъдат обединени (declaration merging — повторно деклариране добавя полета) и разширени (extends). Type-алиасите могат да описват union, intersection, tuple и условни типове, но не поддържат declaration merging. Правило: използвайте interface за API обекти, type — за всичко останало.

// Интерфейси и типове за React Native
// Interface с опционални полета
interface User {
  id: string;
  name: string;
  email: string;
  avatar?: string; // опционално поле
  readonly createdAt: Date; // само за четене
}

// Разширяване на интерфейс (extends)
interface AdminUser extends User {
  role: 'admin';
  permissions: string[];
}

// Тип за API данни
type ApiResponse<T> = {
  data: T;
  status: Status;
  error?: string;
};

// Utility types — Partial прави всички полета опционални
type PartialUser = Partial<User>;

// Pick — избира посочените полета
type UserPreview = Pick<User, 'id' | 'name' | 'avatar'>;

// Record — речник с типизирани ключове
type UserMap = Record<string, User>;

Интерфейс User с ? (опционално поле) и readonly (само за четене). ApiResponse<T> — генеричен интерфейс за API отговори. Partial<User> — помощен тип, който прави всички полета опционални (полезно за формуляри за редактиране). Pick<User, 'id' | 'name'> избира само посочените полета — удобно за компоненти за преглед. Record<string, User> — речник на потребителите по ID.

Генерици и помощни типове

Генерици (Generics) — една от ключовите функции на TypeScript, позволяваща създаването на компоненти, работещи с всякакви типове без загуба на типова безопасност. Генерична функция се дефинира с параметър на типа в ъглови скоби: function identity<T>(arg: T): T. Типът T се извежда автоматично от аргумента или се посочва изрично: identity<string>('hello').

Помощни типове — вградени генерици за трансформация на типове: Partial<T> (всички полета опционални), Required<T> (всички полета задължителни), Readonly<T> (всички полета само за четене), Pick<T, K> (избор на полета), Omit<T, K> (изключване на полета), Record<K, T> (речник), Exclude<T, U> (изключване на union), Extract<T, U> (извличане на union), NonNullable<T> (изключване на null/undefined).

// Генерици в TypeScript
// Генерична функция за работа с API
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>;
}

// Използване с конкретен тип
interface Product {
  id: number;
  title: string;
  price: number;
}

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

// Генеричен клас за управление на състояние
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
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> — типизирана обвивка около fetch. Параметърът T определя формата на отговора: при извикване на fetchData<Product[]> TypeScript знае, че върнатият масив съдържа Product обекти. Класът StateManager<S> управлява състоянието на всякакъв тип — Partial<S> за частично обновяване. Action<T, P> — discriminated union за Redux действия с автоматично стесняване на типа в switch.

TypeScript в React Native

TypeScript в React Native осигурява строга типизация на props и състояние на компонентите. React Native CLI създава шаблон с разширение .tsx и tsconfig.json. PropTypes (JS) се заменят с TypeScript интерфейси — проверката се извършва на етапа на компилация, а не в runtime. styled-components и React Navigation имат пълни типове.

Типизация на компонент

React.FC<Props> — тип на функционален компонент с props. Децата (children) се типизират автоматично. useRef<T> — референция към нативен компонент. useState<S> — състояние с извеждане на тип. useNavigation<T> — типизирана навигация. useCallback, useMemo — с автоматично извеждане на типове. Всички React hooks са напълно типизирани.

// Типизиран React Native компонент
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';

// Типове за навигация и данни
type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string };
  Settings: undefined;
};

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

// Интерфейс за props
interface ProductListProps {
  products: Product[];
  onSelect: (id: number) => void;
}

// Типизиран функционален компонент
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 — речник на маршрути с техните параметри. NavigationProp — типизирана навигация: navigation.navigate('Profile', { userId }) проверява, че Profile приема userId. useCallback с типизирани параметри предотвратява ненужни повторни рендерирания. FlatList се типизира чрез генерик: — data и renderItem получават типове автоматично.

Инструменти за TypeScript разработчик

Инструментите за TypeScript включват компилатор tsc, tsconfig.json, IDE поддръжка в VS Code, ESLint с @typescript-eslint, Prettier и DefinitelyTyped (@types/*). tsc — компилатор, преобразуващ .ts в .js. tsconfig.json — конфигурация: target (ES2020), module (ESNext), strict: true, outDir (изходна папка). sourceMap — дебъгване на TS в браузъра чрез кодови карти.

DefinitelyTyped — хранилище с типизации за библиотеки без вградени типове. Инсталиране: npm install @types/react @types/react-native --save-dev. .d.ts файлове — декларации на типове. Съвременните библиотеки (React, React Native, Angular) включват вградени типове и не изискват @types/. За стари JS библиотеки DefinitelyTyped е единственият източник на типове.

// tsconfig.json — минимална конфигурация
{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "strict": true,
    "jsx": "react-native",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "noEmit": true // само проверка, без генериране на JS
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "exclude": ["node_modules", "babel.config.js"]
}

Опцията strict: true включва всички проверки на типове — препоръчва се за всички проекти. jsx: 'react-native' запазва JSX без трансформация (React Native обработва JSX чрез Babel). moduleResolution: 'node' — търсене на модули като в Node.js. esModuleInterop — съвместимост с CommonJS модули. noEmit: true — само проверка без генериране на JS файлове (Babel или Metro генерират JS).