0Pricing
TypeScript Academy · Leçon

Typage contextuel : déduction depuis le contexte

Comprenez comment TypeScript déduit les types du contexte environnant

Typage contextuel : déduction depuis le contexte 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.

Qu’est-ce que le typage contextuel ?

Le typage contextuel se produit lorsque TypeScript déduit le type d’une expression en fonction de la position où elle apparaît : c’est le contexte qui fournit le type, et non la valeur elle-même.

document.addEventListener("click", (e) => {
  // e is inferred as MouseEvent from the event type
  console.log(e.clientX);
});

Typage contextuel dans les fonctions de rappel

Lorsque vous transmettez une fonction de rappel à une fonction typée, TypeScript déduit les types des paramètres à partir de la signature attendue de la fonction de rappel.

const nums = [1, 2, 3];
nums.forEach((n) => {
  // n inferred as number from Array<number>
  console.log(n.toFixed(2));
});

Typage contextuel et littéraux d’objet

Lorsqu’un littéral d’objet est affecté à une variable typée, les types de ses propriétés sont déduits à partir de ce type, ce qui permet d’effectuer des vérifications précises.

interface Config { timeout: number; retries: number; }
const config: Config = {
  timeout: 3000,
  retries: 3,
  // extra: true // Error: excess property
};

Typage contextuel dans JSX

Dans React, les propriétés des gestionnaires d’événements sont typées contextuellement, de sorte que les types des paramètres d’événement sont déduits automatiquement.

function Button({ onClick }: { onClick: (e: React.MouseEvent) => void }) {
  return <button onClick={onClick}>Click</button>;
}
// Caller: e is inferred as React.MouseEvent
<Button onClick={(e) => console.log(e.currentTarget)} />

Typage contextuel et annotations explicites

Le typage contextuel est puissant, mais peut être remplacé par des annotations explicites. Lorsqu’ils sont tous deux présents, l’explicite l’emporte sur le contextuel.

const handler: (x: string) => void = (x: number) => {}; // Error
// Explicit annotation (number) conflicts with contextual (string)

Typage contextuel avec la déstructuration

Les paramètres déstructurés des fonctions dont le typage est contextuel héritent également leurs types du contexte.

const pairs: [string, number][] = [["a", 1]];
pairs.forEach(([key, value]) => {
  // key: string, value: number — contextually typed
  console.log(key.toUpperCase(), value * 2);
});

Typage contextuel et types de retour

Lorsqu’une fonction est affectée à une variable typée, son type de retour est également déduit de manière contextuelle.

type Transform = (x: number) => string;
const double: Transform = (x) => x * 2; // Error: number not string
const str: Transform = (x) => String(x * 2); // OK

Typage contextuel dans les expressions conditionnelles

TypeScript peut propager les types contextuels dans les expressions ternaires et les opérateurs logiques.

const result: string | null =
  Math.random() > 0.5 ? "yes" : null; // both arms typed by context

Limites du typage contextuel

Le typage contextuel ne s’applique pas lorsque l’expression se trouve dans une position non contextuelle, par exemple une variable autonome sans annotation.

const fn = (x) => x + 1; // x: any — no context to infer from
// Add annotation: const fn = (x: number) => x + 1;

Inférence bidirectionnelle

TypeScript effectue une inférence de type bidirectionnelle : de haut en bas, à partir du contexte, et de bas en haut, à partir de l’expression. Ces deux approches coopèrent pour fournir le type le plus précis possible.

function apply<T>(fn: (x: T) => T, val: T): T { return fn(val); }
apply((x) => x.toUpperCase(), "hello"); // x inferred as string

Récapitulatif : typage contextuel

Le typage contextuel permet à TypeScript de déduire les types à partir de la position où une expression est utilisée. Les fonctions de rappel, les affectations, les propriétés JSX et la déstructuration bénéficient tous de ce mécanisme d’inférence.

Vérification rapide

Quand le typage contextuel s’applique-t-il au paramètre d’une fonction de rappel ?

Ce que vous avez appris

Le typage contextuel consiste, pour TypeScript, à déduire les types à partir de la position plutôt que de la valeur. Il rend les fonctions de rappel, les gestionnaires d’événements et les affectations typées concis tout en conservant la sûreté du typage.

Questions Fréquemment Posées

La leçon « Typage contextuel : déduction depuis le contexte » est-elle gratuite ?

Oui — le texte complet de « Typage contextuel : déduction depuis le contexte » 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 « Typage contextuel : déduction depuis le contexte » ?

Comprenez comment TypeScript déduit les types du contexte environnant 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 « Typage contextuel : déduction depuis le contexte » ?

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. Mécanismes d’élargissement et d’affinement des types
  2. Typage contextuel : déduction depuis le contexte
  3. Fraîcheur et vérification des propriétés superflues
  4. Assertions const et as const
← Retour à TypeScript Academy