TypeScript: ουσία της γλώσσας, αυστηρή τυποποίηση και React Native

Τι είναι το TypeScript;

TypeScript — μια γλώσσα προγραμματισμού από τη Microsoft (2012), που αναπτύχθηκε από τον Anders Hejlsberg (δημιουργό της C# και της Turbo Pascal). Το TypeScript επεκτείνει τη JavaScript με ένα στατικό σύστημα τύπων, διεπαφές, generics, απαριθμήσεις και διακοσμητές. Ο κώδικας TS μεταγλωττίζεται σε καθαρή JavaScript (transpilation) με τον μεταγλωττιστή tsc ή Babel — στην έξοδο λαμβάνεται τυπική JS που λειτουργεί σε οποιοδήποτε περιβάλλον.

Το κίνητρο για τη δημιουργία του TypeScript — οι περιορισμοί της JavaScript σε μεγάλα έργα. Η δυναμική τυποποίηση της JS οδηγεί σε σφάλματα που ανακαλύπτονται μόνο κατά το runtime: 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 μόνο στο στάδιο ανάπτυξης. Μετά τη μεταγλώττιση, οι τύποι διαγράφονται — το runtime εκτελεί κανονική JS χωρίς απώλεια απόδοσης. Αυτός είναι ένας συμβιβασμός: η ανάπτυξη απαιτεί ένα επιπλέον βήμα μεταγλώττισης, αλλά παρέχει autocomplete στο 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 από string literals που περιορίζει τις τιμές σε τρεις παραλλαγές. Αν μεταβιβαστεί 'windows', το TypeScript θα δώσει σφάλμα. Η πλειάδα Coordinate εγγυάται ακριβώς δύο αριθμούς — είναι βολικό για συντεταγμένες ή χρώματα RGB. Το Enum AppState μεταγλωττίζεται σε αντικείμενο με αντίστροφη αντιστοίχηση. Το Unknown επιβάλλει έλεγχο τύπου πριν από τη χρήση — σε αντίθεση με το any, το unknown είναι ασφαλές από προεπιλογή.

Διεπαφές και type-aliases

Διεπαφές (interface) και type-aliases (type) στο TypeScript περιγράφουν το σχήμα των αντικειμένων. Οι διεπαφές μπορούν να συνδυαστούν (declaration merging — η εκ νέου δήλωση προσθέτει πεδία) και να επεκταθούν (extends). Τα type-aliases μπορούν να περιγράψουν union, intersection, tuple και υπό συνθήκη τύπους, αλλά δεν υποστηρίζουν declaration merging. Κανόνας: χρησιμοποιήστε interface για αντικείμενα API, type — για οτιδήποτε άλλο.

// Διεπαφές και τύποι για React Native
// Διεπαφή με προαιρετικά πεδία
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 και βοηθητικοί τύποι

Generics — ένα από τα βασικά χαρακτηριστικά του TypeScript, που επιτρέπει τη δημιουργία στοιχείων που λειτουργούν με οποιουσδήποτε τύπους χωρίς απώλεια ασφάλειας τύπων. Μια γενική συνάρτηση ορίζεται με μια παράμετρο τύπου σε γωνιακές αγκύλες: function identity<T>(arg: T): T. Ο τύπος T συνάγεται αυτόματα από το όρισμα ή καθορίζεται ρητά: identity<string>('hello').

Βοηθητικοί τύποι — ενσωματωμένα generics για μετασχηματισμό τύπων: 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).

// Generics στο 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> — διακριτή ένωση για ενέργειες Redux με αυτόματη στένωση τύπου στο switch.

TypeScript στο React Native

TypeScript στο React Native παρέχει αυστηρή τυποποίηση των props και της κατάστασης των στοιχείων. Το React Native CLI δημιουργεί ένα πρότυπο με επέκταση .tsx και tsconfig.json. Τα PropTypes (JS) αντικαθίστανται από διεπαφές TypeScript — ο έλεγχος γίνεται στο στάδιο μεταγλώττισης, όχι στο runtime. Τα styled-components και το React Navigation έχουν πλήρεις τύπους.

Τυποποίηση στοιχείου

React.FC<Props> — τύπος λειτουργικού στοιχείου με props. Τα παιδιά (children) τυποποιούνται αυτόματα. useRef<T> — αναφορά σε εγγενές στοιχείο. useState<S> — κατάσταση με εξαγωγή τύπου. useNavigation<T> — τυποποιημένη πλοήγηση. useCallback, useMemo — με αυτόματη εξαγωγή τύπων. Όλα τα hooks του 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'>;

// Διεπαφή για props
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 τυποποιείται μέσω generics: — τα 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).