← Zpět na učím

1.2 Nastavení prostředí

Výuka

Pro programování v JavaScriptu a TypeScriptu potřebuješ:

1. Editor kódu

Doporučeno: Visual Studio Code

🆓 Zdarma a open-source
💡 Skvělý autocomplete pro JS i TS
🔌 Rozšíření a integrace s nástroji
🌐 code.visualstudio.com

Alternativy: WebStorm, Sublime Text, Atom

2. Runtime prostředí

Pro JavaScript:

Prostředí	Použití	Instalace
Prohlížeč	Frontend, učení	✅ Už máš (Chrome, Firefox, Safari)
Node.js	Backend, skripty, nástroje	nodejs.org

Pro TypeScript:

TypeScript kompilátor (tsc)
Potřebuješ Node.js + npm

3. Instalace Node.js

# Stáhni z nodejs.org a nainstaluj
# Nebo přes package manager:

# macOS (Homebrew)
brew install node

# Windows (Chocolatey)
choco install nodejs

# Linux (apt)
sudo apt install nodejs npm

# Ověř instalaci
node --version   # v20.x.x
npm --version    # v10.x.x

4. Instalace TypeScript

# Globální instalace
npm install -g typescript

# Ověř instalaci
tsc --version    # Version 5.x.x

# Vytvoř tsconfig.json
tsc --init

JavaScript

Spuštění v prohlížeči:

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Můj JS projekt</title>
</head>
<body>
  <h1>JavaScript v prohlížeči</h1>
  <script src="script.js"></script>
  <!-- Nebo inline -->
  <script>
    console.log('Hello from browser!');
  </script>
</body>
</html>

// script.js
console.log('Hello, JavaScript!');
alert('První JS program');

Spuštění v Node.js:

// app.js
console.log('Hello, Node.js!');

# Spusť v terminálu
node app.js

TypeScript

Nastavení TypeScript projektu:

# 1. Vytvoř složku projektu
mkdir my-ts-project
cd my-ts-project

# 2. Inicializuj npm projekt
npm init -y

# 3. Nainstaluj TypeScript lokálně
npm install --save-dev typescript

# 4. Vytvoř tsconfig.json
npx tsc --init

tsconfig.json (základní nastavení):

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true
  }
}

Struktura projektu:

my-ts-project/
├── src/
│   └── index.ts      # TypeScript kód
├── dist/             # Zkompilovaný JS (auto-generováno)
├── tsconfig.json
└── package.json

První TS soubor:

// src/index.ts
const message: string = 'Hello, TypeScript!';
console.log(message);

Kompilace a spuštění:

# Zkompiluj TS → JS
npx tsc

# Spusť zkompilovaný JS
node dist/index.js

# Nebo použij ts-node pro přímé spuštění
npm install --save-dev ts-node
npx ts-node src/index.ts

Rozdíl JS vs TS

JavaScript	TypeScript
Žádná instalace navíc (browser/Node)	Potřebuješ tsc kompilátor
`.js` soubory	`.ts` soubory
Přímo spustitelné	Musí se zkompilovat na `.js`
Žádná konfigurace	`tsconfig.json`

Workflow:

JavaScript:
  Napíšeš .js → Spustíš přímo

TypeScript:
  Napíšeš .ts → tsc kompiluje → .js → Spustíš

Tip

💡 Pro začátečníky: Začni s JavaScript v prohlížeči - žádná instalace, okamžitá zpětná vazba!

<!-- Otevři v prohlížeči -->
<script>
  console.log('Otevři Dev Tools (F12) → Console');
</script>

💡 Dev Tools (F12):

Console - testuj JS kód živě
Sources - debugování s breakpoints
Network - sleduj HTTP requesty

💡 Online editory (bez instalace):

CodeSandbox - plnohodnotné IDE
StackBlitz - Next.js, React
TypeScript Playground - TS online

💡 VS Code extensions:

ESLint - linting JS/TS
Prettier - formátování kódu
Error Lens - chyby přímo v kódu
Auto Rename Tag - HTML tagy

Kvíz

Které výroky jsou pravdivé?

A) JavaScript lze spustit pouze v prohlížeči

B) TypeScript se kompiluje na JavaScript

C) Pro TypeScript potřebuješ Node.js a npm

D) .ts soubory lze spustit přímo bez kompilace

❌ - JS běží i v Node.js (server-side)

✅ - TS se kompiluje (transpiluje) na čistý JavaScript

✅ - TS kompilátor (tsc) se instaluje přes npm

❌ - .ts soubory se musí zkompilovat na .js (nebo použít ts-node)

← Předchozí: 1.1 Úvod do JavaScriptu a TypeScriptu Další: 1.3 První program →

🎯 Závěrečný projekt

Po dokončení všech 8 dílů vytvoříte jednoduchou Todо aplikaci v čistém JavaScriptu. Naučíte se, jak aplikovat vše, co jste se naučili, na reálný projekt.

Zobrazit podrobnosti projektu →

Připraveni začít?

Zaregistrujte se a získejte přístup ke všem dílům tohoto seriálu

Kontaktujte mě

Informace o seriálu

Obtížnost

Délka

Cca 480 minut

Počet videí

8 videí + projekty

Certifikát

Po dokončení obdržíte certifikát

Lekce v této sekci

Struktura lekcí (souborový strom)

01. Zaklady jazyka

02. Rizeni toku

03. Funkce

04. Pole kolekce

05. Objekty

06. Typescript specifika

v přípravě

07. Async

08. Moduly tridy

v přípravě

09. React zaklady

v přípravě

10. React hooks

v přípravě

11. Nextjs zaklady

12. Nextjs server

v přípravě

13. Databaze auth

v přípravě

14. Nextjs pokrocile

v přípravě