TypeScript: esența limbajului, tipizarea strictă și React Native

Ce este TypeScript?

TypeScript — un limbaj de programare de la Microsoft (2012), dezvoltat de Anders Hejlsberg (creatorul C# și Turbo Pascal). TypeScript extinde JavaScript cu un sistem static de tipuri, interfețe, generice, enumerări și decoratori. Codul TS este compilat în JavaScript pur (transpilare) cu ajutorul compilatorului tsc sau Babel — la ieșire se obține JS standard care funcționează în orice mediu.

Motivația creării TypeScript — limitările JavaScript în proiecte mari. Tipizarea dinamică a JS duce la erori care sunt detectate doar în runtime: undefined is not a function, Cannot read property of null. TypeScript mută verificarea tipurilor la etapa de compilare, prevenind aceste erori înainte de executarea codului. Cu cât proiectul este mai mare, cu atât avantajele TS sunt mai semnificative: într-o bază de cod de 100.000+ linii, TS previne sute de bug-uri potențiale.

Caracteristica cheie a TypeScript — tipizarea strictă cu flag-ul opțional strict: true în tsconfig.json. În modul strict, toate verificările sunt activate: strictNullChecks (null/undefined sunt incompatibile cu alte tipuri), noImplicitAny (interzice any implicit), strictFunctionTypes (contravarianța parametrilor funcțiilor). Implicit, strict: true este recomandat pentru toate proiectele noi.

TypeScript vs JavaScript

TypeScript se deosebește de JavaScript doar în faza de dezvoltare. După compilare, tipurile sunt șterse — runtime-ul execută JS obișnuit fără pierdere de performanță. Este un compromis: dezvoltarea necesită un pas suplimentar de compilare, dar oferă autocompletare în IDE, refactorizare cu redenumirea simbolurilor și documentare a tipurilor direct în cod.

Sistemul de tipuri TypeScript

Sistemul de tipuri TypeScript — structural (structural typing), nu nominal: două tipuri sunt compatibile dacă structura lor se potrivește, indiferent de nume. Acest lucru diferă de Java/C#, unde compatibilitatea este determinată de numele clasei sau interfeței. Tipizarea structurală simplifică integrarea cu codul JS existent — nu trebuie să declarați implements pentru fiecare tip.

Tipuri de bază și avansate

TypeScript suportă tipurile primitive JS plus: any (dezactivarea verificării), unknown (any sigur — necesită verificare înainte de utilizare), never (nu returnează niciodată), void (fără returnare), tuple (tuplu de lungime fixă), enum (enumerare), union (string | number), intersection (A & B), literal ('red' | 'blue'), index signature ([key: string]: number).

// Sistemul de bază de tipuri TypeScript
// Tipuri primitive
const name: string = 'React Native';
const version: number = 0.73;
const isReady: boolean = true;

// Tipuri Union și 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 — tuplu de lungime fixă
type Coordinate = [number, number];
const position: Coordinate = [55.75, 37.61];

// Enum — enumerare cu auto-incrementare
enum AppState {
  Background,
  Foreground,
  Inactive
}

// Unknown — alternativă sigură la 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);
}

Tipul Platform — un union de literal-uri șir, care limitează valorile la trei variante. Dacă se transmite 'windows', TypeScript va da o eroare. Tuplul Coordinate garantează exact două numere — este convenabil pentru coordonate sau culori RGB. Enum AppState se compilează într-un obiect cu mapare inversă. Unknown forțează verificarea tipului înainte de utilizare — spre deosebire de any, unknown este sigur implicit.

Interfețe și aliasuri de tip

Interfețele (interface) și aliasurile de tip (type) în TypeScript descriu forma obiectelor. Interfețele pot fi îmbinate (declaration merging — redeclararea adaugă câmpuri) și extinse (extends). Aliasurile de tip pot descrie union, intersection, tuple și tipuri condiționale, dar nu suportă declaration merging. Regulă: folosiți interface pentru obiecte API, type — pentru orice altceva.

// Interfețe și tipuri pentru React Native
// Interfață cu câmpuri opționale
interface User {
  id: string;
  name: string;
  email: string;
  avatar?: string; // câmp opțional
  readonly createdAt: Date; // doar citire
}

// Extinderea interfeței (extends)
interface AdminUser extends User {
  role: 'admin';
  permissions: string[];
}

// Tip pentru date API
type ApiResponse<T> = {
  data: T;
  status: Status;
  error?: string;
};

// Utility types — Partial face toate câmpurile opționale
type PartialUser = Partial<User>;

// Pick — selectează câmpurile specificate
type UserPreview = Pick<User, 'id' | 'name' | 'avatar'>;

// Record — dicționar cu chei tipizate
type UserMap = Record<string, User>;

Interfața User cu ? (câmp opțional) și readonly (doar citire). ApiResponse<T> — interfață generică pentru răspunsuri API. Partial<User> — tip utilitar care face toate câmpurile opționale (util pentru formulare de editare). Pick<User, 'id' | 'name'> selectează doar câmpurile specificate — convenabil pentru componente de previzualizare. Record<string, User> — dicționar de utilizatori după ID.

Generice și tipuri utilitare

Genericele (Generics) — una dintre caracteristicile cheie ale TypeScript, permițând crearea de componente care lucrează cu orice tipuri fără a pierde siguranța tipurilor. O funcție generică este definită cu un parametru de tip în paranteze unghiulare: function identity<T>(arg: T): T. Tipul T este inferat automat din argument sau specificat explicit: identity<string>('hello').

Tipuri utilitare — generice încorporate pentru transformarea tipurilor: Partial<T> (toate câmpurile opționale), Required<T> (toate câmpurile obligatorii), Readonly<T> (toate câmpurile doar citire), Pick<T, K> (selectare câmpuri), Omit<T, K> (excludere câmpuri), Record<K, T> (dicționar), Exclude<T, U> (excludere union), Extract<T, U> (extragere union), NonNullable<T> (excludere null/undefined).

// Generice în TypeScript
// Funcție generică pentru lucrul cu 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>;
}

// Utilizare cu un tip concret
interface Product {
  id: number;
  title: string;
  price: number;
}

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

// Clasă generică pentru gestionarea stării
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 };
  }
}

// Lucru tipizat cu 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>>;

Funcția fetchData<T> — un wrapper tipizat peste fetch. Parametrul T determină forma răspunsului: la apelul fetchData<Product[]> TypeScript știe că array-ul returnat conține obiecte Product. Clasa StateManager<S> gestionează starea oricărui tip — Partial<S> pentru actualizare parțială. Action<T, P> — union discriminat pentru acțiuni Redux cu îngustare automată a tipului în switch.

TypeScript în React Native

TypeScript în React Native asigură tipizarea strictă a props și stării componentelor. React Native CLI creează un șablon cu extensia .tsx și tsconfig.json. PropTypes (JS) sunt înlocuite cu interfețe TypeScript — verificarea se face la compilare, nu în runtime. styled-components și React Navigation au tipuri complete.

Tipizarea componentelor

React.FC<Props> — tipul unei componente funcționale cu props. Copiii (children) sunt tipizați automat. useRef<T> — referință la o componentă nativă. useState<S> — stare cu inferare de tip. useNavigation<T> — navigare tipizată. useCallback, useMemo — cu inferare automată a tipurilor. Toate hook-urile React sunt complet tipizate.

// Componentă React Native tipizată
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';

// Tipuri pentru navigare și date
type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string };
  Settings: undefined;
};

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

// Interfață pentru props
interface ProductListProps {
  products: Product[];
  onSelect: (id: number) => void;
}

// Componentă funcțională tipizată
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)}
    />
  );
};

Tipul RootStackParamList — dicționar de rute cu parametrii lor. NavigationProp — navigare tipizată: navigation.navigate('Profile', { userId }) verifică că Profile acceptă userId. useCallback cu parametri tipizați previne re-render-urile inutile. FlatList este tipizat printr-un generic: — data și renderItem primesc tipuri automat.

Instrumente pentru dezvoltatorul TypeScript

Instrumentele TypeScript includ compilatorul tsc, tsconfig.json, suport IDE în VS Code, ESLint cu @typescript-eslint, Prettier și DefinitelyTyped (@types/*). tsc — compilatorul care transformă .ts în .js. tsconfig.json — configurație: target (ES2020), module (ESNext), strict: true, outDir (folder de ieșire). sourceMap — depanare TS în browser prin hărți de cod.

DefinitelyTyped — un depozit cu tipizări pentru biblioteci fără tipuri încorporate. Instalare: npm install @types/react @types/react-native --save-dev. Fișierele .d.ts — declarații de tipuri. Bibliotecile moderne (React, React Native, Angular) includ tipuri încorporate și nu necesită @types/. Pentru biblioteci JS vechi, DefinitelyTyped este singura sursă de tipuri.

// tsconfig.json — configurație minimă
{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "strict": true,
    "jsx": "react-native",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "noEmit": true // doar verificare, fără generare JS
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "exclude": ["node_modules", "babel.config.js"]
}

Opțiunea strict: true activează toate verificările de tip — recomandată pentru toate proiectele. jsx: 'react-native' păstrează JSX fără transformare (React Native procesează JSX prin Babel). moduleResolution: 'node' — căutarea modulelor ca în Node.js. esModuleInterop — compatibilitate cu module CommonJS. noEmit: true — doar verificare fără generare de fișiere JS (Babel sau Metro generează JS).