0Pricing
Frontend Academy · Leçon

Types utilitaires : Partial, Required, Pick et Omit

Transformez des types existants avec les types utilitaires intégrés afin de créer des variantes sans duplication.

Types utilitaires : Partial, Required, Pick et Omit est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 2 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 Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

Types utilitaires intégrés

TypeScript fournit un ensemble de types utilitaires génériques qui transforment d'autres types. Ils évitent de devoir réécrire manuellement des variantes similaires d'interfaces.

Partial<T>

Rend toutes les propriétés de T facultatives. C'est idéal pour les charges utiles de mise à jour ou de correctif lorsque tous les champs ne doivent pas être fournis.

interface User { name: string; email: string; age: number; }

function updateUser(id: string, changes: Partial<User>) {
  // changes.name is string | undefined
  // changes.email is string | undefined
}

updateUser('1', { name: 'Bob' }); // only update name

Required<T>

L'opposé de Partial : rend toutes les propriétés obligatoires en supprimant les modificateurs facultatifs (?)

interface Config {
  host?: string;
  port?: number;
  debug?: boolean;
}

function validate(config: Required<Config>) {
  // All three are now required
  console.log(config.host, config.port, config.debug);
}

Pick<T, K>

Crée un type contenant uniquement les propriétés indiquées de T. Utile pour réduire de grands objets aux seuls champs dont vous avez besoin.

interface User { id: number; name: string; email: string; password: string; }

type PublicUser = Pick<User, 'id' | 'name' | 'email'>;
// { id: number; name: string; email: string }
// password is excluded — safe to send to client

Omit<T, K>

Crée un type dont les propriétés indiquées ont été supprimées. C'est l'inverse de Pick.

type UserWithoutPassword = Omit<User, 'password'>;
// { id: number; name: string; email: string }

type CreateUserDto = Omit<User, 'id'>; // new users don't have an id yet

Readonly<T>

Rend toutes les propriétés en lecture seule, ce qui empêche leur réaffectation. Utile pour les objets de configuration et les données immuables.

const config: Readonly<Config> = {
  host: 'localhost',
  port: 3000,
};
config.port = 8080; // Error: cannot assign to 'port' because it is read-only

Record<K, V>

Crée un type d'objet dont les clés sont de type K et les valeurs de type V. C'est plus clair qu'une signature d'index brute lorsque les clés forment une union connue.

type Role = 'admin' | 'editor' | 'viewer';
type Permissions = Record<Role, { canEdit: boolean; canDelete: boolean }>;

const perms: Permissions = {
  admin:  { canEdit: true,  canDelete: true  },
  editor: { canEdit: true,  canDelete: false },
  viewer: { canEdit: false, canDelete: false },
};

ReturnType<T> et Parameters<T>

Extraient le type de retour et les types des paramètres d'un type de fonction. C'est utile lorsque vous ne pouvez pas importer un type, mais devez reproduire la signature d'une fonction.

function fetchUser(id: number) {
  return { id, name: 'Alice' };
}

type UserResult = ReturnType<typeof fetchUser>; // { id: number; name: string }
type FetchParams = Parameters<typeof fetchUser>; // [id: number]

Awaited<T>

Retire l'enveloppe d'un type Promise pour obtenir le type de sa valeur résolue. Utile lorsque vous travaillez avec des fonctions asynchrones.

type UserResponse = Awaited<ReturnType<typeof fetchUser>>;
// Resolves both the function return and the Promise

async function load() { return { user: { name: 'Alice' } }; }
type Loaded = Awaited<ReturnType<typeof load>>; // { user: { name: string } }

Extract<T, U> et Exclude<T, U>

Extract<T, U> conserve uniquement les types de T qui peuvent être affectés à U. Exclude<T, U> les supprime.

type A = 'a' | 'b' | 'c' | 'd';
type BC = Extract<A, 'b' | 'c' | 'e'>; // 'b' | 'c'
type AD = Exclude<A, 'b' | 'c'>;       // 'a' | 'd'

// NonNullable removes null and undefined:
type T = string | null | undefined;
type NonNull = NonNullable<T>; // string

Composer des types utilitaires

Les types utilitaires peuvent être composés pour créer des types précis.

type UpdatePayload<T> = Partial<Omit<T, 'id' | 'createdAt'>>;
// Use for PATCH endpoints — omit immutable fields, make rest optional

function patch(id: string, data: UpdatePayload<User>) {
  // data can have any subset of mutable user fields
}

Vérification rapide

Quel type utilitaire supprime les clés indiquées d'une interface ?

Récapitulatif : types utilitaires

Partial rend tous les champs facultatifs. Required supprime les modificateurs facultatifs. Pick conserve les clés sélectionnées. Omit supprime les clés sélectionnées. Readonly empêche les modifications. Record associe des clés d'union à des types de valeurs. ReturnType et Parameters extraient les types d'une fonction. Composez les utilitaires pour créer des types DTO précis.

Questions Fréquemment Posées

La leçon « Types utilitaires : Partial, Required, Pick et Omit » est-elle gratuite ?

Oui — le texte complet de « Types utilitaires : Partial, Required, Pick et Omit » 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 Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Types utilitaires : Partial, Required, Pick et Omit » ?

Transformez des types existants avec les types utilitaires intégrés afin de créer des variantes sans duplication. Tu pratiques Frontend 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 Frontend Academy ?

Aucune expérience préalable n'est requise. Frontend 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 2 sur 4.

Combien de temps prend la leçon « Types utilitaires : Partial, Required, Pick et Omit » ?

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 Frontend Academy ?

Oui. Chaque leçon Frontend 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

  1. Génériques : T extends et contraintes
  2. Types utilitaires : Partial, Required, Pick et Omit
  3. Types mappés et types conditionnels
  4. Rétrécissement : typeof, instanceof et unions discriminées
← Retour à Frontend Academy