Angular est-il vraiment plus compliqué que React ?

Quand on débute avec Angular, il est facile de se sentir découragé face à la multitude de concepts à assimiler. Cette complexité peut inciter à se tourner vers des frameworks comme React, qui semblent plus simples à première vue. Mais est-ce vraiment le cas ?

Abonnez-vous à notre chaîne

Pour profiter des prochaines vidéos sur Angular, abonnez-vous à la nouvelle chaîne YouTube !

Skip to content

Vous souhaitez recevoir de l'aide sur ce sujet ? rejoignez la communauté Angular.fr sur Discord.

Les types utilitaires

En TypeScript, en plus des types primitifs et des types personnalisés que vous pouvez créer, il existe plusieurs types utilitaires avancés qui permettent de transformer des types existants de manière sophistiquée. Omit, ainsi que d'autres types utilitaires similaires, jouent un rôle important dans ces transformations de type. Voici quelques-uns des types utilitaires les plus couramment utilisés :

Omit

Omit<T, K> crée un type en excluant certaines propriétés (K) d'un type donné (T). C'est utile pour créer des types basés sur d'autres types, mais sans certaines propriétés.

typescript
interface Personne {
    nom: string;
    age: number;
    adresse: string;
}

type PersonneSansAdresse = Omit<Personne, 'adresse'>;

// Équivalent à:
// type PersonneSansAdresse = {
//     nom: string;
//     age: number;
// }

Pick

Pick<T, K> est l'opposé de Omit. Il vous permet de créer un type en choisissant certaines propriétés (K) d'un type existant (T).

typescript
type PersonneNomEtAge = Pick<Personne, 'nom' | 'age'>;

// Équivalent à:
// type PersonneNomEtAge = {
//     nom: string;
//     age: number;
// }

Partial

Partial<T> rend toutes les propriétés d'un type T optionnelles. C'est utile lors de la modification ou de la construction partielle d'objets.

typescript
type PersonnePartielle = Partial<Personne>;

// Équivalent à:
// type PersonnePartielle = {
//     nom?: string;
//     age?: number;
//     adresse?: string;
// }

Required

Required<T> est l'opposé de Partial. Il rend toutes les propriétés d'un type T requises.

typescript
type PersonneComplete = Required<Personne>;

Readonly

Readonly<T> rend toutes les propriétés d'un type T en lecture seule. Cela signifie que les propriétés ne peuvent pas être réassignées après leur création.

typescript
type PersonneReadonly = Readonly<Personne>;

Record

Record<K, T> crée un type d'objet avec des clés de type K et des valeurs de type T. C'est utile pour définir des objets dont les clés sont connues à l'avance.

typescript
type DictionnaireDeNombres = Record<string, number>;
// Un objet avec des clés de type string et des valeurs de type number.

Exclude

Exclude<T, U> crée un type en excluant de T tous les types qui sont assignables à U. C'est utile pour retirer certains types d'une union.

typescript
type T1 = string | number | boolean;
type T2 = Exclude<T1, number>;

// T2 est maintenant string | boolean

Extract

Extract<T, U> fait le contraire de Exclude. Il crée un type en extrayant de T tous les types qui sont assignables à U.

typescript
type T3 = Extract<T1, number | boolean>;

// T3 est maintenant number | boolean

NonNullable

NonNullable<T> crée un type en excluant null et undefined de T.

typescript
type T4 = string | null | undefined;
type T5 = NonNullable<T4>;

// T5 est maintenant string

ReturnType

ReturnType<T> extrait le type de retour d'un type de fonction T.

typescript
function exemple() {
    return { nom: "Alice", age: 25 };
}

type T6 = ReturnType<typeof exemple>;

// T6 est maintenant { nom: string; age: number; }

Parameters

Parameters<T> extrait les types de paramètres d'une fonction sous forme d'un tuple.

typescript
function exemple2(nom: string, age: number) {
    // ...
}

type T7 = Parameters<typeof exemple2>;

// T7 est maintenant [string, number]

ConstructorParameters

Semblable à Parameters, mais pour les constructeurs de classes.

typescript
class ExempleClasse {
    constructor(nom: string, age: number) {}
}

type T8 = ConstructorParameters<typeof ExempleClasse>;

// T8 est maintenant [string, number]

InstanceType

InstanceType<T> extrait le type d'instance d'une classe ou d'un type de constructeur.

typescript
type T9 = InstanceType<typeof ExempleClasse>;

// T9 est maintenant ExempleClasse

Chaque mois, recevez en avant-première notre newsletter avec les dernières actualités, tutoriels, astuces et ressources Angular directement par email !