TypeScript Academy · Leçon

L’opérateur de type typeof

Capturer le type d’une valeur à l’exécution avec typeof.

L’opérateur de type typeof 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.

Types dérivés de valeurs

L’opérateur de type typeof dérive un type statique à partir d’une valeur à l’exécution. Il vous permet d’écrire une valeur une seule fois et de réutiliser sa structure comme type, en maintenant les deux parfaitement synchronisés.

Deux typeof différents

Ne les confondez pas : le typeof de JavaScript renvoie une chaîne à l’exécution ; celui de TypeScript apparaît dans une position de type et produit un type. Même mot-clé, contextes différents.

const n = 42
console.log(typeof n) // "number" — JS runtime
type T = typeof n     // number — TS type position

Capturer le type d’une variable

Placez typeof avant une valeur dans une annotation de type pour capturer le type inféré de cette valeur. Ici, T devient string.

const greeting = "hello"
type G = typeof greeting // string
const another: G = "world"
console.log(another)

Capturer la structure d’un objet

Appliqué à un objet constant, typeof produit sa structure inférée complète ; il n’est pas nécessaire d’écrire l’interface manuellement.

const config = { host: "localhost", port: 8080 }
type Config = typeof config // { host: string; port: number }
const c: Config = { host: "127.0.0.1", port: 3000 }
console.log(c)

L’inférence élargit par défaut

Sans aide, TypeScript élargit les littéraux : port: 8080 devient number, et non le littéral 8080. C’est souvent suffisant, mais vous pouvez parfois vouloir conserver la valeur exacte.

const settings = { mode: "dark" }
type S = typeof settings // { mode: string }
const x: S = { mode: "anything" }
console.log(x)

typeof avec as const

Ajoutez as const pour figer une valeur dans son type littéral le plus précis. Désormais, typeof capture les littéraux exacts et marque tout comme readonly.

const settings = { mode: "dark" } as const
type S = typeof settings // { readonly mode: "dark" }
const x: S = { mode: "dark" }
console.log(x)

Types littéraux à partir de tableaux

Avec as const, l’utilisation de typeof sur un tableau produit un tuple readonly de types littéraux, qui sert de base pour dériver des unions de valeurs.

const roles = ["admin", "editor", "viewer"] as const
type Roles = typeof roles // readonly ["admin", "editor", "viewer"]
console.log(roles[0])

Dériver une union de valeurs

Combinez typeof avec un accès indexé par [number] pour transformer un tableau de constantes en type union de ses valeurs.

const roles = ["admin", "editor", "viewer"] as const
type Role = typeof roles[number] // "admin" | "editor" | "viewer"
const r: Role = "editor"
console.log(r)

typeof sur les fonctions

Vous pouvez également capturer le type d’une fonction. C’est utile pour typer des enveloppes ou réutiliser une signature ailleurs.

function add(a: number, b: number) { return a + b }
type AddFn = typeof add // (a: number, b: number) => number
const myAdd: AddFn = (x, y) => x + y
console.log(myAdd(2, 3))

Maintenir les types synchronisés

Le principal avantage est le suivant : définissez une seule fois la configuration ou les constantes sous forme de valeurs, puis dérivez les types avec typeof. Modifiez la valeur et le type se met automatiquement à jour, sans duplication.

const defaults = { retries: 3, timeout: 1000 }
type Defaults = typeof defaults
function apply(opts: Defaults) { return opts.retries }
console.log(apply(defaults))

Fonctionne uniquement avec des identifiants

L’opérateur de type typeof accepte un identifiant ou un chemin de propriété, et non une expression quelconque. typeof (a + b) n’est pas autorisé.

const obj = { user: { name: "Ada" } }
type Name = typeof obj.user.name // string
const n: Name = "Leo"
console.log(n)

Vérification rapide

Testez votre compréhension de l’opérateur de type typeof.

Récapitulatif

L’opérateur de type typeof (dans une position de type) dérive un type à partir d’une valeur : variable, objet, tableau ou fonction. Par défaut, les littéraux sont élargis ; ajoutez as const pour capturer leurs types littéraux exacts sous forme readonly. Combiné à un accès indexé (typeof arr[number]), il produit des unions de valeurs. Dériver les types à partir des valeurs permet de conserver une source unique de vérité et d’éviter de dupliquer les structures.

Questions Fréquemment Posées

La leçon « L’opérateur de type typeof » est-elle gratuite ?

Oui — le texte complet de « L’opérateur de type typeof » 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 « L’opérateur de type typeof » ?

Capturer le type d’une valeur à l’exécution avec typeof. 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 « L’opérateur de type typeof » ?

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

← Retour à TypeScript Academy