Magiczny_MagikSpecjalista

Hello there! Tak jak wspominałem we wcześniejszym artykule dot. nowości w Typescript v5, organizuję w najbliższym czasie webinar na temat mechanizmu refleksji w tym wspaniałym języku. Może nie jest to wiedza, która sprawi, że Twoje życie będzie od jutra 100 razy łatwiejsze, ale z

Dobry wieczorek! Głośno w branży się zrobiło ostatnio przez TypeScript v5. Spójrzmy co tam się takiego zadziało: Decorators Spory czas temu rozpoczęły się prace nad standaryzacją dekoratorów jako elementów ECMAScript. Ekipa stojąca za TypeScriptem stwierdziła, że nadszedł czas

Dzisiaj coś krótkiego, bo dzień roboczy mi się masakrycznie przedłużył. Słowo kluczowe infer pozwala nam definiować swego rodzaju zmienne w typach warunkowych i wykorzystywać je do przeprowadzania dalszych operacji warunkowych. Możemy je też po prostu zwrócić. Przejdźmy przez

Wrzuciłem godzinę temu kolejną porcję informacji o #typescript , ale zapomniałem dodać tagów, także jeżeli ktoś obserwuje #magicznytypescript to zapraszam tutaj. (╯ ͠° ͟ʖ ͡°)╯┻━┻

Trochę zajęło mi wymyślenie tematu na dziś, ale koniec końców udało mi się wpaść na coś sensownego, co będe mógl rozwinąć jutro. Dzisiaj powiemy sobie o typach warunkowych. Kojarzycie może globalne typy takie jak NonNullable, Extract, Exclude? Dobrze się domyślacie - korzystają

Zacznijmy od tego, że system typowania w TypeScript jest strukturalny, tzn. mając dwa interfejsy o takich samych polach to według kompilatora będą one kompatybilne. W skrócie: jeżeli coś wygląda jak kaczka to musi być kaczką! Stoi to w przeciwieństwie do języków obiektowych, w których

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

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

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

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

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