Créer un objet selon une interface TypeScript : guide complet avec exemples

Comment créer un objet basé sur une interface en TypeScript : explication complète avec code

Avez-vous déjà rencontré une situation où TypeScript vous « crie » littéralement dessus parce que vous essayez de créer un objet qui ne correspond pas à l'interface ? Cela vous dit quelque chose ? Si vous travaillez avec TypeScript ne serait-ce qu'une semaine, vous avez sûrement vu cette erreur :

Type '{}' is missing the following properties from type 'User': name, age

C'est l'un des problèmes les plus courants sur Stack Overflow (des dizaines de milliers de vues), et aujourd'hui nous allons le résoudre une fois pour toutes. Dans cet article, vous apprendrez comment créer un objet basé sur une interface en TypeScript, quelles sont les méthodes et quand les utiliser.

Pourquoi ce sujet est-il si important ?

TypeScript est une surcouche de JavaScript qui ajoute un typage statique. Les interfaces TypeScript sont un outil puissant pour décrire la structure des objets. Mais les débutants sont souvent confus : « J'ai déclaré une interface, mais comment créer un objet réel maintenant ? »

Sans une bonne compréhension de ce mécanisme, vous passerez des heures à déboguer ou, pire encore, vous utiliserez any — ce qui est un moyen direct de perdre tous les avantages de TypeScript.

Méthode 1 : Assignation directe (la plus simple)

La façon la plus évidente de créer un objet selon une interface TypeScript est simplement d'assigner un littéral d'objet à une variable avec le type de l'interface :

interface User {\n  name: string;\n  age: number;\n  email?: string; // champ optionnel\n}\n\n// ✅ Correct : l'objet correspond parfaitement à l'interface\nconst user: User = {\n  name: "Anna",\n  age: 28,\n  email: "anna@example.com"\n};\n\n// ✅ Également correct : le champ optionnel peut être omis\nconst userMinimal: User = {\n  name: "Ivan",\n  age: 35\n};

Cela fonctionne, mais il y a un détail : TypeScript vérifie que l'objet a TOUS les champs obligatoires. Si vous oubliez name ou age, le compilateur générera une erreur.

❌ Erreur typique des débutants

// ❌ Erreur ! Champ obligatoire 'age' manquant\nconst badUser: User = {\n  name: "Pierre"\n};

Méthode 2 : Utilisation de l'opérateur as (cast de type)

Parfois, vous devez créer un objet progressivement, par exemple en le remplissant à partir de différentes sources. Dans ces cas, vous pouvez utiliser l'opérateur as :

interface Config {\n  apiUrl: string;\n  timeout: number;\n  retries: number;\n}\n\n// Création d'un objet vide avec cast de type\nconst config = {} as Config;\n\n// On peut maintenant ajouter les champs un par un\nconfig.apiUrl = "https://api.example.com";\nconfig.timeout = 5000;\nconfig.retries = 3;\n\n// ✅ Fonctionne, mais SOYEZ PRUDENT !

⚠️ Avertissement : Cette méthode désactive la vérification de type lors de la création de l'objet. Vous pourriez accidentellement omettre un champ obligatoire et ne le découvrir qu'à l'exécution. Utilisez as uniquement lorsque vous êtes sûr que tous les champs seront remplis.

Méthode 3 : Fonction factory (recommandée)

La meilleure façon de créer un objet basé sur une interface en TypeScript est d'écrire une fonction factory. Cela offre une sécurité de type à 100 % et la possibilité de définir des valeurs par défaut :

interface Product {\n  id: number;\n  title: string;\n  price: number;\n  inStock: boolean;\n  description?: string;\n}\n\n// Fonction factory avec paramètres par défaut\nfunction createProduct(\n  id: number,\n  title: string,\n  price: number,\n  inStock: boolean = true,\n  description?: string\n): Product {\n  return {\n    id,\n    title,\n    price,\n    inStock,\n    ...(description && { description })\n  };\n}\n\n// Utilisation\nconst laptop = createProduct(1, "Ordinateur portable", 999.99);\nconst phone = createProduct(2, "Smartphone", 599.99, false, "Excellent téléphone");\n\nconsole.log(laptop); // { id: 1, title: 'Ordinateur portable', price: 999.99, inStock: true }\nconsole.log(phone)