Manipuler des structures de données complexes en TypeScript : Conseils et astuces

Travailler avec des structures de données complexes peut sembler insurmontable, en particulier lorsque les projets prennent de l’ampleur. TypeScript fournit un ensemble d’outils robustes pour aider à gérer ces structures de manière efficace. De la définition des formes de données à leur transformation et à leur validation, TypeScript rend votre code plus propre, plus sûr et plus facile à maintenir. Explorons ces trucs et astuces en termes simples et pratiques !

1. Utiliser les alias de type et les interfaces pour définir les formes de données

À quoi cela sert-il ?
Lorsque l’on travaille avec des données, il est important de définir leur « forme » (c’est-à-dire les propriétés qu’elles possèdent et leurs types). Les alias de type et les interfaces vous permettent de décrire clairement ces formes, ce qui garantit la cohérence de votre code.

Exemple:

type Address = {
	street: string;
	city: string;
	zipCode: string;
};
	
interface User {
	id: number;
	name: string;
	email: string;
	address: Address;
} 

Ici, vous définissez que chaque Utilisateur doit avoir un identifiant, nom, e-mail, et un adresse. Cela permet d’éviter des erreurs, comme l’omission accidentelle d’un champ obligatoire.

2. Gérer les structures de données imbriquées et récursives

À quoi cela sert-il ?
Les structures de données comportent souvent plusieurs niveaux ou couches. Par exemple, un menu peut avoir des sous-menus, et ces sous-menus peuvent avoir leurs propres sous-menus. TypeScript vous permet de définir facilement ces structures imbriquées ou répétitives.

Exemple:

interface Category {
	id: number;
	name: string;
	subCategories?: Category[]; // Nested categories
}

Cette structure garantit que chaque catégorie et ses sous-catégories suivent les mêmes règles, ce qui facilite la gestion de votre code.

3. Simplifier le travail avec les types d’utilité

À quoi sert-il :
Les types utilitaires permettent de modifier des structures de données existantes sans en créer de nouvelles. Ils permettent de gagner du temps et de réduire les redondances.

Principaux types d’utilitaires :

• Partiel: Rend tous les champs facultatifs.
• Requis: Rend tous les champs obligatoires.
• Prendre: Sélectionne des champs spécifiques.
• Omettre: Supprime des champs spécifiques.

Exemple:

// All fields are optional 
type OptionalUser = Partial<User>;

// Only name and email are used 
type UserPreview = Pick<User, "name" | "email">;

// Removes the address field
type UserWithoutAddress = Omit<User, "address">;

4. Utiliser l’enregistrement pour les paires clé-valeur

À quoi sert-il :
Lorsque vos données ressemblent à un dictionnaire ou à une carte (clés associées à des valeurs), Record est un excellent outil pour les définir.

Exemple:

type Scores = Record<string, number>;

const playerScores: Scores = {
	Alice: 90,
	Bob: 85,
	Charlie: 95,
};

Ici, chaque clé (par exemple, « Alice ») doit être une chaîne, et chaque valeur (par exemple, « Alice ») doit être une chaîne. 90) doit être un nombre.

5. Transformer des données à l’aide de types mappés

À quoi sert-il :
Les types mappés vous permettent d’appliquer automatiquement des modifications à tous les champs d’une structure de données. Par exemple, vous pouvez faire en sorte que tous les champs soient en lecture seule ou qu’ils puissent être annulés.

Exemple:

type ReadOnlyUser = {
	readonly [K in keyof User]: User[K];
};
	
type NullableUser = {
	[K in keyof User]: User[K] | null;
};

Au lieu de réécrire chaque champ manuellement, vous pouvez utiliser des types mappés pour les modifier tous en même temps.

6. Typer fortement les réponses JSON des API

À quoi sert-il :
Lorsque vous travaillez avec des API, la définition de la structure attendue de la réponse garantit que votre code traite les données correctement.

Exemple:

type ApiResponse = {
	status: string;
	data: User[];
};
	
async function fetchUsers(): Promise<ApiResponse> {
	const response = await fetch("/api/users");
	return response.json();
}

Cela évite les bogues causés par des formats de données inattendus de l’API.

7. Valider les données avec Type Guards

À quoi sert-il :
Parfois, vous obtenez des données provenant de sources auxquelles vous ne pouvez pas faire entièrement confiance, comme les entrées des utilisateurs ou les API externes. Les protections de type vous permettent de vérifier si les données correspondent à la forme attendue avant de les utiliser.

Exemple:

function isUser(obj: any): obj is User {
	return "id" in obj && "name" in obj && "email" in obj;
}
	
function handleData(data: unknown) {
	if (isUser(data)) {
		console.log(`${data.name} is a valid user.`);
	} else {
		console.error("Invalid data!");
	}
}	 

Cela garantit que vous travaillez uniquement avec des données valides, réduisant ainsi les erreurs d’exécution.

8. Ajouter de la flexibilité avec les génériques

À quoi sert-il :
Les génériques permettent d’écrire des fonctions ou des composants réutilisables qui fonctionnent avec différents types de données, tout en conservant la sécurité des types.

Exemple:

function wrapInArray<T>(value: T): T[] {
	return [value];
}

// [42], type: number[]
const numbers = wrapInArray(42);
	
// ["Alice"], type: string[]
const names = wrapInArray("Alice");

Cela élimine le besoin d’écrire des fonctions distinctes pour chaque type de données.

9. Utiliser les Enums pour les valeurs fixes

À quoi sert-il :
Lorsque vous disposez d’un ensemble de valeurs fixes (comme les rôles ou les statuts des utilisateurs), les énumérations vous permettent de n’utiliser que des options valides.

Exemple:

enum Role {
	Admin = "admin",
	User = "user",
	Guest = "guest",
}
	
interface TeamMember {
	id: number;
	role: Role;
}
	
const member: TeamMember = {
	id: 1,
	role: Role.Admin,
};

10. Documentez vos types

À quoi sert-il :
L’ajout de commentaires à vos types permet aux autres (et à vous-même) de comprendre plus facilement la signification de chaque champ.

Exemple:

/**
* Represents a user in the system.
* @property id - The unique identifier for the user.
* @property name - The user's full name.
* @property email - The user's email address.
*/
interface User {
	id: number;
	name: string;
	email: string;
	address: Address;
}

Une bonne documentation permet de gagner du temps lors du débogage ou de la collaboration avec d’autres.

11. Organisez vos types dans des fichiers distincts

À quoi sert-il :
Conserver tous vos types dans un seul fichier peut s’avérer fastidieux. Les répartir dans des fichiers distincts facilite la gestion de votre projet.

Exemple:
Organisez votre projet comme suit :

src/
	types/
		user.ts
		address.ts
		apiResponse.ts   

Cela simplifie la recherche et la mise à jour de vos types à mesure que votre projet se développe.

Conclusion

Gérer des données complexes en TypeScript peut être beaucoup plus facile qu’il n’y paraît. Grâce au solide système de types de TypeScript, vous pouvez définir clairement vos données, éviter les erreurs et tout organiser.

En utilisant des outils tels que les alias de type, les interfaces et les types utilitaires, vous pouvez rendre votre code plus propre et plus facile à gérer. TypeScript permet de s’assurer que votre code fonctionne sans problème, même si votre projet grandit. Il facilite également l’écriture de fonctions réutilisables et la manipulation de données en toute sécurité.

Que vous découvriez TypeScript ou que vous l’utilisiez depuis un certain temps, ces fonctionnalités vous aideront à écrire un code de meilleure qualité et plus fiable. En fin de compte, TypeScript facilite la création d’applications solides et durables sans le casse-tête des erreurs et de la confusion constantes.