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 — структурная (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 выдаст ошибку. 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).