Typescript

Czym jest TypeScript i jakie są jego główne zalety?

TypeScript to nadzbiór JavaScriptu, który dodaje statyczne typowanie.

Główne zalety to:

- Lepsza czytelność i utrzymywalność kodu.

- Wykrywanie błędów na etapie kompilacji.

- Lepsze wsparcie IDE (np. autouzupełnianie).

Jakie są podstawowe typy w TypeScript?

- string - tekst, np. let name: string = "John";

- number - liczby, np. let age: number = 30;

- boolean - true/false, np. let isActive: boolean = true;

- array - tablice, np. let numbers: number[] = [1, 2, 3];

- tuple - tablica o stałej długości, np. let user: [string, number] = ["John", 30];

- any - dowolny typ (unikać, jeśli to możliwe).

Czym różni się interface od type w TypeScript?

Oba służą do definiowania kształtu obiektów, ale mają kluczowe różnice:

1. Rozszerzanie:

interface używa extends.

type używa przecięcia (&).

2. Łączenie (merging):

interface wspiera automatyczne łączenie (można definiować wielokrotnie).

type nie wspiera łączenia.

3. Unie i przecięcia:

Tylko type może definiować unie (|) i przecięcia (&).

4. Typy prymitywne:

Tylko type może definiować typy prymitywne (np. string).

5. Użycie w klasach:

Zarówno interface, jak i type mogą być implementowane przez klasy.

Kiedy używać interface, a kiedy type?

Używaj interface, gdy:

Definiujesz kształt obiektu.

Chcesz korzystać z automatycznego łączenia (merging).

Pracujesz z klasami i implementacją interfejsów.

Używaj type, gdy:

Definiujesz unie, przecięcia lub bardziej złożone typy.

Potrzebujesz typów prymitywnych lub funkcji.

Jak działa dziedziczenie w TypeScript?

Dziedziczenie w TypeScript pozwala na tworzenie hierarchii klas, gdzie klasa potomna (subclass) dziedziczy właściwości i metody klasy bazowej (superclass). Jest to realizowane za pomocą słowa kluczowego extends.

Klasa potomna dziedziczy wszystkie właściwości i metody klasy bazowej.

Jakie są modyfikatory dostępu

public: Właściwości/metody dostępne wszędzie.

protected: Właściwości/metody dostępne w klasie bazowej i potomnych.

private: Właściwości/metody dostępne tylko w klasie bazowej.

Co to są generyki (generics) i do czego służą?

Generyki pozwalają tworzyć funkcje, klasy lub interfejsy, które działają z różnymi typami.

Jak działa enum w TypeScript?

enum to sposób na definiowanie zestawu nazwanych stałych

Czym rózni się enum od const

enum:

Tworzy nowy typ z zestawem nazwanych stałych.

Może być używany zarówno jako wartość, jak i typ.

Jest kompilowany do obiektu JavaScript.

const:

Definiuje stałą wartość, która nie może być zmieniona.

Nie tworzy nowego typu.

Jest usuwany podczas kompilacji (nie ma śladu w JavaScript).

Kiedy używać?

enum: Używaj, gdy potrzebujesz typu z zestawem stałych.

const: Używaj, gdy chcesz zdefiniować stałe wartości bez tworzenia typu.

Co to jest type assertion i jak go używać?

Type assertion to sposób na rzutowanie typu, gdy TypeScript nie może go wywnioskować

Jak działa dekorator w TypeScript?

Dekoratory to funkcje modyfikujące klasy, metody, właściwości lub parametry. Są używane do dodawania metadanych, logowania, walidacji itp. Wymagają włączenia experimentalDecorators w tsconfig.json.

Podsumowanie:

Dekoratory modyfikują klasy, metody, właściwości lub parametry.

Używane w frameworkach (np. Angular).

Wymagają experimentalDecorators.

Co to jest readonly i jak go używać?

readonly oznacza, że właściwość może być przypisana tylko raz (np. w konstruktorze)

Jak działa keyof w TypeScript?

keyof zwraca unię kluczy danego typu:

typescript

Co to jest utility type i podaj przykłady.

Utility types to wbudowane typy ułatwiające manipulację typami. Przykłady:

Partial - tworzy typ z opcjonalnymi właściwościami.

Pick

Omit

Jak działa never w TypeScript?

never oznacza wartość, która nigdy nie występuje, np. w funkcjach, które zawsze rzucają wyjątek

Jakie są różnice między == a === w TypeScript?

== - porównuje wartości z konwersją typów.

=== - porównuje wartości bez konwersji typów (zalecane)

Jak działa this w TypeScript?

this odnosi się do bieżącego kontekstu. W TypeScript można jawnie określić typ this

Jakie są najlepsze praktyki w TypeScript?

Unikaj typu any:any wyłącza sprawdzanie typów, co prowadzi do utraty korzyści TypeScripta. Zamiast tego używaj konkretnych typów lub generyków.

Używaj strict mode:Włączenie strict w tsconfig.json wymusza ścisłe sprawdzanie typów, co pomaga unikać błędów, takich jak null/undefined czy niejawna obsługa typów.

Korzystaj z interfejsów i typów zamiast bezpośrednich adnotacji:Interfejsy (interface) i typy (type) zwiększają czytelność i umożliwiają ponowne wykorzystanie definicji typów w całej aplikacji.

Pisz testy jednostkowe:Testy jednostkowe zapewniają, że kod działa poprawnie po zmianach, a TypeScript pomaga w pisaniu bardziej niezawodnych testów dzięki statycznemu typowaniu.

Co znaczy as const na końcu const w TypeScript?

as const oznacza, że wartość jest stała (immutable) i jej typ jest dokładnie taki, jak zadeklarowany (bez rozszerzania typów).

Kiedy używać as const?

Gdy chcesz, aby typy były dokładne (literalne).

Gdy chcesz, aby obiekt lub tablica były niemutowalne (readonly).

Co to jest namespace w TypeScript?

namespace grupuje powiązane klasy, interfejsy i funkcje, aby uniknąć konfliktów nazw.

Jak działa typeof w TypeScript?

typeof zwraca typ zmiennej lub właściwości

Co to jest infer w TypeScript?

infer to słowo kluczowe używane w warunkowych typach do wywnioskowania typu w trakcie analizy generyków. Pozwala na "wyciągnięcie" typu z innego typu, np. z typu zwracanego przez funkcję.

Jak działa infer?

Warunkowe typy:infer działa tylko w połączeniu z extends w warunkowych typach.

Wyciąganie typu:infer U oznacza, że TypeScript próbuje "zgadnąć" typ U na podstawie przekazanego typu.

Użycie:infer jest często używany w utility types, takich jak ReturnType, Parameters, Awaited itp.

Kiedy używać infer?

Gdy chcesz wyciągnąć typ z innego typu (np. typ zwracany przez funkcję, typ wewnątrz Promise).

Gdy tworzysz zaawansowane utility types.

Jak działa mapped types w TypeScript?

Mapped types pozwalają na tworzenie nowych typów na podstawie istniejących.

Co to jest event bubbling?

Tak, w JavaScript istnieje mechanizm o nazwie event bubbling (wynurzanie zdarzeń). Polega on na tym, że gdy zdarzenie (np. kliknięcie) zostanie wywołane na konkretnym elemencie, to najpierw obsługuje je ten element, a następnie zdarzenie "wędruje" w górę po drzewie DOM do jego rodziców, aż do obiektu window lub document. Dzięki temu zdarzenie może być obsłużone także na elementach nadrzędnych, co ułatwia zarządzanie zdarzeniami w zagnieżdżonych strukturach HTML.

W skrócie, event bubbling to propagacja zdarzenia od elementu docelowego do jego rodziców, co jest domyślnym sposobem obsługi zdarzeń w przeglądarkach. Można ją zatrzymać, używając metody event.stopPropagation() w handlerze zdarzenia, jeśli chcemy, by zdarzenie nie "bąbelkowało" dlej