TypeScript Academy · Leçon

TypeScript 5.0 : décorateurs standard et paramètres de types const

Utilisez la nouvelle proposition de décorateurs et les paramètres génériques const

Leçon 1 sur 413 étapes

TypeScript 5.0 : décorateurs standard et paramètres de types const est une leçon TypeScript Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage TypeScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours TypeScript Academy comprend 4 leçons au total.

Présentation de TypeScript 5.0

TypeScript 5.0 a apporté la proposition de décorateurs standardisée de TC39 (étape 3), les paramètres de types const, une nouvelle syntaxe de modules verbatim et d'importantes améliorations des performances.

// TS 5.0 release: March 2023
// npm install typescript@5

Décorateurs de l'étape 3

TS 5.0 implémente la proposition officielle de décorateurs de TC39 à l'étape 3, différente des décorateurs expérimentaux hérités. Il n'est plus nécessaire d'utiliser experimentalDecorators: true.

// New standard decorator — no experimentalDecorators flag needed
function logged(target: Function, ctx: ClassDecoratorContext) {
  return class extends (target as any) {
    constructor(...args: any[]) {
      console.log("Creating", target.name);
      super(...args);
    }
  };
}

@logged
class User { constructor(public name: string) {} }

Objet de contexte d'un décorateur

Les nouveaux décorateurs reçoivent un objet typé ClassDecoratorContext ou MethodDecoratorContext contenant des métadonnées sur l'élément décoré.

function sealed(_: Function, ctx: ClassDecoratorContext) {
  ctx.addInitializer(function(this: any) {
    Object.seal(this);
  });
}

Décorateurs de méthodes dans TS 5.0

Les décorateurs de méthodes reçoivent la méthode et un ClassMethodDecoratorContext, à la place de l'ancienne signature (target, key, descriptor).

function measure(_: Function, ctx: ClassMethodDecoratorContext) {
  return function(this: any, ...args: any[]) {
    const start = performance.now();
    const result = (_.apply as any)(this, args);
    console.log(ctx.name, performance.now() - start, "ms");
    return result;
  };
}

Paramètres de types const

const appliqué à un paramètre de type permet à TypeScript d'inférer les types littéraux des arguments au lieu de les élargir vers le type de base.

function identity<const T>(val: T): T { return val; }
const a = identity("hello");      // type: "hello" (not string)
const b = identity([1, 2, 3]);    // type: readonly [1, 2, 3]

Types génériques const et as const

Les paramètres de types const appliquent automatiquement l'effet de resserrement : les appelants n'ont pas besoin d'ajouter as const à chaque appel.

// Without const param: callers need as const
function makeRoute<T extends string>(path: T) { return path; }
const r1 = makeRoute("/home" as const); // "/home"

// With const param: automatic
function makeRoute2<const T extends string>(path: T) { return path; }
const r2 = makeRoute2("/home"); // "/home" — no as const needed

Résolution des modules par le groupeur

TS 5.0 a ajouté moduleResolution: "bundler" pour les projets utilisant Vite, esbuild ou des groupeurs similaires qui prennent eux-mêmes en charge la résolution des modules.

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "bundler"
  }
}

verbatimModuleSyntax

verbatimModuleSyntax: true impose que les importations limitées aux types utilisent import type, ce qui empêche les importations de s'échapper vers l'exécution.

// tsconfig.json
{ "compilerOptions": { "verbatimModuleSyntax": true } }

// Now this errors: must be import type
import { User } from "./types"; // Error if User is only a type
import type { User } from "./types"; // OK

Améliorations des performances

TS 5.0 a amélioré la mise en cache de l'instanciation des types et les performances du resserrement, ce qui accélère les grands projets sans modification du code.

# TS 5.0 compile benchmarks: ~10-15% faster on large projects

Migration depuis les décorateurs hérités

Les décorateurs hérités experimentalDecorators fonctionnent toujours, mais seront finalement obsolètes. Migrez vers les décorateurs de TC39 pour assurer la compatibilité future.

// Legacy: requires experimentalDecorators: true
@Component({ selector: "app-root" })
class AppComponent {}

// New TC39 decorator: no flag needed (but Angular/NestJS need updates)

Récapitulatif : TypeScript 5.0

TypeScript 5.0 a apporté les décorateurs standard de TC39, les paramètres de types const pour l'inférence automatique des littéraux, moduleResolution: "bundler", verbatimModuleSyntax et d'importants gains de performances.

Vérification rapide

Quel est l'effet de const sur un paramètre de type ?

Réponds-y dans la leçon interactive

Ce que vous avez appris

TypeScript 5.0 : les décorateurs standard de TC39 remplacent les décorateurs expérimentaux, les paramètres de types const resserrent automatiquement les arguments vers des types littéraux, moduleResolution: "bundler" prend en charge les outils de construction modernes et verbatimModuleSyntax impose import type.

Gratuit pour commencer

Apprends TypeScript avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours: 101
Leçons: 352

Commencer gratuitement Voir le cours complet

Questions Fréquemment Posées

La leçon « TypeScript 5.0 : décorateurs standard et paramètres de types const » est-elle gratuite ?

Oui — le texte complet de « TypeScript 5.0 : décorateurs standard et paramètres de types const » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours TypeScript Academy, passe à CoddyKit PRO. Le cours TypeScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « TypeScript 5.0 : décorateurs standard et paramètres de types const » ?

Utilisez la nouvelle proposition de décorateurs et les paramètres génériques const Tu pratiques TypeScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer TypeScript Academy ?

Aucune expérience préalable n'est requise. TypeScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « TypeScript 5.0 : décorateurs standard et paramètres de types const » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon TypeScript Academy ?

Oui. Chaque leçon TypeScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

TypeScript 5.0 : décorateurs standard et paramètres de types const
TypeScript 5.1-5.2 : déduction améliorée
TypeScript 5.3-5.4 : nouvel affinement et NoInfer
TypeScript 5.5+ : déclarations isolées et nouveautés

← Retour à TypeScript Academy