0Pricing
TypeScript Academy · Leçon

TypeScript 5.1-5.2 : déduction améliorée

Découvrez l’indépendance des types des accesseurs et les déclarations using

TypeScript 5.1-5.2 : déduction améliorée est une leçon TypeScript Academy gratuite sur CoddyKit. Ceci est la leçon 2 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.1

TypeScript 5.1, publié en juin 2023, a amélioré l'indépendance des types des accesseurs, la flexibilité du type des éléments JSX, les curseurs liés dans les éditeurs et les optimisations des performances.

// npm install typescript@5.1

Indépendance des types des accesseurs

Avant la version 5.1, l'accesseur en lecture et l'accesseur en écriture devaient utiliser le même type. Désormais, un accesseur en lecture peut renvoyer un type plus large que celui accepté par l'accesseur en écriture, ce qui est utile pour les schémas de coercition.

class Temperature {
  get celsius(): string { return this._c + "°C"; } // string
  set celsius(value: string | number) {             // string | number
    this._c = Number(value);
  }
  private _c = 0;
}

Valeur non définie comme enfant JSX

TS 5.1 permet aux composants de renvoyer directement undefined (en plus de null) depuis leur fonction de rendu, conformément au comportement de React 18.

// TS 5.1+: OK
function Widget(): undefined { return undefined; }
// Before 5.1: had to return null or JSX element

Souplesse du type d’élément JSX

La nouvelle contrainte JSX.ElementType offre davantage de souplesse pour les fabriques JSX personnalisées, ce qui est utile dans les environnements autres que React.

// Custom JSX element types supported more naturally in 5.1

Présentation de TypeScript 5.2

TypeScript 5.2 (publié en août 2023) a introduit les déclarations using (gestion explicite des ressources), les métadonnées des décorateurs et les méthodes de copie des tableaux.

// npm install typescript@5.2

Déclarations using

using met en œuvre la proposition de gestion explicite des ressources : la méthode [Symbol.dispose]() de la ressource est appelée lorsqu’elle sort de sa portée.

// Requires lib: ["es2022", "esnext.disposable"]
function getConnection(): Disposable {
  const conn = openDb();
  return { [Symbol.dispose]() { conn.close(); } };
}

{
  using conn = getConnection();
  // conn.close() called automatically at block end
}

await using pour la libération asynchrone

await using fonctionne comme using, mais appelle une méthode asynchrone [Symbol.asyncDispose](), ce qui permet un nettoyage asynchrone.

async function run() {
  await using db = await connectDb();
  // db[Symbol.asyncDispose]() called on exit
}

Métadonnées des décorateurs

TS 5.2 met en œuvre la proposition de métadonnées des décorateurs de TC39, ce qui permet aux décorateurs d’associer des métadonnées via Symbol.metadata.

function meta(value: string) {
  return (_: unknown, ctx: DecoratorContext) => {
    ctx.metadata[ctx.name] = value;
  };
}

@meta("service")
class MyService {}
console.log((MyService as any)[Symbol.metadata]); // { "MyService": "service" }

Méthodes de copie des tableaux

TS 5.2 a ajouté les types de Array.prototype.toSorted, toReversed, toSpliced et with : des opérations immuables sur les tableaux issues d’ES2023.

const arr = [3, 1, 2];
const sorted = arr.toSorted(); // [1, 2, 3] — new array, arr unchanged
const reversed = arr.toReversed(); // [2, 1, 3]

Utiliser using dans tsconfig pour la version 5.2

Pour utiliser les déclarations using, incluez la bibliothèque esnext.disposable dans votre tsconfig.

{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["ES2022", "ESNext.Disposable"]
  }
}

Récapitulatif : TS 5.1-5.2

TS 5.1 : types indépendants pour les accesseurs et mutateurs, retours JSX non définis. TS 5.2 : déclarations using pour le nettoyage automatique des ressources, métadonnées des décorateurs et types des méthodes de copie immuables des tableaux.

Vérification rapide

Que fait la déclaration using dans TypeScript 5.2 ?

Ce que vous avez appris

TS 5.1 a apporté des types indépendants pour les accesseurs et mutateurs ainsi que les retours JSX non définis. TS 5.2 a introduit les déclarations using pour la gestion automatique des ressources, les métadonnées des décorateurs et les types des méthodes de copie immuables des tableaux d’ES2023.

Questions Fréquemment Posées

La leçon « TypeScript 5.1-5.2 : déduction améliorée » est-elle gratuite ?

Oui — le texte complet de « TypeScript 5.1-5.2 : déduction améliorée » 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.1-5.2 : déduction améliorée » ?

Découvrez l’indépendance des types des accesseurs et les déclarations using 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 2 sur 4.

Combien de temps prend la leçon « TypeScript 5.1-5.2 : déduction améliorée » ?

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

  1. TypeScript 5.0 : décorateurs standard et paramètres de types const
  2. TypeScript 5.1-5.2 : déduction améliorée
  3. TypeScript 5.3-5.4 : nouvel affinement et NoInfer
  4. TypeScript 5.5+ : déclarations isolées et nouveautés
← Retour à TypeScript Academy