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'accès modal.contentet ainsi de suite (les propriétés qui, selon le contrat, seront là).
Vous pouvez penser "hé 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 supprimer complètement l'interface et utiliser ...
Merci. J'espérais éviter d'avoir à définir tout le contenu modal au départ. Serait-il plus facile si au lieu d'une interface, je définissais Modal comme une classe avec des propriétés et utilisais ensuite new et un constructeur pour configurer toutes les valeurs initiales?
1
Oui - vous pouvez définir une classe et vous ne devrez créer de nouvelles instances que lorsque vous en aurez besoin. Avez-vous besoin d'un exemple?
Fenton
2
J'ai ajouté un exemple et une note sur l'interface.
Fenton
21
var modal = <IModal>{};c'est ce que je cherchais ;-) merci!
Legends
5
Pour info, il vaut mieux utiliser {} as IModalplutôt que <IModal>{}. Il supprime une ambiguïté dans la grammaire du langage lors de l'utilisation d' <foo>assertions de style dans JSX. Lisez plus . Et bien sûr, utilisez letou constau lieu de var.
Alex Klaus
191
Si vous voulez un objet vide d'une interface, vous pouvez faire simplement:
var modal =<IModal>{};
L'avantage d'utiliser des interfaces à la place des classes pour structurer les données est que si vous n'avez aucune méthode sur la classe, elle s'affichera dans JS compilé comme une méthode vide. Exemple:
qui n'a aucune valeur. Les interfaces, en revanche, n'apparaissent pas du tout dans JS tout en offrant les avantages de la structuration des données et de la vérification de type.
`Pour ajouter au commentaire ci-dessus. Pour appeler une fonction "updateModal (IModal modalInstance) {}", vous pouvez créer une instance en ligne de l'interface 'IModal', comme ceci: // du code ici, où la fonction updateModal et IModal sont accessibles: updateModal (<IModal> {// cette ligne crée un contenu d'instance: '', formulaire: '', href: '', $ form: null, $ message: null, $ modal: null, $ submits: null}); // Complétez votre code `
Sunny
en utilisant var modal= <abc>{}nous avons juste assigné un modal de type abc d'objet vide mais où avons-nous déclaré un type de modal? j'utilise typescript6.
Pardeep Jain
Cela n'a pas fonctionné pour moi, j'ai dû initialiser tout l'objet comme indiqué dans la réponse acceptée.
Rahul Sonwanshi
52
Si vous utilisez React, l'analyseur s'étouffera avec la syntaxe de distribution traditionnelle, donc une alternative a été introduite pour une utilisation dans les fichiers .tsx
Je pense que vous avez essentiellement cinq options différentes pour le faire. Choisir parmi eux pourrait être facile selon l'objectif que vous souhaitez atteindre.
La meilleure façon dans la plupart des cas d' utiliser une classe et de l'instancier , car vous utilisez TypeScript pour appliquer la vérification de type.
Même si d'autres méthodes offrent des moyens plus faciles de créer un objet à partir d'une interface, vous devriez envisager de séparer votre interface , si vous utilisez votre objet pour différentes questions, et cela ne provoque pas une surségrégation d'interface:
D'un autre côté, par exemple lors des tests unitaires de votre code (si vous n'appliquez pas fréquemment la séparation des problèmes), vous pouvez être en mesure d'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 il pourrait être difficile de toujours implémenter des objets anonymes complets pour chaque énorme interface.
Sur ce chemin, votre première option est de créer un objet vide :
var modal =<IModal>{};
Deuxièmement, pour 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: string):void=>{}};
Troisièmement, vous pouvez créer juste une partie de votre interface et créer un objet anonyme , mais de cette façon, vous êtes responsable de l'exécution du contrat
var modal:IModal=<any>{
foo:(param: string):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 que ce n'est pas parce que vous pouvez les rejeter dans la plupart des cas de votre propre code.
classModal(){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.}}
De nombreuses solutions publiées jusqu'à présent utilisent des assertions de type et ne génèrent donc pas d'erreurs de compilation si les propriétés d'interface requises sont omises dans l'implémentation.
Pour ceux intéressés par d'autres solutions robustes et compactes :
Option 1: instancier une classe anonyme qui implémente l'interface:
var modal = <IModal>{};
c'est ce que je cherchais ;-) merci!{} as IModal
plutôt que<IModal>{}
. Il supprime une ambiguïté dans la grammaire du langage lors de l'utilisation d'<foo>
assertions de style dans JSX. Lisez plus . Et bien sûr, utilisezlet
ouconst
au lieu devar
.Si vous voulez un objet vide d'une interface, vous pouvez faire simplement:
L'avantage d'utiliser des interfaces à la place des classes pour structurer les données est que si vous n'avez aucune méthode sur la classe, elle s'affichera dans JS compilé comme une méthode vide. Exemple:
compile en
qui n'a aucune valeur. Les interfaces, en revanche, n'apparaissent pas du tout dans JS tout en offrant les avantages de la structuration des données et de la vérification de type.
la source
var modal= <abc>{}
nous avons juste assigné un modal de type abc d'objet vide mais où avons-nous déclaré un type de modal? j'utilise typescript6.Si vous utilisez React, l'analyseur s'étouffera avec la syntaxe de distribution traditionnelle, donc une alternative a été introduite pour une utilisation dans les fichiers .tsx
https://www.typescriptlang.org/docs/handbook/jsx.html
la source
Je pense que vous avez essentiellement cinq options différentes pour le faire. Choisir parmi eux pourrait être facile selon l'objectif que vous souhaitez atteindre.
La meilleure façon dans la plupart des cas d' utiliser une classe et de l'instancier , car vous utilisez TypeScript pour appliquer la vérification de type.
Même si d'autres méthodes offrent des moyens plus faciles de créer un objet à partir d'une interface, vous devriez envisager de séparer votre interface , si vous utilisez votre objet pour différentes questions, et cela ne provoque pas une surségrégation d'interface:
D'un autre côté, par exemple lors des tests unitaires de votre code (si vous n'appliquez pas fréquemment la séparation des problèmes), vous pouvez être en mesure d'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 il pourrait être difficile de toujours implémenter des objets anonymes complets pour chaque énorme interface.
Sur ce chemin, votre première option est de créer un objet vide :
Deuxièmement, pour 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:
Troisièmement, vous pouvez créer juste une partie de votre interface et créer un objet anonyme , mais de cette façon, vous êtes responsable de l'exécution du contrat
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 que ce n'est pas parce que vous pouvez les rejeter dans la plupart des cas de votre propre code.
la source
Tu peux faire
la source
Puisque je n'ai pas trouvé de réponse égale en haut et ma réponse est différente. Je fais:
la source
En utilisant votre interface, vous pouvez faire
la source
Voici une autre approche:
Vous pouvez simplement créer un objet convivial ESLint comme celui-ci
Ou une instance par défaut basée sur l'interface et avec des valeurs par défaut sensibles, le cas échéant
Ensuite, des variations de l'instance par défaut simplement en remplaçant certaines propriétés
la source
De nombreuses solutions publiées jusqu'à présent utilisent des assertions de type et ne génèrent donc pas d'erreurs de compilation si les propriétés d'interface requises sont omises dans l'implémentation.
Pour ceux intéressés par d'autres solutions robustes et compactes :
Option 1: instancier une classe anonyme qui implémente l'interface:
Option 2: créer une fonction utilitaire:
la source
Vous pouvez définir des valeurs par défaut à l'aide de
Class
.Sans constructeur de classe:
Avec Class Constructor
la source