Przejdź do głównej treści
eLearner.app
Moduł 1 · Lekcja 1 z 21/14 w kursie~10 min
Lekcje modułu (1/2)

Typy proste i adnotacje

TypeScript jest typowanym nadzbiorem (superset) języka JavaScript, co oznacza, że dodaje składnię dla typów statycznych do istniejącej składni JavaScript. W czasie wykonywania (runtime) cały kod TypeScript jest kompilowany do czystego JavaScriptu, a typy całkowicie znikają podczas budowania aplikacji.

Dzięki TypeScriptowi możesz wykrywać błędy, zanim kod zostanie uruchomiony w przeglądarce, co czyni proces tworzenia oprogramowania bardziej stabilnym, bezpiecznym i skalowalnym.


Typy Prymitywne

TypeScript obsługuje standardowe typy prymitywne języka JavaScript:

  • string: Reprezentuje sekwencje znaków (np. 'Alice', "Hello").
  • number: Reprezentuje wartości liczbowe, zarówno całkowite, jak i zmiennoprzecinkowe (np. 42, 3.14).
  • boolean: Reprezentuje wartości logiczne (true lub false).
  • null i undefined: Reprezentują celowy lub nieumyślny brak wartości.
TS
const username: string = 'Alice';
const score: number = 100;
const isActive: boolean = true;

Adnotacja zmiennych i wnioskowanie typów

W TypeScript możemy dodać adnotację typu poprzez wpisanie dwukropka (:) i nazwy typu.

Jeśli spróbujesz przypisać wartość innego typu (np. przypisać napis do zmiennej age zdefiniowanej jako number), kompilator TypeScript natychmiast zgłosi błąd jeszcze przed uruchomieniem kodu.


Niebezpieczeństwo związane z typem any

Typ any to specjalny typ, który informuje TypeScript, aby wyłączył sprawdzanie typów dla danej zmiennej.

TS
let data: any = 42;
data = 'Hello'; // Nessun errore!
data.nonExistentMethod(); // Nessun errore a tempo di compilazione, ma crash a runtime!

Używanie any niweczy wszystkie zalety bezpieczeństwa oferowane przez TypeScript. Jest to uważane za złą praktykę, której należy unikać w kodzie produkcyjnym.


Adnotacja funkcji i typ void

Możemy opisywać typami zarówno parametry, jak i wartość zwracaną przez funkcję:

TS
function calculateTax(price: number, taxRate: number): number {
  return price * taxRate;
}

Jeśli funkcja nie zwraca żadnej wartości (na przykład wykonuje tylko console.log), jej typem zwracanym jest void :

TS
function logMessage(message: string): void {
  console.log(message);
}

Spróbuj sam

Ćwiczenie 1: Typowane zmienne

Ćwiczenie#ts.m1.l1.e1
Próby: 0Ładowanie...

Zadeklaruj trzy jawnie typowane zmienne: username jako string o wartości 'Alice', score jako number o wartości 100 oraz isActive jako boolean o wartości true. Nie używaj typu any.

Ładowanie edytora...
Pokaż wskazówkę

Użyj składni : string, : number oraz : boolean po nazwie każdej ze zmiennych.

Rozwiązanie dostępne po 3 próbach

Ćwiczenie 2: Funkcja witająca

Ćwiczenie#ts.m1.l1.e2
Próby: 0Ładowanie...

Utwórz funkcję o nazwie greet, która przyjmuje parametr name typu string i zwraca napis w formacie 'Hello, ' po którym następuje imię. Określ jawnie zarówno typ parametru, jak i typ zwracany.

Ładowanie edytora...
Pokaż wskazówkę

Zadeklaruj funkcję jako function greet(name: string): string { ... } i zwróć komunikat.

Rozwiązanie dostępne po 3 próbach

Ćwiczenie 3: Konwerter temperatury

Ćwiczenie#ts.m1.l1.e3
Próby: 0Ładowanie...

Zadeklaruj funkcję o nazwie celsiusToFahrenheit, która przyjmuje parametr celsius typu number i zwraca odpowiadającą mu temperaturę w stopniach Fahrenheita (number). Wzór to celsius * 9 / 5 + 32. Określ jawnie zarówno typ parametru, jak i typ zwracany.

Ładowanie edytora...
Pokaż wskazówkę

Pomnóż celsius przez 9, podziel przez 5, dodaj 32 i zwróć wynik, stosując adnotację : number dla funkcji.

Rozwiązanie dostępne po 3 próbach

Ćwiczenie 4: Obliczanie rabatu

Ćwiczenie#ts.m1.l1.e4
Próby: 0Ładowanie...

Utwórz funkcję o nazwie calculateDiscount, która przyjmuje parametr price typu number oraz parametr discountPercent typu number i zwraca końcową cenę po naliczeniu rabatu jako number. Określ jawnie zarówno typy parametrów, jak i typ zwracany.

Ładowanie edytora...
Pokaż wskazówkę

Odejmij procent rabatu podzielony przez 100 od 1, a następnie pomnóż przez cenę początkową. Upewnij się, że opisujesz parametry i wynik jako number.

Rozwiązanie dostępne po 3 próbach