TypeScript : essence du langage, typage strict et React Native

Qu'est-ce que TypeScript ?

TypeScript est un langage de programmation de Microsoft (2012) créé par Anders Hejlsberg (créateur de C# et Turbo Pascal). TypeScript étend JavaScript avec un système de types statique, des interfaces, des génériques, des énumérations et des décorateurs. Le code TS se compile en JavaScript pur (transpilation) via le compilateur tsc ou Babel — le résultat est du JS standard qui fonctionne dans n'importe quel environnement.

La motivation derrière TypeScript réside dans les limites de JavaScript dans les grands projets. Le typage dynamique de JS conduit à des erreurs qui ne sont découvertes qu'à l'exécution : undefined is not a function, Cannot read property of null. TypeScript déplace la vérification des types à la compilation, empêchant ces erreurs avant l'exécution du code. Plus le projet est grand, plus les avantages de TS sont importants : dans une base de code de plus de 100 000 lignes, TS empêche des centaines de bugs potentiels.

Une caractéristique clé de TypeScript est le typage strict avec le drapeau optionnel strict: true dans tsconfig.json. Le mode strict active toutes les vérifications : strictNullChecks (null/undefined sont incompatibles avec les autres types), noImplicitAny (interdit any implicite), strictFunctionTypes (contravariance des paramètres de fonctions). Par défaut, strict: true est recommandé pour tous les nouveaux projets.

TypeScript vs JavaScript

TypeScript ne diffère de JavaScript qu'au moment du développement. Après compilation, les types sont effacés — le runtime exécute du JS normal sans perte de performances. C'est un compromis : le développement nécessite une étape de compilation supplémentaire, mais offre l'autocomplétion dans l'IDE, le refactoring avec renommage des symboles et la documentation des types directement dans le code.

Système de types de TypeScript

Le système de types de TypeScript est structurel, pas nominal : deux types sont compatibles si leur structure correspond, indépendamment du nom. Cela diffère de Java/C# où la compatibilité est déterminée par le nom de la classe ou de l'interface. Le typage structurel simplifie l'intégration avec le code JS existant — il n'est pas nécessaire de déclarer implements pour chaque type.

Types de base et avancés

TypeScript prend en charge les types primitifs JS plus : any (désactive la vérification), unknown (any sûr — nécessite une vérification avant utilisation), never (ne retourne jamais), void (pas de retour), tuple (tuple de longueur fixe), enum (énumération), union (string | number), intersection (A & B), literal ('red' | 'blue'), index signature ([key: string]: number).

// Système de types de base de TypeScript
// Types primitifs
const name: string = 'React Native';
const version: number = 0.73;
const isReady: boolean = true;

// Types Union et 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 — tuple de longueur fixe
type Coordinate = [number, number];
const position: Coordinate = [55.75, 37.61];

// Enum — énumération avec auto-incrémentation
enum AppState {
  Background,
  Foreground,
  Inactive
}

// Unknown — alternative sûre à 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);
}

Le type Platform est une union de littéraux de chaîne, limitant les valeurs à trois options. Si vous passez 'windows', TypeScript lèvera une erreur. Le tuple Coordinate garantit exactement deux nombres — utile pour les coordonnées ou les couleurs RVB. L'enum AppState se compile en un objet avec mappage inverse. Unknown force la vérification de type avant utilisation — contrairement à any, unknown est sûr par défaut.

Interfaces et type-aliases

Les interfaces et les type-aliases dans TypeScript décrivent les formes des objets. Les interfaces supportent la fusion de déclarations (re-déclarer ajoute des champs) et l'extension (extends). Les type-aliases peuvent décrire des unions, intersections, tuples et types conditionnels, mais ne supportent pas la fusion de déclarations. Règle : utilisez les interfaces pour les objets d'API, type pour tout le reste.

// Interfaces et types pour React Native
// Interface avec champs optionnels
interface User {
  id: string;
  name: string;
  email: string;
  avatar?: string; // champ optionnel
  readonly createdAt: Date; // lecture seule
}

// Extension d'interface (extends)
interface AdminUser extends User {
  role: 'admin';
  permissions: string[];
}

// Type pour données API
type ApiResponse<T> = {
  data: T;
  status: Status;
  error?: string;
};

// Utility types — Partial rend tous les champs optionnels
type PartialUser = Partial<User>;

// Pick — sélectionne les champs spécifiés
type UserPreview = Pick<User, 'id' | 'name' | 'avatar'>;

// Record — dictionnaire avec clés typées
type UserMap = Record<string, User>;

L'interface User avec ? (champ optionnel) et readonly (lecture seule). ApiResponse<T> est une interface générique pour les réponses API. Partial<User> est un type utilitaire qui rend tous les champs optionnels (utile pour les formulaires d'édition). Pick<User, 'id' | 'name'> sélectionne uniquement les champs spécifiés — pratique pour les composants d'aperçu. Record<string, User> est un dictionnaire d'utilisateurs par ID.

Génériques et types utilitaires

Les génériques sont une fonctionnalité clé de TypeScript, permettant de créer des composants qui fonctionnent avec n'importe quel type sans perdre la sécurité des types. Une fonction générique est définie avec un paramètre de type entre chevrons : function identity<T>(arg: T): T. Le type T est inféré automatiquement de l'argument ou spécifié explicitement : identity<string>('hello').

Les types utilitaires sont des génériques intégrés pour les transformations de types : Partial<T> (tous les champs optionnels), Required<T> (tous les champs obligatoires), Readonly<T> (tous les champs en lecture seule), Pick<T, K> (sélectionner des champs), Omit<T, K> (exclure des champs), Record<K, T> (dictionnaire), Exclude<T, U> (exclure d'une union), Extract<T, U> (extraire d'une union), NonNullable<T> (exclure null/undefined).

// Génériques dans TypeScript
// Fonction générique pour travailler avec l'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>;
}

// Utilisation avec un type spécifique
interface Product {
  id: number;
  title: string;
  price: number;
}

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

// Classe générique pour la gestion d'état
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 };
  }
}

// Travail typé avec 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>>;

La fonction fetchData<T> est un wrapper typé autour de fetch. Le paramètre T détermine la forme de la réponse : en appelant fetchData<Product[]>, TypeScript sait que le tableau retourné contient des objets Product. La classe StateManager<S> gère l'état de n'importe quel type — Partial<S> pour les mises à jour partielles. Action<T, P> est une union discriminée pour les actions Redux avec rétrécissement automatique de type dans switch.

TypeScript dans React Native

TypeScript dans React Native fournit un typage strict pour les props et l'état des composants. Le CLI React Native crée un modèle avec l'extension .tsx et tsconfig.json. PropTypes (JS) sont remplacés par des interfaces TypeScript — la vérification se fait à la compilation, pas au runtime. styled-components et React Navigation ont un support complet des types.

Typage des composants

React.FC<Props> est le type d'un composant fonctionnel avec des props. Les enfants sont typés automatiquement. useRef<T> — référence à un composant natif. useState<S> — état avec inférence de type. useNavigation<T> — navigation typée. useCallback, useMemo — avec inférence automatique de types. Tous les hooks React sont entièrement typés.

// Composant React Native typé
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';

// Types pour la navigation et les données
type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string };
  Settings: undefined;
};

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

// Interface pour les props
interface ProductListProps {
  products: Product[];
  onSelect: (id: number) => void;
}

// Composant fonctionnel typé
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)}
    />
  );
};

Le type RootStackParamList est un dictionnaire de routes avec leurs paramètres. NavigationProp fournit une navigation typée : navigation.navigate('Profile', { userId }) vérifie que Profile accepte userId. useCallback avec des paramètres typés empêche les re-rendus inutiles. FlatList est typé via des génériques : — data et renderItem reçoivent les types automatiquement.

Outils du développeur TypeScript

Les outils TypeScript incluent le compilateur tsc, tsconfig.json, le support IDE dans VS Code, ESLint avec @typescript-eslint, Prettier et DefinitelyTyped (@types/*). tsc est le compilateur qui convertit .ts en .js. tsconfig.json configure : target (ES2020), module (ESNext), strict: true, outDir (dossier de sortie). sourceMap — débogage TS dans le navigateur via des cartes de code.

DefinitelyTyped est un référentiel de définitions de types pour les bibliothèques sans types intégrés. Installation : npm install @types/react @types/react-native --save-dev. Les fichiers .d.ts sont des déclarations de types. Les bibliothèques modernes (React, React Native, Angular) incluent des types intégrés et ne nécessitent pas @types/. Pour les anciennes bibliothèques JS, DefinitelyTyped est la seule source de types.

// tsconfig.json — configuration minimale
{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "strict": true,
    "jsx": "react-native",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "noEmit": true // vérification seulement, sans génération JS
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "exclude": ["node_modules", "babel.config.js"]
}

L'option strict: true active toutes les vérifications de types — recommandée pour tous les projets. jsx: 'react-native' préserve JSX sans transformation (React Native traite JSX via Babel). moduleResolution: 'node' — résolution des modules comme dans Node.js. esModuleInterop — compatibilité avec les modules CommonJS. noEmit: true — seulement vérifier sans générer de fichiers JS (Babel ou Metro génère le JS).