Modules & Configuration

// 📁 models/utilisateur.ts
export interface Utilisateur {
  id: number
  nom: string
  email: string
}

export type Role = "admin" | "editeur" | "lecteur"

// Export par défaut (un seul par fichier)
export default class UserService {
  creer(data: Omit<Utilisateur, "id">): Utilisateur {
    return { id: Date.now(), ...data }
  }
}

// 📁 app.ts
// Import nommé
import { Utilisateur, Role } from "./models/utilisateur"

// Import par défaut
import UserService from "./models/utilisateur"

// Import avec alias
import { Utilisateur as User } from "./models/utilisateur"

// Import de tout
import * as Models from "./models/utilisateur"
const user: Models.Utilisateur = { id: 1, nom: "Alice", email: "a@b.com" }

// Re-export (barrel export)
export { Utilisateur, Role } from "./models/utilisateur"
export { default as UserService } from "./models/utilisateur"

// 📁 models/index.ts (barrel)
export * from "./utilisateur"
export * from "./produit"
export * from "./commande"

// Maintenant, au lieu de :
import { Utilisateur } from "./models/utilisateur"
import { Produit } from "./models/produit"
import { Commande } from "./models/commande"

// Tu peux écrire :
import { Utilisateur, Produit, Commande } from "./models"

// Import de type uniquement - ne génère aucun JavaScript
import type { Utilisateur } from "./models/utilisateur"
import type { FC, ReactNode } from "react"

// Inline type import
import { type Utilisateur, UserService } from "./models/utilisateur"
// Seul UserService sera dans le JS final

// Export de type
export type { Utilisateur }

// Pourquoi c'est utile ?
// → Réduit la taille du bundle
// → Rend les dépendances plus claires
// → Évite les imports circulaires au runtime

{
  "compilerOptions": {
    // Cible de compilation
    "target": "ES2022",         // Version JS de sortie
    "module": "ESNext",         // Système de modules
    "moduleResolution": "bundler", // Résolution (Node, Bundler...)

    // Strictness (ACTIVE-LES TOUTES !)
    "strict": true,             // Active toutes les vérifications strictes
    "noImplicitAny": true,      // Pas de "any" implicite
    "strictNullChecks": true,   // null/undefined gérés strictement
    "noUnusedLocals": true,     // Erreur si variables non utilisées

    // Chemins
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]        // Alias d'import
    },
    "outDir": "./dist",         // Dossier de sortie
    "rootDir": "./src",         // Dossier source

    // Interop
    "esModuleInterop": true,    // Compatibilité import/require
    "allowSyntheticDefaultImports": true,

    // Déclarations
    "declaration": true,        // Génère les .d.ts
    "sourceMap": true,          // Génère les source maps

    // JSX (pour React)
    "jsx": "react-jsx"          // Support JSX moderne
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

// Sans strict: true
let x     // type : any (implicite) - danger !
x = 42
x = "blah"
x.methodeQuiExistePas()  // Pas d'erreur TS... crash au runtime

// Avec strict: true
let y     // ❌ Erreur : Variable 'y' implicitement 'any'
let z: number  // ✅ Tu dois déclarer le type

// strictNullChecks
function longueur(texte: string | null): number {
  // Sans strictNullChecks :
  return texte.length    // Possible crash

  // Avec strictNullChecks :
  // return texte.length  // ❌ Erreur : texte peut être null
  if (texte === null) return 0
  return texte.length    // ✅ Sûr
}

// Les fichiers .d.ts décrivent les types SANS le code
// → Pour les bibliothèques JavaScript sans types natifs

// 📁 types/ma-lib.d.ts
declare module "ma-lib-js" {
  export function calculer(a: number, b: number): number
  export function formater(valeur: number, devise: string): string
}

// Maintenant tu peux l'utiliser avec les types :
import { calculer, formater } from "ma-lib-js"
calculer(10, 5)           // ✅ Typé
formater(42, "EUR")       // ✅ Typé

// Pour les bibliothèques populaires, installe @types/xxx :
// npm install @types/lodash
// npm install @types/express

// Ça ajoute les .d.ts automatiquement

// Sans alias (imports relatifs pénibles)
import { Utilisateur } from "../../../models/utilisateur"
import { api } from "../../../../services/api"

// Avec alias dans tsconfig.json
// "paths": { "@/*": ["./src/*"] }

// Imports propres !
import { Utilisateur } from "@/models/utilisateur"
import { api } from "@/services/api"

// Autres alias utiles
// "paths": {
//   "@components/*": ["./src/components/*"],
//   "@hooks/*": ["./src/hooks/*"],
//   "@utils/*": ["./src/utils/*"]
// }