TypeScript Academy · Leçon

Types d’accès indexé

Rechercher les types de propriétés avec la syntaxe T[K].

Types d’accès indexé est une leçon TypeScript Academy gratuite sur CoddyKit. Ceci est la leçon 3 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.

Rechercher les types de propriétés

Les types d’accès indexé permettent de rechercher le type d’une propriété à l’aide de la syntaxe entre crochets dans une position de type : Obj['prop']. Cela ressemble à la lecture d’une valeur, mais s’effectue au niveau du type.

Accès indexé de base

Indexez un type avec une clé littérale pour extraire le type de cette propriété. User['name'] donne string.

interface User { id: number; name: string }
type NameType = User["name"] // string
const n: NameType = "Ada"
console.log(n)

Pourquoi ne pas écrire simplement le type

L’accès indexé maintient les types synchronisés. Si User.name passe de string à autre chose, chaque occurrence de User['name'] est automatiquement mise à jour, sans modification manuelle.

interface Product { price: { amount: number; currency: string } }
type Price = Product["price"] // { amount: number; currency: string }
const p: Price = { amount: 10, currency: "USD" }
console.log(p)

Accéder aux propriétés avec une union de clés

Indexez avec une union de clés pour obtenir une union de leurs types de valeurs. User['id' | 'name'] produit number | string.

interface User { id: number; name: string }
type IdOrName = User["id" | "name"] // number | string
const v: IdOrName = 5
console.log(v)

Obj[keyof Obj] pour toutes les valeurs

Indexez avec keyof Obj pour obtenir une union de tous les types de valeurs de l’objet, c’est-à-dire l’ensemble complet de ses types de valeurs.

interface Config { host: string; port: number; secure: boolean }
type Values = Config[keyof Config] // string | number | boolean
const v: Values = true
console.log(v)

Type d’élément d’un tableau avec [number]

Pour un type tableau, indexez avec number pour obtenir son type d’élément. string[][number] vaut string.

type Names = string[]
type Item = Names[number] // string
const x: Item = "Ada"
console.log(x)

Type d’élément d’un tuple

Indexer un tuple avec number donne l’union de tous ses types d’éléments, ce qui est utile pour dériver un type de valeur à partir d’une liste fixe.

type Pair = [string, number]
type Element = Pair[number] // string | number
const e: Element = 42
console.log(e)

Combinaison avec typeof

Indexez le type d’une valeur avec typeof. Combiné à [number] sur un tableau as const, cela permet de dériver une union des valeurs littérales du tableau.

const colors = ["red", "green", "blue"] as const
type Color = typeof colors[number] // "red" | "green" | "blue"
const c: Color = "green"
console.log(c)

Accès indexé imbriqué

Enchaînez les recherches pour explorer des types imbriqués. Chaque paire de crochets descend d’un niveau dans la structure.

interface Data { user: { profile: { age: number } } }
type Age = Data["user"]["profile"]["age"] // number
const a: Age = 36
console.log(a)

Accès indexé dans les génériques

Le schéma T[K] avec K extends keyof T est le moteur des accesseurs sécurisés par les types : le type de retour est exactement celui de la propriété recherchée.

function get<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key]
}
const port = get({ host: "x", port: 80 }, "port")
console.log(port) // 80, typed as number

Une dérivation pratique

L’accès indexé évite de dupliquer les types : dérivez directement le type des arguments d’une fonction depuis un objet métier au lieu de le redéfinir.

interface Order { items: { sku: string; qty: number }[] }
type LineItem = Order["items"][number] // { sku: string; qty: number }
const li: LineItem = { sku: "A1", qty: 2 }
console.log(li)

Vérification rapide

Testez votre compréhension des types d’accès indexé.

Récapitulatif

Les types d’accès indexé (Obj['prop']) recherchent le type d’une propriété tout en restant synchronisés avec la source. Indexez avec une union de clés pour obtenir une union de types de valeurs, avec keyof Obj pour toutes les valeurs, et avec number pour les types d’éléments de tableaux ou de tuples. Enchaînez les crochets pour les recherches imbriquées et combinez-les avec typeof et les génériques (T[K]) pour des dérivations sécurisées par les types.

Questions Fréquemment Posées

La leçon « Types d’accès indexé » est-elle gratuite ?

Oui — le texte complet de « Types d’accès indexé » 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 « Types d’accès indexé » ?

Rechercher les types de propriétés avec la syntaxe T[K]. 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 3 sur 4.

Combien de temps prend la leçon « Types d’accès indexé » ?

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