Zdjęcie w tle
Magiczny_Magik

Magiczny_Magik

Specjalista
  • 11wpisy
  • 31komentarzy

Zostań Patronem Hejto i odblokuj dodatkowe korzyści tylko dla Patronów

  • Włączona możliwość zarabiania na swoich treściach
  • Całkowity brak reklam na każdym urządzeniu
  • Oznaczenie w postaci rogala , który świadczy o Twoim wsparciu
  • Wcześniejszy dostęp, do wybranych funkcji na Hejto
Zostań Patronem
Zastanawiam się czy kontynuować serię wpisów na temat mniej lub bardziej znanych funkcji i tricków TypeScripta. Ktoś to faktycznie czyta i uważa za przydatne czy robię to tylko dla sztuki? (° ͜ʖ °)
#typescript

Więcej?

60 Głosów
kocurio

Fajne rzeczy Ostatnio zacząłem na poważnie używać TS, poprzednio mi się wydawało, że to typowanie strasznie spowalnia pisanie, ale jak od początku to dobrze ogarniasz to rzeczywiście potem jest dużo łatwiej przy podpowiadaniu kodu albo przy refaktoryzowaniu jakichś elementów. Proponowałbym też zrobienie jakiegoś autorskiego taga, żeby potem łatwo dało się znaleźć wszystkie te triki

LatarniaDiogenesa

@Magiczny_Magik wołaj lub stwórz własny tak do obserwowania

callmejamone

@Magiczny_Magik czyta, czyta. Wincyj!

Zaloguj się aby komentować

Przydatna informacja na dziś: w TypeScript możemy deklarować dodatkowe pola na obiektach globalnych oraz modyfikować kształt interfejsów udostępnianych przez zewnętrzne biblioteki.
Czasami zdarza się, że jakiś skrypt jest dodawany przez tag <script>. Na domiar złego, ten skrypt tworzy obiekt globalny, którego nasz kompilator nie jest w stanie znaleźć. Co możemy w tym przypadku zrobić?
Sprawa jest dość prosta - wystarczy użyć opcji Declaration Merging, a konkretnie Global Augmentation. Za pomocą słów kluczowych `declare global` możemy wpływać na globalne interfejsy i dodawać do nich nowe pola.
Podobny mechanizm działa także dla modułów, tzn. możemy "naprawiać" deklaracje typów zewnętrznych bibliotek. W takim scenariuszu sprawdzi się Module Augmentation.
Więcej informacji znajdziecie tutaj.
#typescript

Zaloguj się aby komentować

Sztuczka na dziś: operator satisfies pozwala nam zdefiniować oczekiwany typ danych, a następnie zawęzić go na podstawie tego, w jaki sposób jest używany.
Powyższy opis nie jest najlepszej jakości, ale trudno wytłumaczyć coś, co najlepiej prezentuje się w praktyce. Wyobraźmy sobie, że definiujemy drzewo ścieżek w naszej aplikacji. Moglibyśmy je zobrazować poprzez: type Routes = Record<string, { path: string; children?: Routes }>. Niestety, taka definicja umożliwia odwoływanie się do nieistniejących ścieżek.
Problem można obejść stosując casting przez operator as, ale wtedy będzie można dodać do naszego drzewa wpisy, które nie będą spełniać warunków postawionych przez nasz typ.
Najlepszym wyjściem jest użycie operatora satisfies, który prawidłowo zawęzi nasz typ i nie pozwoli na odwoływanie się do nieistniejących ścieżek, a także będzie trzymał pieczę nad tym, aby każdy wpis spełniał postawione przez typ warunki.
TypeScript Playground
#typescript
M4G33k

@Magiczny_Magik eh tyle razy robiłem podejście do tego typescriptu i łeb mi puchnie

Zaloguj się aby komentować

Sztuczka na dziś: denerwuje Cię, że przy filtrowaniu tablicy jej typ nie zmienia się? Wystarczy, że użyjesz Type Guard!
Niestety, TypeScript nie jest w stanie wykryć, że warunek postawiony przez nas w czasie filtrowania spowoduje zmianę typu tablicy. Możemy mu w tym pomóc stosując Type Guard i informując kompilator, że jeżeli funkcja filtrująca zwróci wartość true to zwrócona wartość będzie danego typu.
Type Guard używa następującej składni: (item): item is number => typeof item === 'number'
TypeScript Playground
#typescript
Kamil.js

@Magiczny_Magik fajne, dzięki

Zaloguj się aby komentować

Ciekawostka na dziś: w TypeScript możemy modyfikować sygnaturę klasy za pomocą interfejsów i namespaceów.
Jeżeli chcemy zadeklarować nową metodę na naszej klasie bez jej modyfikacji to możemy zdefiniować interfejs o tej samej nazwie i umieścić w nim sygnaturę metody. TypeScript połączy sygnatury i voila! Metody statyczne możemy również dodawać w podobny sposób, ale w tym przypadku należy użyć namespace.
Po co? Teoretycznie pozwala to na użycie wzorca Extension Method obecnego w np. Kotlinie czy C#.
TypeScript Playground
#typescript
szczekoscisk

Nie lepiej rozszerzyć klasę (*przez dziedziczenie)? Jest to popularny "zabieg" i obcy czytający kod szybciej się połapie.

elenath

@Magiczny_Magik Zaskakuje mnie, że nadal mnie zaskakuje ten język dzięki za ciekawostkę.

Zaloguj się aby komentować