⚙️ tsconfig.json essentiel
{
"compilerOptions": {
// Cible de compilation
"target": "ES2022", // version JS générée
"module": "ESNext", // système de modules
"moduleResolution": "bundler", // résolution modules
"lib": ["ES2022", "DOM"], // bibliothèques disponibles
// Strictness (TOUJOURS activer en production)
"strict": true, // active tout le strict mode
"noUncheckedIndexedAccess": true, // arr[i] peut être undefined
"exactOptionalPropertyTypes": true,
// Output
"outDir": "./dist",
"rootDir": "./src",
"declaration": true, // génère les .d.ts
"sourceMap": true,
// Paths alias
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"],
"@types/*": ["./src/types/*"]
}
},
"include": ["src"],
"exclude": ["node_modules", "dist"]
}
🔒 Strict mode — ce qu'il active
| Option | Effet |
|---|
strictNullChecks | null/undefined ne sont plus assignables à d'autres types |
strictFunctionTypes | Vérification contravariante des paramètres de fonctions |
strictPropertyInitialization | Chaque propriété de classe doit être initialisée |
noImplicitAny | Interdit les any implicites — doit être annoté |
noImplicitThis | Interdit this implicitement typé any |
alwaysStrict | Ajoute "use strict" dans les fichiers générés |
Règle d'or : activez "strict": true dès le début du projet. Activer strict sur un projet existant = douloureux. Partir strict = propre.
📦 Modules ES6 avec TypeScript
// types.ts — fichier de types
export interface User {
id: number;
name: string;
}
export type UserId = User["id"];
// utils.ts
import type { User } from "./types"; // import de type (effacé à la compile)
export function formatUser(u: User): string {
return `[${u.id}] ${u.name}`;
}
// index.ts
import { formatUser } from "./utils";
import type { User } from "./types";
📄 Fichiers de déclaration .d.ts
// Typer une librairie JS sans types
// src/types/legacy-lib.d.ts
declare module "legacy-lib" {
export function doSomething(val: string): number;
export const VERSION: string;
}
// Augmenter un module existant
declare module "express" {
interface Request {
user?: { id: number; role: string };
}
}
// Déclarer des variables globales
declare const __APP_VERSION__: string;
declare function fetch(url: string): Promise<Response>;
Les types officiels sont dans @types/nom-du-paquet sur npm. Ex : npm install -D @types/node @types/express
🔍 ESLint + TypeScript
# Installation
npm install -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
// .eslintrc.json
{
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint"],
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:@typescript-eslint/recommended-type-checked"
],
"parserOptions": { "project": "./tsconfig.json" },
"rules": {
"@typescript-eslint/no-explicit-any": "error",
"@typescript-eslint/explicit-function-return-type": "warn"
}
}
📁 Structure de projet recommandée
mon-projet/
├── src/
│ ├── types/ # interfaces et types partagés
│ │ ├── index.ts
│ │ └── api.ts
│ ├── utils/ # fonctions utilitaires
│ ├── services/ # logique métier
│ └── index.ts # point d'entrée
├── dist/ # fichiers compilés (gitignored)
├── tsconfig.json
├── .eslintrc.json
└── package.json