TypeScript: a nyelv lényege, szigorú típusosság és React Native

Mi az a TypeScript?

TypeScript — egy programozási nyelv a Microsoft-tól (2012), amelyet Anders Hejlsberg (a C# és Turbo Pascal megalkotója) fejlesztett ki. A TypeScript kiterjeszti a JavaScriptet egy statikus típusrendszerrel, interfészekkel, generikusokkal, felsorolásokkal és dekorátorokkal. A TS kód a tsc vagy Babel fordító segítségével tiszta JavaScript-é (transpiláció) fordul — a kimenet standard JS, amely bármilyen környezetben működik.

A TypeScript létrehozásának motivációja — a JavaScript korlátai nagy projektekben. A JS dinamikus típusossága olyan hibákhoz vezet, amelyek csak futásidőben derülnek ki: undefined is not a function, Cannot read property of null. A TypeScript átviszi a típusellenőrzést a fordítási szakaszba, megelőzve ezeket a hibákat a kód végrehajtása előtt. Minél nagyobb a projekt, annál jelentősebbek a TS előnyei: egy 100 000+ soros kódban a TS több száz potenciális hibát előz meg.

A TypeScript kulcsjellemzője — szigorú típusosság az opcionális strict: true jelzővel a tsconfig.json-ban. Szigorú módban minden ellenőrzés bekapcsol: strictNullChecks (a null/undefined nem kompatibilis más típusokkal), noImplicitAny (megtiltja az implicit any-t), strictFunctionTypes (függvényparaméterek kontravarianciája). Alapértelmezetten a strict: true ajánlott minden új projekthez.

TypeScript vs JavaScript

TypeScript csak a fejlesztési szakaszban különbözik a JavaScript-től. A fordítás után a típusok törlődnek — a runtime teljesítményveszteség nélkül hajtja végre a szokásos JS-t. Ez egy kompromisszum: a fejlesztés egy további fordítási lépést igényel, de autocomplete-et biztosít az IDE-ben, refaktorálást szimbólumátnevezéssel és típusdokumentációt közvetlenül a kódban.

A TypeScript típusrendszere

A TypeScript típusrendszere — strukturális (structural typing), nem nominatív: két típus akkor kompatibilis, ha a struktúrájuk megegyezik, a névtől függetlenül. Ez eltér a Java/C#-tól, ahol a kompatibilitást az osztály vagy interfész neve határozza meg. A strukturális típusosság egyszerűsíti a meglévő JS kóddal való integrációt — nem kell implements-t deklarálni minden típushoz.

Alapvető és haladó típusok

TypeScript támogatja a JS primitív típusait plusz: any (ellenőrzés kikapcsolása), unknown (biztonságos any — ellenőrzést igényel használat előtt), never (soha nem tér vissza), void (nincs visszatérés), tuple (rögzített hosszúságú sor), enum (felsorolás), union (string | number), intersection (A & B), literal ('red' | 'blue'), index signature ([key: string]: number).

// TypeScript alap típusrendszer
// Primitív típusok
const name: string = 'React Native';
const version: number = 0.73;
const isReady: boolean = true;

// Union és Literal típusok
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 — rögzített hosszúságú sor
type Coordinate = [number, number];
const position: Coordinate = [55.75, 37.61];

// Enum — felsorolás autoinkrementációval
enum AppState {
  Background,
  Foreground,
  Inactive
}

// Unknown — biztonságos alternatíva az any-hoz
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);
}

A Platform típus — string literálok uniója, amely három változatra korlátozza az értékeket. Ha 'windows' kerül átadásra, a TypeScript hibát ad. A Coordinate sor pontosan két számot garantál — ez kényelmes koordinátákhoz vagy RGB színekhez. Az AppState enum egy objektummá fordul fordított leképezéssel. Az unknown típusellenőrzést kényszerít ki használat előtt — az any-jal ellentétben az unknown alapértelmezetten biztonságos.

Interfészek és típusaliasok

Interfészek (interface) és típusaliasok (type) a TypeScript-ben írják le az objektumok alakját. Az interfészek összevonhatók (declaration merging — az újbóli deklarálás mezőket ad hozzá) és kiterjeszthetők (extends). A típusaliasok leírhatnak union, intersection, tuple és feltételes típusokat, de nem támogatják a declaration merging-et. Szabály: használj interface-t API objektumokhoz, type-ot — minden máshoz.

// Interfészek és típusok React Native-hoz
// Interface opcionális mezőkkel
interface User {
  id: string;
  name: string;
  email: string;
  avatar?: string; // opcionális mező
  readonly createdAt: Date; // csak olvasható
}

// Interfész kiterjesztése (extends)
interface AdminUser extends User {
  role: 'admin';
  permissions: string[];
}

// Típus API adatokhoz
type ApiResponse<T> = {
  data: T;
  status: Status;
  error?: string;
};

// Utility types — Partial opcionálissá teszi az összes mezőt
type PartialUser = Partial<User>;

// Pick — kiválasztja a megadott mezőket
type UserPreview = Pick<User, 'id' | 'name' | 'avatar'>;

// Record — szótár típusosított kulcsokkal
type UserMap = Record<string, User>;

User interfész ? (opcionális mező) és readonly (csak olvasható) jelöléssel. ApiResponse<T> — generikus interfész API válaszokhoz. Partial<User> — segédtípus, amely az összes mezőt opcionálissá teszi (hasznos szerkesztő űrlapokhoz). Pick<User, 'id' | 'name'> csak a megadott mezőket választja ki — kényelmes előnézeti komponensekhez. Record<string, User> — felhasználók szótára ID szerint.

Generikusok és segédtípusok

Generikusok (Generics) — a TypeScript egyik kulcsfontosságú jellemzője, amely lehetővé teszi bármilyen típussal működő komponensek létrehozását a típusbiztonság elvesztése nélkül. A generikus függvény egy típusparaméterrel van meghatározva szögletes zárójelekben: function identity<T>(arg: T): T. A T típus automatikusan következtethető az argumentumból vagy explicit módon megadható: identity<string>('hello').

Segédtípusok — beépített generikusok típusok transzformálásához: Partial<T> (minden mező opcionális), Required<T> (minden mező kötelező), Readonly<T> (minden mező csak olvasható), Pick<T, K> (mezők kiválasztása), Omit<T, K> (mezők kihagyása), Record<K, T> (szótár), Exclude<T, U> (unió kihagyása), Extract<T, U> (unió kivonása), NonNullable<T> (null/undefined kihagyása).

// Generikusok a TypeScript-ben
// Generikus függvény API-val való munkához
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>;
}

// Használat konkrét típussal
interface Product {
  id: number;
  title: string;
  price: number;
}

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

// Generikus osztály állapotkezeléshez
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 };
  }
}

// Típusos munka Redux Reducer-rel
type Action<T, P> = {
  type: T;
  payload: P;
};

type UserAction =
  | Action<'SET_USER', User>
  | Action<'CLEAR_USER', undefined>
  | Action<'UPDATE_USER', Partial<User>>;

A fetchData<T> függvény — egy típusos burkoló a fetch körül. A T paraméter meghatározza a válasz alakját: a fetchData<Product[]> hívásakor a TypeScript tudja, hogy a visszaadott tömb Product objektumokat tartalmaz. A StateManager<S> osztály bármilyen típus állapotát kezeli — Partial<S> a részleges frissítéshez. Action<T, P> — megkülönböztetett unió Redux akciókhoz automatikus típusbeszűkítéssel a switch-ben.

TypeScript a React Native-ban

TypeScript a React Native-ban biztosítja a komponensek props-ainak és állapotának szigorú típusosítását. A React Native CLI egy sablont hoz létre .tsx kiterjesztéssel és tsconfig.json-nal. A PropTypes (JS) helyét TypeScript interfészek veszik át — az ellenőrzés a fordítási szakaszban történik, nem futásidőben. A styled-components és a React Navigation teljes típusokkal rendelkezik.

Komponens típusosítása

React.FC<Props> — egy funkcionális komponens típusa props-okkal. A gyerekek (children) automatikusan típusosítottak. useRef<T> — hivatkozás natív komponensre. useState<S> — állapot típuskövetkeztetéssel. useNavigation<T> — típusos navigáció. useCallback, useMemo — automatikus típuskövetkeztetéssel. Az összes React hook teljesen típusosított.

// Típusosított React Native komponens
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';

// Típusok navigációhoz és adatokhoz
type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string };
  Settings: undefined;
};

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

// Interfész props-okhoz
interface ProductListProps {
  products: Product[];
  onSelect: (id: number) => void;
}

// Típusosított funkcionális komponens
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)}
    />
  );
};

A RootStackParamList típus — útvonalak szótára paramétereikkel. NavigationProp — típusos navigáció: a navigation.navigate('Profile', { userId }) ellenőrzi, hogy a Profile elfogadja a userId-t. A useCallback típusos paraméterekkel megelőzi a szükségtelen újrarendereléseket. A FlatList generikuson keresztül típusosított: — a data és renderItem automatikusan kap típusokat.

TypeScript fejlesztői eszközök

A TypeScript eszközök magukban foglalják a tsc fordítót, tsconfig.json-t, IDE támogatást a VS Code-ban, ESLint-et @typescript-eslint-tel, Prettier-t és DefinitelyTyped-et (@types/*). tsc — fordító, amely .ts-t .js-vé alakítja. tsconfig.json — konfiguráció: target (ES2020), module (ESNext), strict: true, outDir (kimeneti mappa). sourceMap — TS hibakeresés böngészőben kódtérképeken keresztül.

DefinitelyTyped — tárhely típusosításokkal a beépített típusok nélküli könyvtárakhoz. Telepítés: npm install @types/react @types/react-native --save-dev. .d.ts fájlok — típusdeklarációk. A modern könyvtárak (React, React Native, Angular) beépített típusokat tartalmaznak, és nem igényelnek @types/-ot. Régi JS könyvtárakhoz a DefinitelyTyped az egyetlen típusforrás.

// tsconfig.json — minimális konfiguráció
{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "strict": true,
    "jsx": "react-native",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "noEmit": true // csak ellenőrzés, JS generálása nélkül
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "exclude": ["node_modules", "babel.config.js"]
}

A strict: true opció bekapcsol minden típusellenőrzést — minden projekthez ajánlott. jsx: 'react-native' megtartja a JSX-et transzformáció nélkül (a React Native a JSX-et Babel-en keresztül dolgozza fel). moduleResolution: 'node' — modulkeresés mint a Node.js-ben. esModuleInterop — kompatibilitás CommonJS modulokkal. noEmit: true — csak ellenőrzés JS fájlok generálása nélkül (a Babel vagy Metro generál JS-t).