Avant TypeScript 3.7, une référence de type récursive entraînerait l'émission par le compilateur TypeScript d'un message d'erreur de références circulaires. Les développeurs doivent trouver une solution de contournement (c'est-à-dire utiliser une interface) pour obtenir une référence récursive.

Le type récursif est introduit depuis TypeScript 3.7. Il permet la référence au type à partir de sa propre définition en reportant la référence du type jusqu'à l'instanciation .

Comme la récursivité est un modèle de programmation courant, il existe de nombreux cas d'utilisation dans lesquels un type récursif est très utile. En utilisant le type récursif, nous pouvons représenter une structure de données complexe de manière concise.

Dans cet article, je vais explorer comment utiliser les alias de type récursifs dans TypeScript.

Utiliser un type récursif pour représenter une structure de données

Le type récursif peut être utilisé pour représenter un type de données qui a une structure imbriquée. Ci-dessous un exemple :

const myData = {
    top: 1,
    rest: {
        top: 2,
        rest: {
            top: 3,
            rest: null
        }
    }
};

type Stack<T> = {
  top: T;
  rest: Stack<T> | null;
} ;

// Then we can strong typed the data
const myData: Stack<number> = {
    top: 1,
    rest: {
        top: 2,
        rest: {
            top: 3,
            rest: null
        }
    }
};

Un autre bon exemple est le type de données JSON. Dans l'exemple de terrain de jeu TypeScript de type récursif, l'extrait de code suivant est utilisé pour définir un type JSON :

type Json = string | number | boolean | null | Json[] | { [key: string]: Json };

const exampleStatusJSON: Json = {
  available: true,
  username: "Jean-loup",
  room: {
    name: "Highcrest",
    // Cannot add functions into the Json type
    // update: () => {}
  },
};

Comme indiqué dans les exemples ci-dessus, l'utilisation d'un type récursif rend la définition de type plus propre et plus lisible, car la définition de type correspond à la nature récursive d'une structure de données.

Limitation du type récursif

Les alias de type récursifs dans TypeScript ont la limitation de ne pas permettre une "auto-instanciation" immédiate. Ci-dessous un exemple :

type Stack<T> = {
  top: T;
  rest: Stack<T> | null;
} ;

type Stack1 = Stack<Stack1>;

Utilisation avancée

En combinant des alias de type récursifs avec d'autres fonctionnalités de type avancées (c'est-à-dire le type conditionnel), nous pouvons réaliser des opérations de type complexes.

Disons que nous avons un ClientType qui représente les données client.

type Client = {
  id: number,
  name: string,
  address: {
    id: number,
    suburb: {
      postCode: number
    }
  }
};

type postCode = PropertyType<Client, 'address.suburb.postCode'>;
// the postCode type returns "number" 
type noExist = PropertyType<Client, 'address.suburb.noExist'>;
// return "never" because the path does not exist

Les alias de type récursifs conviennent bien à cette situation, car ils nous permettent de parcourir la structure du type d'objet.

Ci-dessous la mise en œuvre de laPropertyType

type PropertyType<T, Path extends string> =
    Path extends keyof T ? T[Path] :
        Path extends `${infer K}.${infer R}` ? K extends keyof T ? PropertyType<T[K], R> : 
        never :
    never;

• Génériques
• Déduire
• Types conditionnels
• clé de l'opérateur

Path extends keyof T ? T[Path]

Path extends `${infer K}.${infer R}` ? K extends keyof T ? PropertyType<T[K], R>

Résumé

Dans cet article, nous passons en revue quelques exemples d'alias de type récursif. Un alias de type récursif peut représenter une structure de données avec une nature récursive, et nous pouvons également l'utiliser pour parcourir ou manipuler des types de données complexes.

J'espère que cet article pourra vous être utile. Bonne programmation !

Codage de niveau supérieur

Merci de faire partie de notre communauté ! Avant que tu partes:

• Applaudissez pour l'histoire et suivez l'auteur
• Voir plus de contenu dans la publication Level Up Coding
• Cours d'entretien de codage gratuit ⇒ Voir le cours
• Suivez-nous : Twitter | LinkedIn | Bulletin