Lub kłam, z twierdzeniem typu, ale stracisz bezpieczeństwo typu, ponieważ będziesz teraz niezdefiniowany w nieoczekiwanych miejscach i możliwe błędy w czasie wykonywania, podczas uzyskiwania dostępu modal.contenti tak dalej (właściwości, które według umowy będą dostępne).
Możesz pomyśleć „hej, to naprawdę duplikacja interfejsu” - i masz rację. Jeśli klasa Modal jest jedyną implementacją interfejsu IModal, możesz chcieć całkowicie usunąć interfejs i użyć ...
Dzięki. Miałem nadzieję, że uniknę na początku definiowania całej zawartości modalnej. Czy byłoby łatwiej, gdyby zamiast interfejsu zdefiniowałem Modal jako klasę z właściwościami, a następnie użyłem new i konstruktora do ustawienia wszystkich wartości początkowych?
1
Tak - możesz zdefiniować klasę, a wtedy będziesz musiał tworzyć nowe wystąpienia tylko wtedy, gdy ich potrzebujesz. Potrzebujesz przykładu?
Fenton
2
Dodałem przykład i notatkę na temat interfejsu.
Fenton
21
var modal = <IModal>{};tego właśnie szukałem ;-) dzięki!
Legendy,
5
Do twojej wiadomości, lepiej jest użyć {} as IModalniż <IModal>{}. Usuwa niejednoznaczność w gramatyce języka podczas używania <foo>asercji stylu w JSX. Czytaj dalej . I oczywiście użyj letlub constzamiast var.
Alex Klaus
191
Jeśli chcesz pusty obiekt interfejsu, możesz po prostu:
var modal =<IModal>{};
Zaletą używania interfejsów zamiast klas do strukturyzacji danych jest to, że jeśli nie masz żadnych metod w klasie, będzie ona wyświetlana w skompilowanym JS jako pusta metoda. Przykład:
który nie ma żadnej wartości. Z drugiej strony interfejsy w ogóle nie pojawiają się w JS, a jednocześnie zapewniają zalety strukturyzacji danych i sprawdzania typów.
`Aby dodać do powyższego komentarza. Aby wywołać funkcję „updateModal (IModal modalInstance) {}”, możesz utworzyć wbudowaną instancję interfejsu „IModal”, w ten sposób: // jakiś kod tutaj, gdzie dostępna jest funkcja updateModal i IModal: updateModal (<IModal> {// ten wiersz tworzy treść instancji: '', form: '', href: '', $ form: null, $ message: null, $ modal: null, $ submits: null}); // uzupełnij kod `
Sunny
za pomocą var modal= <abc>{}właśnie przypisaliśmy modal typu abc pustego obiektu, ale gdzie zadeklarowaliśmy typ modalu? Używam maszynopisu 6.
Pardeep Jain
To nie zadziałało. Musiałem zainicjować cały obiekt, jak podano w zaakceptowanej odpowiedzi.
Rahul Sonwanshi
52
Jeśli używasz React, parser dusi się w tradycyjnej składni rzutowania, dlatego wprowadzono alternatywę dla plików .tsx
Nawet jeśli inne metody oferują łatwiejsze sposoby tworzenia obiektu z interfejsu, powinieneś rozważyć podzielenie interfejsu na siebie, jeśli używasz swojego obiektu do różnych spraw i nie powoduje to nadmiernej segregacji interfejsu:
Z drugiej strony, na przykład podczas testowania jednostkowego kodu (jeśli często nie stosujesz separacji problemów), możesz zaakceptować wady ze względu na produktywność. Możesz zastosować inne metody tworzenia makiet głównie dla dużych interfejsów * .d.ts innych firm. I zawsze może być problem z implementacją w pełni anonimowych obiektów dla każdego ogromnego interfejsu.
Na tej ścieżce pierwszą opcją jest utworzenie pustego obiektu :
var modal =<IModal>{};
Po drugie, aby w pełni zrealizować obowiązkową część interfejsu . Może to być przydatne, niezależnie od tego, czy wywołujesz biblioteki JavaScript innych firm, ale myślę, że powinieneś utworzyć klasę, tak jak wcześniej:
var modal:IModal={
content:'',
form:'',//...
foo:(param: string):void=>{}};
Po trzecie, możesz stworzyć tylko część swojego interfejsu i stworzyć anonimowy obiekt , ale w ten sposób jesteś odpowiedzialny za wykonanie umowy
var modal:IModal=<any>{
foo:(param: string):void=>{}};
Podsumowując moją odpowiedź, nawet jeśli interfejsy są opcjonalne, ponieważ nie są transponowane do kodu JavaScript, TypeScript zapewnia nowy poziom abstrakcji, jeśli jest używany mądrze i konsekwentnie. Myślę, że tylko dlatego, że możesz usunąć je w większości przypadków z własnego kodu, nie powinieneś.
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.}}
Wiele z dotychczas opublikowanych rozwiązań używa asercji typu i dlatego nie zgłaszają błędów kompilacji, jeśli wymagane właściwości interfejsu zostaną pominięte w implementacji.
Dla osób zainteresowanych innymi solidnymi, kompaktowymi rozwiązaniami :
Opcja 1: Utwórz anonimową klasę, która implementuje interfejs:
var modal = <IModal>{};
tego właśnie szukałem ;-) dzięki!{} as IModal
niż<IModal>{}
. Usuwa niejednoznaczność w gramatyce języka podczas używania<foo>
asercji stylu w JSX. Czytaj dalej . I oczywiście użyjlet
lubconst
zamiastvar
.Jeśli chcesz pusty obiekt interfejsu, możesz po prostu:
Zaletą używania interfejsów zamiast klas do strukturyzacji danych jest to, że jeśli nie masz żadnych metod w klasie, będzie ona wyświetlana w skompilowanym JS jako pusta metoda. Przykład:
kompiluje się w
który nie ma żadnej wartości. Z drugiej strony interfejsy w ogóle nie pojawiają się w JS, a jednocześnie zapewniają zalety strukturyzacji danych i sprawdzania typów.
źródło
var modal= <abc>{}
właśnie przypisaliśmy modal typu abc pustego obiektu, ale gdzie zadeklarowaliśmy typ modalu? Używam maszynopisu 6.Jeśli używasz React, parser dusi się w tradycyjnej składni rzutowania, dlatego wprowadzono alternatywę dla plików .tsx
https://www.typescriptlang.org/docs/handbook/jsx.html
źródło
Myślę, że masz w zasadzie pięć różnych opcji . Wybór spośród nich może być łatwy w zależności od celu, który chcesz osiągnąć.
W większości przypadków najlepszym sposobem jest użycie klasy i utworzenie jej instancji , ponieważ do sprawdzania typu używasz TypeScript.
Nawet jeśli inne metody oferują łatwiejsze sposoby tworzenia obiektu z interfejsu, powinieneś rozważyć podzielenie interfejsu na siebie, jeśli używasz swojego obiektu do różnych spraw i nie powoduje to nadmiernej segregacji interfejsu:
Z drugiej strony, na przykład podczas testowania jednostkowego kodu (jeśli często nie stosujesz separacji problemów), możesz zaakceptować wady ze względu na produktywność. Możesz zastosować inne metody tworzenia makiet głównie dla dużych interfejsów * .d.ts innych firm. I zawsze może być problem z implementacją w pełni anonimowych obiektów dla każdego ogromnego interfejsu.
Na tej ścieżce pierwszą opcją jest utworzenie pustego obiektu :
Po drugie, aby w pełni zrealizować obowiązkową część interfejsu . Może to być przydatne, niezależnie od tego, czy wywołujesz biblioteki JavaScript innych firm, ale myślę, że powinieneś utworzyć klasę, tak jak wcześniej:
Po trzecie, możesz stworzyć tylko część swojego interfejsu i stworzyć anonimowy obiekt , ale w ten sposób jesteś odpowiedzialny za wykonanie umowy
Podsumowując moją odpowiedź, nawet jeśli interfejsy są opcjonalne, ponieważ nie są transponowane do kodu JavaScript, TypeScript zapewnia nowy poziom abstrakcji, jeśli jest używany mądrze i konsekwentnie. Myślę, że tylko dlatego, że możesz usunąć je w większości przypadków z własnego kodu, nie powinieneś.
źródło
Możesz to zrobić
źródło
Ponieważ nie znalazłem równej odpowiedzi na górze, a moja odpowiedź jest inna. Ja robię:
źródło
Za pomocą interfejsu możesz to zrobić
źródło
Oto inne podejście:
Możesz po prostu utworzyć taki przyjazny obiekt ESLint
Lub instancja domyślna oparta na interfejsie i z rozsądnymi ustawieniami domyślnymi, jeśli takie istnieją
Następnie odmiany domyślnego wystąpienia po prostu przesłaniając niektóre właściwości
źródło
Wiele z dotychczas opublikowanych rozwiązań używa asercji typu i dlatego nie zgłaszają błędów kompilacji, jeśli wymagane właściwości interfejsu zostaną pominięte w implementacji.
Dla osób zainteresowanych innymi solidnymi, kompaktowymi rozwiązaniami :
Opcja 1: Utwórz anonimową klasę, która implementuje interfejs:
Opcja 2: Utwórz funkcję narzędzia:
źródło