1.1 Úvod do JavaScriptu a TypeScriptu

Výuka

Co je JavaScript?

JavaScript (JS) je programovací jazyk původně vytvořený pro webové prohlížeče. Dnes běží všude:

• 🌐 Prohlížeče - interaktivní webové stránky
• 🖥️ Servery - Node.js pro backend aplikace
• 📱 Mobilní aplikace - React Native, Ionic
• 🖥️ Desktop aplikace - Electron (VS Code, Discord)

Vlastnosti JavaScriptu:

• ✅ Dynamicky typovaný (typy se kontrolují za běhu)
• ✅ Interpretovaný (nemusíš kompilovat)
• ✅ Multi-paradigma (OOP, funkcionální)
• ✅ Single-threaded s event loop

Co je TypeScript?

TypeScript (TS) je nadstavba JavaScriptu vytvořená Microsoftem. Přidává statické typy.

TypeScript = JavaScript + Types

Vlastnosti TypeScriptu:

• ✅ Staticky typovaný (typy se kontrolují při kompilaci)
• ✅ Kompilovný (TS → JS)
• ✅ Zpětně kompatibilní (každý JS je validní TS)
• ✅ Volitelný (můžeš typy přidat postupně)

Proč TypeScript?

JavaScript

// JavaScript - bez typů
function greet(name) {
  return "Hello, " + name;
}

const message = greet("Jan");
console.log(message);  // "Hello, Jan"

// Může nastat chyba za běhu:
greet(123);  // "Hello, 123" (funguje, ale možná nechceš)
greet();     // "Hello, undefined" (chyba!)

// Objekty bez struktury
const user = {
  name: "Jan",
  age: 25
};

user.email = "jan@example.com";  // OK, přidá property
user.Age = 26;  // OK, ale je to překlep! (mělo být 'age')

TypeScript

// TypeScript - se typy
function greet(name: string): string {
  return "Hello, " + name;
}

const message = greet("Jan");
console.log(message);  // "Hello, Jan"

// TypeScript odchytí chyby:
// greet(123);   // ❌ Error: Argument of type 'number' is not assignable
// greet();      // ❌ Error: Expected 1 arguments, but got 0

// Objekty se strukturou (interface)
interface User {
  name: string;
  age: number;
  email?: string;  // Volitelné
}

const user: User = {
  name: "Jan",
  age: 25
};

user.email = "jan@example.com";  // ✅ OK
// user.Age = 26;  // ❌ Error: Property 'Age' does not exist
user.age = 26;     // ✅ OK

Rozdíl JS vs TS

Workflow:

JavaScript:
  Napíšeš kód (.js) → Spustíš → Chyba v runtime

TypeScript:
  Napíšeš kód (.ts) → Kompilace → Chyby se objeví → Opravíš → .js soubor → Spustíš

Tip

💡 Kdy použít JavaScript:

• Rychlé prototypy
• Malé skripty
• Učení se základů

💡 Kdy použít TypeScript:

• Velké projekty
• Týmová práce
• Produkční aplikace
• React/Next.js projekty (doporučeno)

💡 Můžeš začít s JS a přejít na TS postupně:

// 1. Začni s .js
function add(a, b) { return a + b; }

// 2. Přejmenuj na .ts a přidej typy
function add(a: number, b: number): number {
  return a + b;
}

💡 TypeScript je JavaScript: Vše, co se naučíš v JS, použiješ i v TS. TS jen přidává bezpečnostní síť.