Comment créer un object basé sur une définition de fichier d’interface dans TypeScript?

Si vous créez la variable “modal” ailleurs, et que vous voulez dire à TypeScript que tout sera fait, vous utiliseriez:

 declare var modal: IModal; 

Si vous voulez créer une variable qui sera réellement une instance de IModal dans TypeScript, vous devrez la définir entièrement.

 var modal: IModal = { content: '', form: '', href: '', $form: null, $message: null, $modal: null, $submits: null }; 

Ou mentir, avec une assertion de type, mais vous perdrez la sécurité du type car vous serez désormais indéfini dans des endroits inattendus, et éventuellement des erreurs d’exécution, lors de l’access à modal.content et ainsi de suite.

 var modal = {}; 

Exemple classe

 class Modal implements IModal { content: ssortingng; form: ssortingng; href: ssortingng; $form: JQuery; $message: JQuery; $modal: JQuery; $submits: JQuery; } var modal = new Modal(); 

Vous pensez peut-être que “c’est vraiment une duplication de l’interface” – et vous avez raison. Si la classe Modal est la seule implémentation de l’interface IModal, vous pouvez vouloir supprimer complètement l’interface et utiliser …

 var modal: Modal = new Modal(); 

Plutôt que

 var modal: IModal = new Modal(); 

Si vous voulez un object vide d’une interface, vous pouvez juste faire:

 var modal = {}; 

L’avantage d’utiliser des interfaces à la place des classes pour structurer les données est que si vous ne disposez d’aucune méthode sur la classe, celle-ci apparaîtra comme une méthode vide dans JS compilé. Exemple:

 class TestClass { a: number; b: ssortingng; c: boolean; } 

comstack en

 var TestClass = (function () { function TestClass() { } return TestClass; })(); 

qui ne porte aucune valeur. Les interfaces, quant à elles, ne s’affichent pas du tout dans JS, tout en offrant les avantages de la structuration des données et de la vérification de type.

Si vous utilisez React, l’parsingur va s’étouffer avec la syntaxe de dissortingbution traditionnelle, de sorte qu’une alternative a été introduite pour être utilisée dans les fichiers .tsx

 let a = {} as MyInterface; 

https://www.typescriptlang.org/docs/handbook/jsx.html

Je pense que vous avez essentiellement cinq options différentes pour le faire. Choisir parmi eux pourrait être facile selon l’objective que vous souhaitez atteindre.

Le meilleur moyen dans la plupart des cas d’ utiliser une classe et de l’instancier , car vous utilisez TypeScript pour appliquer la vérification de type.

 interface IModal { content: ssortingng; form: ssortingng; //... //Extra foo: (bar: ssortingng): void; } class Modal implements IModal { content: ssortingng; form: ssortingng; foo(param: ssortingng): void { } } 

Même si d’autres méthodes offrent des moyens plus faciles de créer un object à partir d’une interface, vous devriez envisager de séparer votre interface si vous utilisez votre object pour différentes questions, sans provoquer de sur-séparation de l’interface:

 interface IBehaviour { //Extra foo(param: ssortingng): void; } interface IModal extends IBehaviour{ content: ssortingng; form: ssortingng; //... } 

D’un autre côté, par exemple, lors du test d’unité de votre code (si vous n’utilisez pas souvent la séparation des préoccupations), vous pourrez peut-être accepter les inconvénients pour des raisons de productivité. Vous pouvez appliquer d’autres méthodes pour créer des simulations principalement pour les grandes interfaces tierces * .d.ts. Et cela peut être pénible de toujours implémenter des objects anonymes complets pour chaque interface énorme.

Sur ce chemin, votre première option est de créer un object vide :

  var modal = {}; 

Deuxièmement, réaliser pleinement la partie obligatoire de votre interface . Il peut être utile que vous appeliez des bibliothèques JavaScript tierces, mais je pense que vous devriez plutôt créer une classe, comme avant:

 var modal: IModal = { content: '', form: '', //... foo: (param: ssortingng): void => { } }; 

Troisièmement, vous pouvez créer seulement une partie de votre interface et créer un object anonyme , mais de cette manière, vous êtes responsable de l’exécution du contrat.

 var modal: IModal = { foo: (param: ssortingng): void => { } }; 

Résumant ma réponse même si les interfaces sont facultatives, car elles ne sont pas transposées en code JavaScript, TypeScript est là pour fournir un nouveau niveau d’abstraction, s’il est utilisé avec sagesse et cohérence. Je pense, juste parce que vous pouvez les écarter dans la plupart des cas de votre propre code, vous ne devriez pas.

Tu peux faire

 var modal = {} as IModal 

Comme je n’ai pas trouvé une réponse égale en haut et que ma réponse est différente, je le fais:

modal: IModal = {}

En utilisant votre interface, vous pouvez faire

 class Modal() { constructor(public iModal: IModal) { //You now have access to all your interface variables using this.iModal object, //you don't need to define the properties at all, constructor does it for you. } }