TypeScript en 2026 : le guide définitif pour les développeurs web

JavaScript vs TypeScript : détection d'erreurs

// JavaScript - L'erreur n'apparaît qu'à l'exécution
function calculateTotal(items) {
  return items.reduce((sum, item) => sum + item.price, 0);
}

// Appel avec un mauvais type - pas d'erreur avant l'exécution
calculateTotal("not an array"); // Runtime Error: items.reduce is not a function

// TypeScript - L'erreur est détectée immédiatement
interface CartItem {
  name: string;
  price: number;
  quantity: number;
}

function calculateTotal(items: CartItem[]): number {
  return items.reduce((sum, item) => sum + item.price * item.quantity, 0);
}

// Erreur de compilation - jamais en production
calculateTotal("not an array");
// Error: Argument of type 'string' is not assignable to parameter of type 'CartItem[]'

Configuration recommandée 2026

{
  "compilerOptions": {
    // Cible et module
    "target": "ES2024",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "lib": ["ES2024", "DOM", "DOM.Iterable"],

    // Mode strict (toujours activer)
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictBindCallApply": true,
    "strictPropertyInitialization": true,
    "noImplicitThis": true,
    "useUnknownInCatchVariables": true,
    "alwaysStrict": true,

    // Vérifications additionnelles
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedIndexedAccess": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,

    // Interopérabilité
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "verbatimModuleSyntax": true,

    // Émission
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true,
    "outDir": "./dist",
    "rootDir": "./src",

    // Résolution de chemins
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@components/*": ["./src/components/*"],
      "@utils/*": ["./src/utils/*"]
    },

    // Performance
    "skipLibCheck": true,
    "incremental": true,
    "tsBuildInfoFile": "./.tsbuildinfo"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist", "**/*.test.ts"]
}

// Types primitifs
let name: string = "Alice";
let age: number = 30;
let isActive: boolean = true;
let id: bigint = 9007199254740991n;
let uniqueId: symbol = Symbol("id");

// Types littéraux - valeurs exactes
type Status = "pending" | "approved" | "rejected";
type HttpCode = 200 | 201 | 400 | 404 | 500;
type Toggle = true | false;

// Template literal types
type EventName = `on${Capitalize<"click" | "focus" | "blur">}`;
// = "onClick" | "onFocus" | "onBlur"

// Arrays et tuples
let numbers: number[] = [1, 2, 3];
let mixed: [string, number, boolean] = ["hello", 42, true];
let readonly_: readonly string[] = ["a", "b", "c"];

// Objects
interface User {
  id: number;
  name: string;
  email: string;
  role: "admin" | "user" | "guest";
  createdAt: Date;
  metadata?: Record; // Propriété optionnelle
}

// Type vs Interface
type Point = { x: number; y: number };
interface Rectangle {
  width: number;
  height: number;
}

// Union types - "ou"
type Result = T | Error;
type ID = string | number;

function processId(id: ID) {
  if (typeof id === "string") {
    return id.toUpperCase(); // TypeScript sait que c'est une string ici
  }
  return id.toFixed(2); // Et ici un number
}

// Discriminated unions - pattern puissant
type ApiResponse =
  | { status: "success"; data: T }
  | { status: "error"; error: string }
  | { status: "loading" };

function handleResponse(response: ApiResponse) {
  switch (response.status) {
    case "success":
      return response.data; // TypeScript sait que data existe
    case "error":
      throw new Error(response.error); // Et que error existe ici
    case "loading":
      return null;
  }
}

// Intersection types - "et"
type Timestamped = { createdAt: Date; updatedAt: Date };
type Identifiable = { id: string };

type Entity = Timestamped & Identifiable;
// = { createdAt: Date; updatedAt: Date; id: string }

// Combinaison avec interfaces
interface BaseUser {
  name: string;
  email: string;
}

type AdminUser = BaseUser & { role: "admin"; permissions: string[] };
type GuestUser = BaseUser & { role: "guest"; expiresAt: Date };

// Generic avec contraintes
function getProperty(obj: T, key: K): T[K] {
  return obj[key];
}

const user = { name: "Alice", age: 30 };
const name = getProperty(user, "name"); // type: string
const age = getProperty(user, "age");   // type: number
// getProperty(user, "invalid");        // Error!

// Generic avec valeur par défaut
interface ApiClient {
  get(url: string): Promise;
  post(url: string, data: unknown): Promise;
}

// Inférence conditionnelle
type Flatten = T extends Array ? U : T;
type A = Flatten;    // string
type B = Flatten;      // number

// Mapped types
type Readonly = { readonly [K in keyof T]: T[K] };
type Partial = { [K in keyof T]?: T[K] };
type Required = { [K in keyof T]-?: T[K] };

// Mapped types avec transformation de clés
type Getters = {
  [K in keyof T as `get${Capitalize}`]: () => T[K];
};

interface Person {
  name: string;
  age: number;
}

type PersonGetters = Getters;
// = { getName: () => string; getAge: () => number }

// Pick - sélectionner des propriétés
type UserPreview = Pick;

// Omit - exclure des propriétés
type CreateUserDTO = Omit;

// Record - créer un type objet
type UserRoles = Record<"admin" | "user" | "guest", Permission[]>;

// Exclude - exclure d'une union
type NonNullableStatus = Exclude;

// Extract - extraire d'une union
type SuccessStatus = Extract;

// NonNullable - retirer null et undefined
type ValidEmail = NonNullable; // string

// ReturnType - type de retour d'une fonction
function createUser(name: string, email: string) {
  return { id: crypto.randomUUID(), name, email, createdAt: new Date() };
}
type CreatedUser = ReturnType;

// Parameters - types des paramètres
type CreateUserParams = Parameters; // [string, string]

// Awaited - type résolu d'une Promise
type ResolvedUser = Awaited>; // User

// Type guard avec prédicat
function isUser(value: unknown): value is User {
  return (
    typeof value === "object" &&
    value !== null &&
    "id" in value &&
    "name" in value &&
    "email" in value
  );
}

function processData(data: unknown) {
  if (isUser(data)) {
    console.log(data.name); // TypeScript sait que c'est un User
  }
}

// Assertion functions
function assertIsString(value: unknown): asserts value is string {
  if (typeof value !== "string") {
    throw new Error(`Expected string, got ${typeof value}`);
  }
}

function processInput(input: unknown) {
  assertIsString(input);
  console.log(input.toUpperCase()); // TypeScript sait que c'est une string
}

// Narrowing avec in
type Fish = { swim: () => void };
type Bird = { fly: () => void };

function move(animal: Fish | Bird) {
  if ("swim" in animal) {
    animal.swim();
  } else {
    animal.fly();
  }
}

// Narrowing avec instanceof
function logValue(x: Date | string) {
  if (x instanceof Date) {
    console.log(x.toISOString());
  } else {
    console.log(x.toUpperCase());
  }
}

Composants React typés

// Props avec interface
interface ButtonProps {
  variant: "primary" | "secondary" | "danger";
  size?: "sm" | "md" | "lg";
  disabled?: boolean;
  onClick?: (event: React.MouseEvent) => void;
  children: React.ReactNode;
}

function Button({ variant, size = "md", disabled, onClick, children }: ButtonProps) {
  return (
    
      {children}
    
  );
}

// Composant générique
interface ListProps {
  items: T[];
  renderItem: (item: T, index: number) => React.ReactNode;
  keyExtractor: (item: T) => string;
}

function List({ items, renderItem, keyExtractor }: ListProps) {
  return (
    

      {items.map((item, index) => (
        
{renderItem(item, index)}
      ))}
    
  );
}

// Hooks typés
function useLocalStorage(key: string, initialValue: T) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? (JSON.parse(item) as T) : initialValue;
    } catch {
      return initialValue;
    }
  });

  const setValue = (value: T | ((val: T) => T)) => {
    const valueToStore = value instanceof Function ? value(storedValue) : value;
    setStoredValue(valueToStore);
    window.localStorage.setItem(key, JSON.stringify(valueToStore));
  };

  return [storedValue, setValue] as const;
}

Pages et API Routes typées

// app/users/[id]/page.tsx - App Router
interface PageProps {
  params: Promise<{ id: string }>;
  searchParams: Promise<{ tab?: string }>;
}

export default async function UserPage({ params, searchParams }: PageProps) {
  const { id } = await params;
  const { tab } = await searchParams;

  const user = await fetchUser(id);

  return ;
}

// app/api/users/route.ts - Route Handler
import { NextRequest, NextResponse } from "next/server";

interface CreateUserBody {
  name: string;
  email: string;
}

export async function POST(request: NextRequest) {
  const body = (await request.json()) as CreateUserBody;

  // Validation
  if (!body.name || !body.email) {
    return NextResponse.json(
      { error: "Name and email are required" },
      { status: 400 }
    );
  }

  const user = await createUser(body);
  return NextResponse.json(user, { status: 201 });
}

// Server Actions typées
"use server";

interface FormState {
  success: boolean;
  message: string;
}

export async function submitForm(
  prevState: FormState,
  formData: FormData
): Promise {
  const email = formData.get("email") as string;

  if (!email.includes("@")) {
    return { success: false, message: "Invalid email" };
  }

  await saveToDatabase({ email });
  return { success: true, message: "Subscribed successfully" };
}

API Express fortement typée

import express, { Request, Response, NextFunction } from "express";

// Types pour les requêtes
interface CreateUserRequest extends Request {
  body: {
    name: string;
    email: string;
    password: string;
  };
}

interface GetUserRequest extends Request {
  params: {
    id: string;
  };
}

// Middleware typé
function validateBody(schema: Zod.Schema) {
  return (req: Request, res: Response, next: NextFunction) => {
    const result = schema.safeParse(req.body);
    if (!result.success) {
      return res.status(400).json({ errors: result.error.errors });
    }
    req.body = result.data;
    next();
  };
}

// Routes typées
const router = express.Router();

router.post(
  "/users",
  validateBody(createUserSchema),
  async (req: CreateUserRequest, res: Response) => {
    const user = await userService.create(req.body);
    res.status(201).json(user);
  }
);

router.get("/users/:id", async (req: GetUserRequest, res: Response) => {
  const user = await userService.findById(req.params.id);
  if (!user) {
    return res.status(404).json({ error: "User not found" });
  }
  res.json(user);
});

// Interface générique de repository
interface Repository {
  findById(id: TId): Promise;
  findAll(filter?: Partial): Promise;
  create(data: Omit): Promise;
  update(id: TId, data: Partial>): Promise;
  delete(id: TId): Promise;
}

// Implémentation pour User
interface User {
  id: string;
  name: string;
  email: string;
  createdAt: Date;
  updatedAt: Date;
}

class PrismaUserRepository implements Repository {
  constructor(private prisma: PrismaClient) {}

  async findById(id: string): Promise {
    return this.prisma.user.findUnique({ where: { id } });
  }

  async findAll(filter?: Partial): Promise {
    return this.prisma.user.findMany({ where: filter });
  }

  async create(data: Omit): Promise {
    return this.prisma.user.create({ data });
  }

  async update(id: string, data: Partial>): Promise {
    return this.prisma.user.update({ where: { id }, data });
  }

  async delete(id: string): Promise {
    await this.prisma.user.delete({ where: { id } });
  }
}

// Result type inspiré de Rust
type Result =
  | { ok: true; value: T }
  | { ok: false; error: E };

// Helpers
const Ok = (value: T): Result => ({ ok: true, value });
const Err = (error: E): Result => ({ ok: false, error });

// Utilisation
interface ValidationError {
  field: string;
  message: string;
}

function validateEmail(email: string): Result {
  if (!email.includes("@")) {
    return Err({ field: "email", message: "Invalid email format" });
  }
  return Ok(email.toLowerCase().trim());
}

async function createUser(data: CreateUserDTO): Promise> {
  const errors: ValidationError[] = [];

  const emailResult = validateEmail(data.email);
  if (!emailResult.ok) {
    errors.push(emailResult.error);
  }

  if (data.password.length < 8) {
    errors.push({ field: "password", message: "Password too short" });
  }

  if (errors.length > 0) {
    return Err(errors);
  }

  const user = await userRepository.create({
    ...data,
    email: emailResult.ok ? emailResult.value : data.email,
  });

  return Ok(user);
}

// Usage avec pattern matching
const result = await createUser(formData);
if (result.ok) {
  console.log("User created:", result.value);
} else {
  console.log("Validation errors:", result.error);
}

tsconfig.json pour migration

{
  "compilerOptions": {
    // Permettre le JS pendant la migration
    "allowJs": true,
    "checkJs": true,

    // Mode strict progressif
    "strict": false,
    "noImplicitAny": true,  // Activer en premier
    "strictNullChecks": false,  // Activer ensuite

    // Compatibilité
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

// 1. Installer les types DefinitelyTyped
npm install --save-dev @types/lodash @types/express

// 2. Pour les packages sans types, créer un fichier de déclaration
// src/types/legacy-package.d.ts
declare module "legacy-package" {
  export function doSomething(input: string): Promise;
  export interface Result {
    success: boolean;
    data: unknown;
  }
}

// 3. Ou utiliser any temporairement
// src/types/global.d.ts
declare module "untyped-package";  // Permet l'import avec type any

Configuration ESLint pour TypeScript

// eslint.config.js (ESLint 9+ flat config)
import tseslint from "@typescript-eslint/eslint-plugin";
import tsparser from "@typescript-eslint/parser";

export default [
  {
    files: ["**/*.ts", "**/*.tsx"],
    languageOptions: {
      parser: tsparser,
      parserOptions: {
        project: "./tsconfig.json",
      },
    },
    plugins: {
      "@typescript-eslint": tseslint,
    },
    rules: {
      // Règles TypeScript strictes
      "@typescript-eslint/no-explicit-any": "error",
      "@typescript-eslint/explicit-function-return-type": "warn",
      "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
      "@typescript-eslint/prefer-nullish-coalescing": "error",
      "@typescript-eslint/prefer-optional-chain": "error",
      "@typescript-eslint/strict-boolean-expressions": "error",
      "@typescript-eslint/no-floating-promises": "error",
      "@typescript-eslint/await-thenable": "error",
    },
  },
];