jakubszpil
Szukaj

Wprowadzenie do TypeScript

📆
/
⌛29 minut czytania
TypeScript

Cześć! 👋 Słyszałeś/aś kiedyś o TypeScript? Jeśli już trochę kodujesz w JavaScript, to na pewno docenisz, jak bardzo może ułatwić życie! TypeScript to tak naprawdę JavaScript na sterydach, stworzony przez giganta Microsoft. Brzmi poważnie? Może trochę, ale w praktyce to Twój nowy najlepszy przyjaciel w programowaniu! 🧑‍🤝‍🧑

>>Spis treści

  1. Co to jest TypeScript i dlaczego warto go znać?
  2. TypeScript vs. JavaScript: Główne Różnice
  3. Dlaczego każdy programista powinien korzystać z TypeScript?
  4. TypeScript od zera: Pierwsze Kroki w Kodowaniu
  5. Podstawy Składni TypeScript: Typowanie w Praktyce!
  6. Jak używać typów w praktyce? Codzienne Scenariusze
  7. Narzędzia i Integracje: Twoi Pomocnicy w Rozwoju
  8. Częste Pułapki i Praktyczne Wskazówki: Jak Unikać Problemów?
  9. TypeScript w Projektach Open-Source i Pracy Zespołowej: Graj zespołowo!
  10. Gdzie znaleźć deklaracje typów do bibliotek JS?
  11. Gdzie szukać pomocy? Nie jesteś sam!
  12. Zadania Praktyczne: Ćwicz, ćwicz, ćwicz!
  13. Podsumowanie: Czas na TypeScript!

>>Co to jest TypeScript i dlaczego warto go znać?

Co to znaczy, że jest "nadzbiorem" JavaScriptu? To proste: każdy poprawny kod, który napiszesz w JavaScript, jest również poprawnym kodem TypeScript! 🤯 To tak, jakby TypeScript był JavaScriptem, ale z dodatkowymi supermocami.

Główna z tych supermocy to statyczne typowanie. Czym to jest? 🤔 Normalnie w JavaScript możesz przypisać cokolwiek do zmiennej, a błędy wyjdą dopiero, gdy program się uruchomi (czasem w najmniej odpowiednim momencie! 😱). TypeScript działa inaczej – sprawdza typy danych (czyli to, czy dana zmienna to liczba, tekst, czy może coś innego) już podczas pisania kodu. Dzięki temu, jeśli popełnisz błąd (np. spróbujesz dodać tekst do liczby), Twój edytor kodu od razu Cię o tym poinformuje, zanim w ogóle uruchomisz program! To jak mieć osobistego asystenta, który wyłapuje literówki i pomyłki za Ciebie! ✨

Zapamiętaj:

>>TypeScript vs. JavaScript: Główne Różnice

No dobrze, wiemy już, że TypeScript to JavaScript z bajerami. Ale jakie dokładnie są te różnice i dlaczego są one tak istotne dla każdego, kto chce pisać solidny kod? 🤔

CechaJavaScriptTypeScript
TypowanieDynamiczne (sprawdza typy w trakcie działania programu)Statyczne (sprawdza typy podczas pisania kodu/kompilacji)
BłędyCzęsto wychodzą dopiero w czasie działania (runtime errors)Wykrywane już na etapie pisania kodu (compile-time errors)
KompilacjaNie wymaga kompilacji (jest interpretowany)Wymaga kompilacji (transpilacji) do JavaScriptu
Wsparcie narzędziDobre, ale bez pełnej wiedzy o typachDoskonałe! Podpowiedzi, autouzupełnianie, refaktoryzacje na wyższym poziomie 🚀
Pliki.js (lub .jsx dla Reacta).ts (lub .tsx dla Reacta)

Kompilacja: To kluczowa sprawa! 🔑 Twój kod TypeScript (.ts) musi zostać przetłumaczony (technicznie to się nazywa transpilacja, bo to z jednego języka JavaScriptu na inną, starszą wersję JavaScriptu) na czysty JavaScript (.js), zanim przeglądarka albo Node.js będzie mogła go zrozumieć i uruchomić. To jak z przetłumaczeniem książki na inny język – najpierw tłumacz, potem czytaj. Kompilator TypeScripta (tsc) robi to błyskawicznie! ⚡️

Typowanie: To serce TypeScripta! ❤️ Dzięki niemu możesz określić, jakiego typu danych spodziewasz się w danym miejscu (np. ta zmienna zawsze będzie liczbą, ta funkcja zawsze zwróci tekst). Jeśli spróbujesz przypisać coś innego, TypeScript natychmiast Cię o tym poinformuje. W JavaScript takie błędy wychodzą na jaw dopiero, gdy użytkownik kliknie coś na stronie, co może doprowadzić do nieprzewidzianych crashy. 💥 W TypeScript błędy wyłapywane są wcześniej, co oszczędza mnóstwo czasu na debugowanie (czyli szukanie i naprawianie błędów)! 🕵️‍♀️

Lepsze wsparcie dla narzędzi: Wyobraź sobie, że Twój edytor kodu (np. super popularny VS Code) wie absolutnie wszystko o Twoim kodzie. Wie, jakie masz zmienne, jakich typów są, jakie funkcje przyjmują argumenty i co zwracają. Dzięki temu może Ci podpowiadać nazwy zmiennych, autouzupełniać kod, a nawet automatycznie refaktoryzować (czyli bezpiecznie zmieniać strukturę kodu) duże fragmenty! To jak mieć magiczną różdżkę! 🪄

>>Dlaczego każdy programista powinien korzystać z TypeScript?

Okej, TypeScript to JavaScript z typami, rozumiem. Ale czy to naprawdę jest takie "must-have"? Moja odpowiedź brzmi: ZDECYDOWANIE TAK! 🙌 Oto dlaczego:

Podsumowując, TypeScript to inwestycja w jakość, efektywność i przyszłość Twojego kodu. Warto! ✨

>>TypeScript od zera: Pierwsze Kroki w Kodowaniu

Zacznijmy naszą przygodę z TypeScriptem! Nie martw się, to prostsze niż myślisz. Potrzebujemy tylko kilku narzędzi.

>>>Instalacja: Jak zacząć swoją przygodę?

Zanim zaczniemy pisać kod, musimy zainstalować kompilator TypeScript. Najłatwiej zrobić to za pomocą npm (Node Package Manager), który jest instalowany razem z Node.js. Jeśli nie masz jeszcze Node.js, pobierz go stąd: https://nodejs.org/.

Kiedy masz już Node.js i npm, otwórz terminal (lub wiersz poleceń) i wpisz to proste polecenie:

npm install -g typescript

Co tu się dzieje?

Po instalacji możesz sprawdzić, czy wszystko poszło gładko, wpisując:

tsc --version

Jeśli zobaczysz numer wersji (np. Version 5.x.x), to znaczy, że jesteś gotowy/a do kodowania! 🎉

Alternatywa: Instalacja lokalna w projekcie Możesz też zainstalować TypeScript tylko dla konkretnego projektu. To dobra praktyka, gdy pracujesz w zespole i chcesz, żeby wszyscy używali tej samej wersji TypeScriptu.

npm install --save-dev typescript

W tym przypadku będziesz musiał/a używać npx tsc zamiast samego tsc, aby uruchomić kompilator (bo tsc nie będzie dostępne globalnie).

>>>Kompilacja: Magia przekształcania .ts w .js

Jak już wiesz, przeglądarki nie rozumieją TypeScriptu. Rozumieją tylko JavaScript. Dlatego nasz kod .ts musi zostać skompliowany (lub transpilowany) na .js. Robi to właśnie kompilator tsc.

Załóżmy, że masz plik moja-apka.ts z takim kodem:

// moja-apka.ts
let wiadomosc: string = "Cześć, świecie z TypeScript!";
console.log(wiadomosc);

Aby go skompilować, użyj polecenia w terminalu (w katalogu, gdzie jest plik moja-apka.ts):

tsc moja-apka.ts

Po wykonaniu tego polecenia, obok pliku moja-apka.ts pojawi się nowy plik o nazwie moja-apka.js, który będzie wyglądał tak:

// moja-apka.js (wygenerowany automatycznie!)
var wiadomosc = "Cześć, świecie z TypeScript!";
console.log(wiadomosc);

Widzisz? Czysty JavaScript, gotowy do uruchomienia! 🤩

>>>Konfiguracja projektu i tsconfig.json

W małych projektach kompilowanie pojedynczych plików to pestka. Ale w większych aplikacjach, gdzie masz wiele plików i folderów, ręczne kompilowanie każdego z osobna to katorga. 😩 Tu z pomocą przychodzi plik tsconfig.json! To plik konfiguracyjny, który mówi kompilatorowi TypeScripta, jak ma się zachować – jakie pliki kompilować, gdzie je umieścić, do jakiej wersji JavaScriptu konwertować i wiele, wiele więcej.

Aby wygenerować podstawowy plik tsconfig.json w swoim projekcie, przejdź do głównego katalogu projektu w terminalu i wpisz:

tsc --init

To polecenie stworzy plik tsconfig.json z domyślnymi, często używanymi ustawieniami. Otwórz go w edytorze kodu – zobaczysz mnóstwo skomentowanych opcji. Na początek skupmy się na kilku kluczowych:

{
  "compilerOptions": {
    "target": "es2016" /* Określa docelową wersję ECMAScript (JavaScript). Np. "es5", "es6" (lub "es2015"), "es2016", "esnext".  Ustawienie na "es2016" (lub nowsze) oznacza, że kompilator wygeneruje JavaScript z nowoczesną składnią. */,
    "module": "commonjs" /* Określa system modułów dla wygenerowanego JavaScriptu. "commonjs" jest popularne w Node.js, "esnext" dla nowoczesnych przeglądarek. */,
    "strict": true /* Włącza wszystkie rygorystyczne opcje sprawdzania typów. BARDZO zalecane dla większego bezpieczeństwa! 🔒 */,
    "outDir": "./dist" /* Określa katalog wyjściowy dla skompilowanych plików .js. Cały nasz skompilowany kod trafi do folderu 'dist'. */,
    "esModuleInterop": true /* Pozwala na lepszą współpracę między CommonJS i ES Modules. Warto włączyć. */,
    "forceConsistentCasingInFileNames": true /* Wymusza spójność w nazwach plików (np. `mojaKlasa.ts` vs `mojaklasa.ts`). Zapobiega błędom na różnych systemach operacyjnych. */,
    "skipLibCheck": true /* Pomija sprawdzanie typów w plikach deklaracji bibliotek (np. node_modules/@types). Przydatne, aby uniknąć błędów z typami z zewnętrznych bibliotek. */
  },
  "include": [
    "src/**/*" /* Określa, które pliki i foldery mają być kompilowane. Tutaj: wszystkie pliki we folderze 'src' i jego podfolderach. */
  ],
  "exclude": [
    "node_modules" /* Określa, które pliki i foldery mają być IGNOROWANE podczas kompilacji. */,
    "**/*.spec.ts" /* Typowy wzorzec wykluczania plików testowych */
  ]
}

Po utworzeniu pliku tsconfig.json wystarczy wpisać samo tsc w terminalu (w katalogu projektu), a kompilator automatycznie znajdzie ten plik i skompiluje wszystko zgodnie z jego wytycznymi! Magia! ✨

>>>Twój pierwszy projekt TypeScript: Hello, Types!

No to jedziemy! Stwórzmy nasz pierwszy mały projekt TypeScript.

  1. Stwórz nowy folder projektu i wejdź do niego:

    mkdir moj-pierwszy-projekt-ts
cd moj-pierwszy-projekt-ts

  2. Zainicjuj npm (stworzy plik package.json):

    npm init -y

    Flaga -y oznacza, że zgadzasz się na domyślne ustawienia i nie będziesz musiał/a klikać Enter wiele razy.

  3. Zainstaluj TypeScript jako zależność deweloperską:

    npm install --save-dev typescript

    --save-dev oznacza, że TypeScript jest potrzebny tylko podczas rozwoju, a nie w finalnej wersji aplikacji.

  4. Wygeneruj plik tsconfig.json:

    npx tsc --init

    npx pozwala uruchomić polecenie tsc zainstalowane lokalnie w projekcie (zamiast globalnie). Otwórz tsconfig.json i upewnij się, że outDir jest ustawione na ./dist i include na "src/**/*". Możesz też zmienić target na es2020 dla nowocześniejszego kodu wyjściowego.

  5. Stwórz folder src i plik index.ts w środku:

    mkdir src
# Teraz otwórz ten folder w swoim edytorze kodu (np. VS Code) i stwórz plik src/index.ts

    W src/index.ts dodaj taki kod:

    // src/index.ts
function powitajUzytkownika(imie: string, wiek: number): string {
  if (wiek < 0) {
    console.error("Wiek nie może być ujemny! 😡");
    return "Wystąpił błąd.";
  }
  return `Cześć, ${imie}! Masz ${wiek} lat. Fajnie, że jesteś! 🎉`;
}

const wiadomoscPowitalna = powitajUzytkownika("Alicja", 25);
console.log(wiadomoscPowitalna);

// Spróbujmy wywołać z błędem, zobacz co się stanie w edytorze!
// const bladWiadomosc = powitajUzytkownika("Marcin", "dwadzieścia"); // TypeScript od razu zakrzyczy! 🚨

  6. Skompiluj swój kod: W terminalu, będąc w głównym katalogu projektu, wpisz:

    npx tsc

    Powinien pojawić się nowy folder dist z plikiem index.js w środku.

  7. Uruchom skompilowany kod JavaScript:

    node dist/index.js

    Powinieneś/Powinnaś zobaczyć w konsoli: Cześć, Alicja! Masz 25 lat. Fajnie, że jesteś! 🎉.

Gratulacje! Właśnie skompilowałeś/aś i uruchomiłeś/aś swój pierwszy kod TypeScript! 🥳

>>Podstawy Składni TypeScript: Typowanie w Praktyce!

Teraz, gdy wiesz, jak ustawić projekt, zanurkujmy głębiej w sam język! Poznasz kluczowe elementy składni TypeScript, które sprawiają, że pisanie kodu jest bezpieczniejsze i przyjemniejsze.

>>>Typowanie zmiennych: Koniec z niespodziankami!

W TypeScript możesz jawnie określić, jakiego typu danych spodziewasz się po zmiennej. Robisz to za pomocą dwukropka (:) po nazwie zmiennej, a następnie nazwy typu.

// Typy podstawowe:
let wiek: number = 30; // Zmienna 'wiek' musi być liczbą
let imie: string = "Adam"; // Zmienna 'imie' musi być tekstem
let czyAktywny: boolean = true; // Zmienna 'czyAktywny' musi być wartością logiczną (prawda/fałsz)
let nicNieMa: null = null; // Zmienna 'nicNieMa' może przyjąć tylko null
let nieOkreslone: undefined = undefined; // Zmienna 'nieOkreslone' może przyjąć tylko undefined

// Co się stanie, jeśli spróbujesz przypisać zły typ?
// wiek = "trzydzieści"; // 🚨 Błąd kompilacji: Type 'string' is not assignable to type 'number'.
// imie = 123;         // 🚨 Błąd kompilacji: Type 'number' is not assignable to type 'string'.

// TypeScript potrafi też WYWNIOSKOWAĆ typ!
// Jeśli od razu przypiszesz wartość, TypeScript sam zgadnie typ.
let miasto = "Kraków"; // TypeScript wie, że to jest typu 'string'
// miasto = 123; // 🚨 Błąd, bo 'miasto' zostało wywnioskowane jako string!

// Typ 'any' - ucieczka od typowania (ale używaj ostrożnie!)
// Czasami potrzebujesz zmiennej, która może przyjąć DOWOLNY typ.
// Typ 'any' wyłącza sprawdzanie typów dla tej zmiennej.
// Używaj go tylko wtedy, gdy naprawdę wiesz, co robisz!
let dowolnyTyp: any = "Może być tekst";
dowolnyTyp = 123; // OK
dowolnyTyp = true; // OK

Wskazówka: Chociaż any daje elastyczność, to jest to trochę "oszustwo" w świecie typowania. Staraj się go unikać, chyba że naprawdę nie masz innej opcji (np. pracujesz z bardzo starym kodem JS bez typów). Celem TypeScripta jest właśnie bezpieczeństwo typów! 👮‍♂️

>>>Typowanie funkcji: Precyzyjne wejścia i wyjścia

Funkcje w TypeScript mogą być bardzo precyzyjnie typowane. Możesz określić typy dla:

// Funkcja przyjmująca dwie liczby i zwracająca liczbę
function dodaj(a: number, b: number): number {
  return a + b;
}

console.log(dodaj(5, 10)); // Wypisze: 15

// console.log(dodaj("5", 10)); // 🚨 Błąd: Argument of type 'string' is not assignable to parameter of type 'number'.

// Funkcja, która nic nie zwraca (typ 'void')
function wyswietlWiadomosc(wiadomosc: string): void {
  console.log(`Wiadomość: ${wiadomosc}`);
}

wyswietlWiadomosc("Halo, świat!"); // Wypisze: Wiadomość: Halo, świat!

// Funkcje strzałkowe (Arrow Functions) z typowaniem
const pomnoz = (x: number, y: number): number => x * y;
console.log(pomnoz(4, 5)); // Wypisze: 20

// Parametry opcjonalne (z '?' przed dwukropkiem)
// Możesz nie podawać wartości dla parametru opcjonalnego.
function przywitaj(imie: string, wiek?: number): string {
  if (wiek) {
    return `Cześć, ${imie}! Masz ${wiek} lat.`;
  }
  return `Cześć, ${imie}!`;
}
console.log(przywitaj("Kasia")); // Wypisze: Cześć, Kasia!
console.log(przywitaj("Piotr", 40)); // Wypisze: Cześć, Piotr! Masz 40 lat.

// Parametry z wartościami domyślnymi
// Jeśli nie podasz wartości dla takiego parametru, zostanie użyta wartość domyślna.
function obliczPoleKola(promien: number, PI: number = 3.14): number {
  return PI * promien * promien;
}
console.log(obliczPoleKola(5)); // Użyje PI = 3.14
console.log(obliczPoleKola(5, 3.14159)); // Użyje podanej wartości PI

Typowanie funkcji jest niezwykle przydatne, zwłaszcza gdy pracujesz w zespole. Od razu widać, czego funkcja oczekuje i co zwróci, co minimalizuje błędy i nieporozumienia. 🙌

>>>Interfejsy: Szablony dla Twoich obiektów

Interfejsy (interface) to jeden z najpotężniejszych narzędzi w TypeScript! Pozwalają one opisać strukturę obiektów. Możesz myśleć o interfejsie jak o umowie lub szablonie, który mówi: "każdy obiekt, który będzie tego typu, musi mieć takie i takie właściwości o takich i takich typach".

To super przydatne, gdy pracujesz z danymi, które mają określoną strukturę, np. dane pobrane z API (jakieś informacje o użytkowniku, produkcie itp.).

// Definiowanie interfejsu 'Uzytkownik'
interface Uzytkownik {
  imie: string; // Właściwość 'imie' musi być typu string
  wiek: number; // Właściwość 'wiek' musi być typu number
  email?: string; // Właściwość 'email' jest OPCJONALNA (znak '?'). Może być stringiem lub w ogóle jej nie być.
  jestAktywny: boolean; // Właściwość 'jestAktywny' musi być booleanem
  zainteresowania: string[]; // Właściwość 'zainteresowania' to tablica stringów
}

// Tworzenie obiektu, który SPEŁNIA interfejs 'Uzytkownik'
const nowyUzytkownik: Uzytkownik = {
  imie: "Ewa",
  wiek: 28,
  jestAktywny: true,
  zainteresowania: ["czytanie", "góry", "programowanie"],
  // 'email' jest opcjonalny, więc nie musimy go tu podawać
};

console.log(nowyUzytkownik.imie); // Wypisze: Ewa

// Tworzenie obiektu z mailem
const uzytkownikZMailem: Uzytkownik = {
  imie: "Marek",
  wiek: 35,
  email: "marek@example.com",
  jestAktywny: false,
  zainteresowania: ["gry", "muzyka"],
};

// Co się stanie, jeśli obiekt NIE SPEŁNIA interfejsu?
// const zlyUzytkownik: Uzytkownik = {
//     imie: "Kamil",
//     wiek: "dwadzieścia", // 🚨 Błąd: Type 'string' is not assignable to type 'number'.
//     jestAktywny: true
//     // 🚨 Błąd: Property 'zainteresowania' is missing in type...
// };

Interfejsy są fundamentem dla pisania czytelnego i bezpiecznego kodu, zwłaszcza w większych aplikacjach, gdzie struktury danych są skomplikowane. Używaj ich często! 💪

>>>Typy złożone: Gdy jeden typ to za mało!

Czasami potrzebujesz typów, które łączą w sobie cechy kilku innych. TypeScript oferuje świetne narzędzia do tworzenia takich "hybryd":

To tylko wierzchołek góry lodowej, jeśli chodzi o złożone typy, ale te podstawowe konstrukcje pozwolą Ci pisać bardzo elastyczny i bezpieczny kod! 🏔️

>>>Klasy i dziedziczenie: OOP z supermocami

Jeśli znasz inne języki programowania obiektowego (OOP) takie jak Java czy C#, klasy w TypeScript będą dla Ciebie znajome. TypeScript mocno wspiera koncepcje takie jak klasy, dziedziczenie, interfejsy i modyfikatory dostępu (public, private, protected), które są rozszerzeniem tego, co oferuje "czysty" JavaScript.

Klasy to szablony do tworzenia obiektów. Dziedziczenie pozwala tworzyć nowe klasy na podstawie istniejących, dziedzicząc ich właściwości i metody.

// Klasa bazowa 'Zwierze'
class Zwierze {
  // Konstruktor to specjalna metoda, która jest wywoływana podczas tworzenia nowego obiektu.
  // 'public nazwa: string' to skrót, który automatycznie deklaruje i przypisuje właściwość 'nazwa'.
  constructor(public nazwa: string) {
    this.nazwa = nazwa; // 'this' odnosi się do bieżącego obiektu klasy
  }

  // Metoda klasy
  wydajDzwiek(): void {
    console.log("Dźwięk zwierzęcia!");
  }
}

// Klasa 'Pies' dziedzicząca po 'Zwierze'
class Pies extends Zwierze {
  // Słowo kluczowe 'extends' oznacza dziedziczenie
  // Konstruktor klasy potomnej
  constructor(nazwa: string, public rasa: string) {
    super(nazwa); // 'super()' wywołuje konstruktor klasy bazowej (Zwierze)
    this.rasa = rasa;
  }

  // Nadpisanie metody z klasy bazowej (polimorfizm)
  wydajDzwiek(): void {
    console.log("Hau hau! 🐕");
  }

  aportuj(przedmiot: string): void {
    console.log(`${this.nazwa} aportuje ${przedmiot}.`);
  }
}

// Tworzenie obiektów (instancji klas)
const zwierze = new Zwierze("Ogólne zwierzę");
zwierze.wydajDzwiek(); // Wypisze: Dźwięk zwierzęcia!

const burek = new Pies("Burek", "Kundel");
burek.wydajDzwiek(); // Wypisze: Hau hau! 🐕 (nadpisana metoda!)
burek.aportuj("patyk"); // Wypisze: Burek aportuje patyk.
console.log(burek.nazwa); // Wypisze: Burek (dziedziczona właściwość)
console.log(burek.rasa); // Wypisze: Kundel (właściwość specyficzna dla Pies)

Klasy w TypeScript to potężne narzędzie do organizacji kodu w sposób obiektowy, co jest szczególnie cenne w dużych i złożonych aplikacjach. 🏗️

>>>Enumy: Łatwiejsze zarządzanie stałymi wartościami

Enumy (typy wyliczeniowe) to specjalny typ w TypeScript, który pozwala zdefiniować zbiór nazwanych stałych wartości. Są super przydatne, gdy masz ograniczony zestaw opcji do wyboru (np. statusy, dni tygodnia, kolory). Zamiast używać "magicznych stringów" ("pending", "success"), możesz użyć nazwanych, czytelnych wartości.

// Definiowanie Enum Kolor
enum Kolor {
  Czerwony, // Domyślnie 0
  Zielony, // Domyślnie 1
  Niebieski, // Domyślnie 2
}

// Użycie Enuma
const ulubionyKolor: Kolor = Kolor.Zielony;
console.log(ulubionyKolor); // Wypisze: 1 (bo Zielony to druga wartość, indeks 1)

// Możesz przypisać własne wartości (np. tekstowe)
enum StatusZamowienia {
  W_OCZEKIWANIU = "W_OCZEKIWANIU",
  W_REALIZACJI = "W_REALIZACJI",
  ZREALIZOWANE = "ZREALIZOWANE",
  ANULOWANE = "ANULOWANE",
}

let statusZamowienia: StatusZamowienia = StatusZamowienia.W_OCZEKIWANIU;
console.log(statusZamowienia); // Wypisze: W_OCZEKIWANIU

if (statusZamowienia === StatusZamowienia.W_OCZEKIWANIU) {
  console.log("Czekamy na potwierdzenie zamówienia... ⏳");
}

Enumy zwiększają czytelność kodu i minimalizują ryzyko literówek. Zamiast pisać "czerwony", piszesz Kolor.Czerwony – od razu widać, że to jeden z predefiniowanych kolorów. 👍

>>>Alias typów: Nadawanie imion złożonym typom

Czasami tworzysz złożone typy, używając unii, połączeń czy obiektów, a ich definicja staje się długa i powtarzalna. Alias typów (type) pozwala nadać tym złożonym typom prostą, zrozumiałą nazwę. To jak tworzenie własnych, niestandardowych typów!

// Złożony typ, który oznacza, że ID może być liczbą LUB stringiem
type ID = string | number;

// Użycie aliasu typu
let userId: ID = 12345; // OK, bo numer
let productId: ID = "prod-A7B"; // OK, bo string

// let orderId: ID = true; // 🚨 Błąd: Type 'boolean' is not assignable to type 'ID'.

// Alias dla obiektu
type Punkt2D = {
  x: number;
  y: number;
};

const mojPunkt: Punkt2D = { x: 10, y: 20 };
console.log(mojPunkt); // Wypisze: { x: 10, y: 20 }

// Alias dla funkcji
type FunkcjaMatematyczna = (a: number, b: number) => number;

const dodawanie: FunkcjaMatematyczna = (num1, num2) => num1 + num2;
const odejmowanie: FunkcjaMatematyczna = (num1, num2) => num1 - num2;

console.log(dodawanie(5, 3)); // Wypisze: 8
console.log(odejmowanie(10, 4)); // Wypisze: 6

Aliasy typów sprawiają, że Twój kod jest bardziej czytelny, łatwiejszy do refaktoryzacji i ogólnie przyjemniejszy w obsłudze. Kiedy widzisz ID zamiast string | number, od razu wiesz, o co chodzi! ✨

>>Jak używać typów w praktyce? Codzienne Scenariusze

Teraz, gdy znasz podstawy składni, zobaczmy, jak możesz je wykorzystać w codziennej pracy programisty!

>>>Funkcje z typami zwracanymi i parametrami opcjonalnymi

Często zdarza się, że funkcja może, ale nie musi, przyjąć pewien argument, albo że jeden z jej argumentów ma wartość domyślną. TypeScript świetnie sobie z tym radzi.

// Parametr opcjonalny 'imie' - oznaczony znakiem '?'
// Wartość zwracana funkcji to 'string'
function powiedzCzesc(imie?: string): string {
  // Operator '??' (nullish coalescing) to super sprawa!
  // Jeśli 'imie' jest 'null' lub 'undefined', użyje "nieznajomy", w przeciwnym razie użyje 'imie'.
  return `Cześć, ${imie ?? "nieznajomy"}!`;
}

console.log(powiedzCzesc("Ania")); // Wypisze: Cześć, Ania!
console.log(powiedzCzesc()); // Wypisze: Cześć, nieznajomy!
// console.log(powiedzCzesc(123)); // 🚨 Błąd: Argument of type 'number' is not assignable to parameter of type 'string | undefined'.

>>>Łączenie kilku typów (Unie Typów w akcji!)

Gdy masz dane, które mogą przyjmować różne, ale określone formy, unie typów są Twoim przyjacielem.

// Typy reprezentujące różne role użytkownika
type Admin = {
  rola: "admin"; // Literalny typ string
  poziomUprawnien: number;
  panelDostepu: string;
};

type Uzytkownik = {
  rola: "user"; // Literalny typ string
  nazwaUzytkownika: string;
  ostatnieLogowanie: Date; // Używamy wbudowanego typu Date
};

// Typ 'OsobaNaPlatformie' może być ALBO Adminem, ALBO Uzytkownikiem
type OsobaNaPlatformie = Admin | Uzytkownik;

// Tworzymy tablicę, która może zawierać obiekty obu typów
const listaOsob: OsobaNaPlatformie[] = [
  { rola: "admin", poziomUprawnien: 5, panelDostepu: "/admin/dashboard" },
  {
    rola: "user",
    nazwaUzytkownika: "super_gracz",
    ostatnieLogowanie: new Date(),
  },
  { rola: "admin", poziomUprawnien: 1, panelDostepu: "/admin/stats" },
];

// Możemy iterować po liście i sprawdzić typ obiektu (tzw. "type guarding")
listaOsob.forEach((osoba) => {
  if (osoba.rola === "admin") {
    // W tym bloku TypeScript wie, że 'osoba' to typ 'Admin'
    console.log(
      `Administrator: ${osoba.panelDostepu} (poziom: ${osoba.poziomUprawnien})`
    );
  } else {
    // Tutaj TypeScript wie, że 'osoba' to typ 'Uzytkownik'
    console.log(
      `Użytkownik: ${
        osoba.nazwaUzytkownika
      } (logował się: ${osoba.ostatnieLogowanie.toLocaleDateString()})`
    );
  }
});

To podejście sprawia, że kod jest bardziej odporny na błędy i łatwiejszy do zrozumienia dla innych programistów (i dla Ciebie za kilka miesięcy! 😉).

>>Narzędzia i Integracje: Twoi Pomocnicy w Rozwoju

TypeScript to nie tylko sam język, ale też cały ekosystem narzędzi, które ułatwiają życie programistom.

TypeScript jest domyślnym językiem dla wielu popularnych frameworków frontendowych, takich jak Angular. Coraz więcej projektów w React i Vue również przechodzi na TypeScript. To oznacza, że znajomość tego języka to ogromny plus na rynku pracy! 📈

>>Częste Pułapki i Praktyczne Wskazówki: Jak Unikać Problemów?

Nauka nowego języka (a w zasadzie "rozszerzenia" języka) zawsze wiąże się z pewnymi wyzwaniami. Oto kilka częstych pułapek i wskazówek, które pomogą Ci szybko stać się ninja TypeScripta! 🥷

>>>Nie musisz typować wszystkiego od razu!

To jest jedna z najważniejszych rad! Nie czuj presji, żeby od razu typować każdą zmienną, każdy parametr i każdą funkcję w swoim projekcie. Możesz zacząć od typowania kluczowych fragmentów kodu (np. interfejsów dla danych z API, typów dla skomplikowanych funkcji). Stopniowo rozszerzaj typowanie w miarę, jak czujesz się pewniej. Małe kroki to klucz do sukcesu! 🚶‍♀️

>>>Stopniowa migracja: Powoli, ale skutecznie!

Jeśli masz już duży projekt w JavaScript, nie musisz go przepisywać od nowa! Możesz migrować go na TypeScript krok po kroku. Po prostu zacznij zmieniać rozszerzenia plików z .js na .ts (lub .tsx dla Reacta). Kompilator TypeScripta potraktuje czysty JavaScript jako poprawny kod, a Ty będziesz mógł/mogła stopniowo dodawać typy i naprawiać błędy kompilatora. To jak renowacja, a nie budowa od podstaw! 🏡

>>>Współpraca z bibliotekami JS: Poznaj @types/!

Co zrobić, jeśli używasz popularnej biblioteki JavaScript (np. Lodash, jQuery, Express), która nie jest napisana w TypeScript? Czy stracisz korzyści z typowania? Absolutnie nie! Istnieje specjalne repozytorium DefinitelyTyped, które zawiera pliki deklaracji typów (.d.ts) dla tysięcy bibliotek JavaScript.

Wystarczy zainstalować odpowiedni pakiet z typami (zazwyczaj zaczyna się od @types/):

npm install --save-dev @types/lodash
npm install --save-dev @types/jquery
npm install --save-dev @types/express

Po zainstalowaniu takiego pakietu, Twój edytor kodu (np. VS Code) będzie magicznie rozumiał typy z tych bibliotek, dając Ci podpowiedzi i wyłapując błędy, tak jakby były napisane w TypeScript! 🧙‍♀️

>>>Wyłączaj sprawdzanie niektórych plików (dla ekstremalnych przypadków)

Jeśli natrafisz na plik JavaScript, który jest absolutnym bałaganem i nie masz czasu go typować, a TypeScript ciągle krzyczy błędami, możesz go tymczasowo wyciszyć. Dodaj na górze pliku:

// @ts-nocheck

To polecenie mówi kompilatorowi TypeScripta, żeby zignorował sprawdzanie typów w tym konkretnym pliku. Używaj tego oszczędnie, bo tracisz wtedy korzyści z typowania! To taka "ostatnia deska ratunku". 😉

>>>Czytaj błędy kompilatora: To Twoi nauczyciele!

Na początku komunikaty o błędach z TypeScripta mogą wydawać się straszne. Pełno czerwonych podkreśleń i długich wiadomości. Ale prawda jest taka, że błędy TypeScripta są zazwyczaj bardzo pomocne! Dokładnie wskazują, gdzie jest problem i często sugerują, jak go naprawić.

>>>Najczęstsze błędy i jak je naprawić: Nie bój się czerwonych podkreśleń!

Początki bywają trudne, ale z każdym błędem uczysz się czegoś nowego! Oto kilka typowych błędów, które możesz napotkać, i jak sobie z nimi radzić:

Pamiętaj, że każdy błąd to szansa na naukę! Nie zniechęcaj się, analizuj komunikaty, a szybko zobaczysz, jak Twój kod staje się coraz bardziej solidny. 💪

>>TypeScript w Projektach Open-Source i Pracy Zespołowej: Graj zespołowo!

TypeScript to prawdziwy game-changer, jeśli chodzi o pracę w zespole i duże projekty! 🕹️ Dlaczego?

>>Gdzie znaleźć deklaracje typów do bibliotek JS?

To pytanie, które zadaje sobie każdy początkujący z TypeScriptem: "Skoro używam biblioteki X napisanej w JavaScript, to czy tracę wszystkie zalety typowania?" Na szczęście odpowiedź brzmi: NIE! 🎉

Dzięki społeczności TypeScripta i projektowi DefinitelyTyped, dla większości popularnych bibliotek JavaScript istnieją tzw. pliki deklaracji typów. Są to pliki z rozszerzeniem .d.ts, które nie zawierają kodu wykonawczego, a jedynie opisują struktury typów (interfejsy, typy funkcji itp.) danej biblioteki.

Instaluje się je bardzo prosto za pomocą npm, dodając przed nazwą biblioteki prefiks @types/. Przykłady:

Po zainstalowaniu odpowiedniego pakietu @types/, Twój edytor kodu (szczególnie VS Code!) zacznie "rozumieć" strukturę typów z tej biblioteki, dając Ci pełne wsparcie IntelliSense, podpowiedzi i wykrywanie błędów, tak jakby sama biblioteka była napisana w TypeScript! To jest po prostu magiczne! 🪄

>>Gdzie szukać pomocy? Nie jesteś sam!

Nauka programowania, zwłaszcza tak rozbudowanego języka jak TypeScript, to długa podróż. Ale nie musisz iść nią samotnie! Społeczność TypeScripta jest ogromna i bardzo pomocna.

Oto miejsca, gdzie zawsze znajdziesz wsparcie:

Pamiętaj, że każdy kiedyś zaczynał! Nie krępuj się zadawać pytań, nawet jeśli wydają Ci się proste. Wzajemna pomoc to podstawa silnej społeczności programistów. Działaj! 💪

>>Zadania Praktyczne: Ćwicz, ćwicz, ćwicz!

Teoria to jedno, ale prawdziwa nauka dzieje się, gdy piszesz kod! Spróbuj samodzielnie rozwiązać poniższe zadania. Nie bój się popełniać błędów – to najlepszy sposób na naukę! Zanim zajrzysz do rozwiązań, spróbuj pogłówkować trochę sam/a. Powodzenia! 🍀

>>>Zadanie 1: Typowanie zmiennych

Zadeklaruj trzy zmienne z jawnym typowaniem:

      Pokaż rozwiązanie   
// Rozwiązanie Zadania 1
let mojaLiczba: number = 77;
let mojTekst: string = "TypeScript jest super!";
let czyJestSlonce: boolean = true;

console.log(mojaLiczba, mojTekst, czyJestSlonce);

>>>Zadanie 2: Funkcja z typowanymi argumentami i wartością zwracaną

Napisz funkcję o nazwie pomnozDwieLiczby, która:

      Pokaż rozwiązanie   
// Rozwiązanie Zadania 2
function pomnozDwieLiczby(parametr1: number, parametr2: number): number {
  return parametr1 * parametr2;
}

const wynikMnozenia = pomnozDwieLiczby(6, 9);
console.log(`Wynik mnożenia to: ${wynikMnozenia}`); // Powinno wypisać: Wynik mnożenia to: 54

>>>Zadanie 3: Interfejs i obiekt użytkownika

Zdefiniuj interfejs UzytkownikProfil z następującymi polami:

Następnie utwórz obiekt o nazwie mojProfil typu UzytkownikProfil, który będzie miał wszystkie wymagane pola oraz jedno opcjonalne.

      Pokaż rozwiązanie   
// Rozwiązanie Zadania 3
interface UzytkownikProfil {
  id: number;
  nazwa: string;
  email?: string; // Opcjonalne pole
  czyAktywny: boolean;
}

const mojProfil: UzytkownikProfil = {
  id: 1234,
  nazwa: "programistaJunior",
  email: "junior@example.com", // Możesz dodać, ale nie musisz
  czyAktywny: true,
};

console.log(mojProfil);

>>>Zadanie 4: Alias typu i unia typów dla statusu

Zdefiniuj alias typu o nazwie StatusOperacji, który może przyjąć jedną z trzech wartości tekstowych: "oczekujący", "udany" lub "nieudany". Następnie zadeklaruj zmienną biezacyStatus i przypisz jej jedną z tych wartości.

      Pokaż rozwiązanie   
// Rozwiązanie Zadania 4
type StatusOperacji = "oczekujący" | "udany" | "nieudany";

let biezacyStatus: StatusOperacji = "udany";
console.log(`Aktualny status: ${biezacyStatus}`);

// biezacyStatus = "w toku"; // 🚨 Błąd! Typ '"w toku"' nie jest przypisywalny do typu 'StatusOperacji'.

>>>Zadanie 5: Klasa z dziedziczeniem i metodą

Stwórz klasę Pojazd z polem marka (string) i metodą jedz(), która wypisuje komunikat "Pojazd jedzie.". Następnie utwórz klasę Samochod dziedziczącą po Pojazd. W klasie Samochod dodaj pole model (string) i nadpisz metodę jedz(), aby wypisywała np. "Samochód [marka] [model] jedzie z piskiem opon!". Utwórz instancję klasy Samochod i wywołaj jej metodę jedz().

      Pokaż rozwiązanie   
// Rozwiązanie Zadania 5
class Pojazd {
  constructor(public marka: string) {}

  jedz(): void {
    console.log("Pojazd jedzie.");
  }
}

class Samochod extends Pojazd {
  constructor(marka: string, public model: string) {
    super(marka); // Wywołanie konstruktora klasy bazowej
  }

  // Nadpisanie metody jedz()
  jedz(): void {
    console.log(
      `Samochód ${this.marka} ${this.model} jedzie z piskiem opon! 🚗💨`
    );
  }
}

const mojSamochod = new Samochod("Tesla", "Model 3");
mojSamochod.jedz(); // Oczekiwany wynik: Samochód Tesla Model 3 jedzie z piskiem opon! 🚗💨

>>Podsumowanie: Czas na TypeScript!

Mega robota! Dotarłeś/aś do końca wprowadzenia do TypeScript! 🥳 Mam nadzieję, że teraz rozumiesz, czym jest TypeScript, dlaczego jest tak potężnym narzędziem i jak możesz go wykorzystać w swoich projektach. Statyczne typowanie, lepsze narzędzia deweloperskie i czytelniejszy kod to tylko niektóre z jego zalet.

TypeScript to nie tylko język, to filozofia pisania kodu, która promuje bezpieczeństwo, przewidywalność i łatwość współpracy. Jeśli chcesz pisać nowoczesny, bezpieczny i skalowalny kod JavaScript, TypeScript jest Twoim sprzymierzeńcem.

Moja rada na koniec: Zacznij używać TypeScripta w swoich małych projektach. Eksperymentuj, popełniaj błędy i ucz się na nich. Tylko w ten sposób naprawdę zrozumiesz jego moc. A jeśli masz jakieś pytania – wiesz, gdzie mnie szukać! 😉

Gotowy/a na kolejne wyzwania z TypeScriptem, czy może masz już jakiś pomysł na swój pierwszy projekt z jego wykorzystaniem? Daj znać! 👇

Quiz: Wprowadzenie do TypeScript - Sprawdź się! 💪

Pytanie 1 z 5

Czym tak naprawdę jest TypeScript w porównaniu do JavaScriptu?

Widzisz jakiś błąd, bądź literówkę? Chcesz coś poprawić?✏️ Przejdź do edycji tego pliku