Logo

2. Základy JavaScriptu (JS) a TypeScriptu (TS)

React aplikace vyžadují znalosti moderního JavaScriptu – především funkcí, které dorazily s ES6 a novějšími standardy. V posledních letech pak nabývá na popularitě TypeScript, který přidává typový systém a další užitečné funkce zlepšující vývojářskou produktivitu a spolehlivost kódu.

2.1 Základy JavaScriptu

ES6+ syntaxe (let, const, arrow funkce, template literals)

  1. Deklarace proměnných

    • let: Blokově scoped proměnné, které lze v průběhu programu měnit.
    • const: Blokově scoped proměnné, které nelze přepisovat, ale neznamená to, že objekty a pole jsou plně neměnné.
    • var: Globálně scoped proměnné, které jsou zastaralé a měly by být nahrazeny let nebo const.
    var x = 1; // Globální proměnná
{
     let y = 2; // Bloková proměnná
     const z = 3; // Bloková konstanta
     // x je stalé dostupná
     console.log(x); // 1
     console.log(y); // 2
     console.log(z); // 3
}
 console.log(x); // 1
 console.log(y); // ReferenceError: y is not defined
 console.log(z); // ReferenceError: z is not defined

 {
     let a = 1;
     const b = 2;

     console.log(a); // 1
     console.log(b); // 2

     a = 3; // a je přepsáno
     // b = 4; // TypeError: Assignment to constant variable
     console.log(a); // 3
     console.log(b); // 2
 }
    • Proměnné typu let a const nejsou možné deklarovat znovu ve stejném bloku, což je rozdíl oproti var.
    let a = 1;
let a = 2; // SyntaxError: Identifier 'a' has already been declared
const b = 1;
const b = 2; // SyntaxError: Identifier 'b' has already been declared

  2. Podmínky

    • V programování se často používají podmínky, které umožňují vykonávat různé části kódu na základě splnění určitých podmínek. V JavaScriptu se používají příkazy if, else if a else.
    let age = 18;
if (age < 18) { // Pokud je věk menší (<) než 18
    console.log("Jsi nezletilý.");
} else if (age >= 18 && age < 65) { // Pokud je věk větší nebo roven (>=) 18 a menší (<) než 65
    console.log("Jsi dospělý.");
} 
else if(age == 66) { // Pokud je věk roven (==) 66
    console.log("Jsi důchodce.");
}
else { // Pokud není splněna žádná z předchozích podmínek
    console.log("Jsi senior.");
}

    • if - provede blok kódu, pokud je podmínka pravdivá, else if - provede blok kódu, pokud je podmínka pravdivá a předchozí podmínka byla nepravdivá, else - provede blok kódu, pokud jsou všechny předchozí podmínky nepravdivé.

    • switch - alternativní způsob, jak provádět podmínkovou logiku. Je užitečný, když máte více možností pro jednu proměnnou.

    let day = 3;
switch (day) {
    case 1:
        console.log("Pondělí");
        break;
    case 2:
        console.log("Úterý");
        break;
    case 3:
        console.log("Středa");
        break;
    case 4:
        console.log("Čtvrtek");
        break;
    case 5:
        console.log("Pátek");
        break;
    default:
        console.log("O víkendu");
}
    • switch - porovnává hodnotu proměnné s jednotlivými případy (case). Pokud najde shodu, provede příslušný blok kódu. break ukončuje provádění switch bloku, pokud není uveden, pokračuje se v provádění dalších případů. default je volitelný blok, který se provede, pokud žádný z případů neodpovídá.
    • switch je užitečný, když máte více možností pro jednu proměnnou a chcete se vyhnout dlouhému řetězci if-else if.

  3. Smyčky

    • Smyčky umožňují opakované provádění bloku kódu, dokud je splněna určitá podmínka. V JavaScriptu se používají příkazy for, while a do while.
    // for smyčka
for (let i = 0; i < 5; i++) {
    console.log(i); // Vypíše čísla 0 až 4
}

// while smyčka
let j = 0;
while (j < 5) {
    console.log(j); // Vypíše čísla 0 až 4
    j++;
}

// do while smyčka
let k = 0;
do {
    console.log(k); // Vypíše číslo 0
    k++;
} while (k < 1);
    • for - provádí blok kódu pro každou hodnotu v rozsahu, while - provádí blok kódu, dokud je podmínka pravdivá, do while - provádí blok kódu alespoň jednou a poté kontroluje podmínku.
    • for je užitečné, když víte, kolikrát chcete provést blok kódu, while je užitečné, když nevíte, kolikrát chcete provést blok kódu a potřebujete kontrolovat podmínku před každým provedením, do while je užitečné, když chcete provést blok kódu alespoň jednou a poté kontrolovat podmínku.
    • Všechny tři smyčky mají své výhody a nevýhody a volba závisí na konkrétní situaci.
    • Například for se skvěle hodí pro iteraci přes pole nebo řetězce, zatímco while a do while jsou užitečné pro situace, kdy čekáte na událost nebo podmínku, která se může měnit v průběhu času.
    let pole = [1, 2, 3, 4, 5];
for (let i = 0; i < pole.length; i++) {
    console.log(pole[i]); // Vypíše čísla 1 až 5
}
    • forEach - metoda pro iteraci přes pole, která provede funkci pro každý prvek pole.
    let pole = [1, 2, 3, 4, 5];
pole.forEach((prvek, index) => {
    console.log(prvek, index); // Vypíše čísla 1 až 5 a jejich indexy
});
    • forEach je užitečné, když chcete provést funkci pro každý prvek pole a nechcete se starat o indexy. Je to čitelnější a elegantnější než tradiční for smyčka.

  4. Funkce

    • Funkce jsou bloky kódu, které lze volat a vykonávat opakovaně. V JavaScriptu se funkce definují pomocí klíčového slova function.
    function Add(a, b) { // "a" a "b" jsou parametry funkce
    return a + b;
}
console.log(Add(2, 3)); // Vypíše 5
    • Funkce mohou mít parametry (vstupy) a vracet hodnoty (výstupy). Parametry jsou proměnné, které se předávají funkci při jejím volání.
    function Add(a, b) {
    return a + b;
}
console.log(Add(2, 3)); // Vypíše 5
    • Funkce mohou mít také výchozí hodnoty pro parametry.
    function Add(a, b = 0) {
    return a + b;
}
console.log(Add(2)); // Vypíše 2

    Arrow funkce

    • Arrow funkce jsou zkrácený zápis pro definici funkcí. Jsou užitečné pro anonymní funkce a mají lexikální this, což znamená, že this odkazuje na kontext, ve kterém byla funkce vytvořena.
    const Add = (a, b) => a + b; // Zkrácený zápis funkce
console.log(Add(2, 3)); // Vypíše 5
    • Arrow funkce nemají svůj vlastní this, což znamená, že this odkazuje na kontext, ve kterém byla funkce vytvořena. To je užitečné v situacích, kdy potřebujete zachovat kontext this v callback funkcích.
    const object = {
    name: "Jan",
    Greed: function() {
        setTimeout(() => {
            console.log("Ahoj, " + this.name); // "this" odkazuje na objekt
        }, 1000);
    }
};
object.Greed(); // Vypíše "Ahoj, Jan" po 1 sekundě

  5. Template literals

    • Template literals jsou způsob, jak vytvářet řetězce s interpolací proměnných a vícenásobnými řádky. Používají se zpětné apostrofy (`) místo jednoduchých nebo dvojitých uvozovek.
    let name = "Jan";
let greeting = `Ahoj, ${name}!`; // Interpolace proměnné
console.log(greeting); // Vypíše "Ahoj, Jan!"

  6. Asynchronní programování

    • Moderní vývoj často spoléhá na práci s daty z API (asynchronní požadavky). JavaScript nabízí několik způsobů, jak s asynchronními operacemi pracovat:

    1. Promises: Umožňují řetězení asynchronních kroků a lepší čitelnost oproti čistým callbackům.
    fetch("https://api.example.com/data")
.then((response) => response.json())
.then((data) => {
    console.log("Data:", data);
})
.catch((error) => {
    console.error("Error:", error);
});
    1. async/await: Zjednodušuje práci s Promises a dělá kód čitelnější.
    async function fetchData() {
    try {
        const response = await fetch("https://api.example.com/data"); // Počká na odpověď
        const data = await response.json();
        console.log("Data:", data);
    } catch (error) {
        console.error("Error:", error);
    }
}
fetchData();
    • async označuje funkci jako asynchronní, což znamená, že může používat await pro čekání na Promises. await pozastaví vykonávání funkce, dokud není Promise splněn nebo odmítnut.

  7. Moduly a bundly

    • Při práci na větších projektech je výhodné rozdělovat kód do modulů a k jeho finální úpravě využívat bundlery (např. Webpack nebo modernější Vite).
    • ES6 zavedla nativní podporu pro moduly (import/export) a většina bundlerů je podporuje.
    // user.js
export const userName = "Bob";

// main.js
import { userName } from "./user.js";
console.log(userName); // Bob

2.2 Základy TypeScriptu

  • TypeScript je nadstavba JavaScriptu, která přidává statické typování a další funkce pro zlepšení vývoje.
  • TypeScript je kompilován do JavaScriptu, což znamená, že můžete psát kód v TypeScriptu a poté jej převést na JavaScript pro spuštění v prohlížeči nebo na serveru.
  • Je to silně typovaný jazyk, což znamená, že proměnné mají přiřazený typ a TypeScript kontroluje, zda jsou tyto typy správně používány.

Typování (primitiva, rozhraní, typy funkcí)

// Primtivní typy
let age: number = 25; // Číslo
let name: string = "Alice"; // Řetězec
let isStudent: boolean = true; // Boolean

// Rozhraní (interface)
interface User {
  id: number;
  username: string;
  isActive: boolean;
}

// Využití v proměnné
const currentUser: User = {
  id: 1,
  username: "Alice",
  isActive: true,
};

// Typy funkcí
function addNumbers(a: number, b: number): number {
  return a + b;
}

// Arrow funkce s typy
const greetUser = (user: User): string => {
  return `Hello, ${user.username}`;
};
  • Jinak se TypeScript chová jako JavaScript, takže můžete používat všechny funkce a syntaxi JavaScriptu.