TypeScript: суть мови, строга типізація та React Native

Що таке TypeScript?

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

Мотивація створення TypeScript — обмеження JavaScript у великих проєктах. Динамічна типізація JS призводить до помилок, які виявляються лише в рантаймі: 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 vs JavaScript

TypeScript відрізняється від JavaScript лише на етапі розробки. Після компіляції типи стираються — рантайм виконує звичайний JS без втрати продуктивності. Це компроміс: розробка вимагає додаткового кроку компіляції, але дає автодоповнення в IDE, рефакторинг з перейменуванням символів та документацію типів прямо в коді.

Система типів TypeScript

Система типів TypeScript — структурна, а не номінативна: два типи сумісні, якщо їхня структура збігається, незалежно від імені. Це відрізняється від 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 видасть помилку. Tuple 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> (всі поля readonly), 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 забезпечує строгу типізацію пропсів та стану компонентів. React Native CLI створює шаблон з .tsx розширенням та tsconfig.json. PropTypes (JS) замінюються на TypeScript-інтерфейси — перевірка виконується на етапі компіляції, а не в рантаймі. styled-components та React Navigation мають повні типи.

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

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

// Типізований 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'>;

// Інтерфейс для пропсів
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).