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 наспрам 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 ће дати грешку. Торка 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-у обезбеђује строгу типизацију пропса и стања компоненти. 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 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'>;

// Интерфејс за пропсе
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).