\section{Bevezetés}

\begin{frame}{Miről szól ez az anyag?}
\footnotesize
Ez egy \textbf{önállóan is végigkövethető, kiegészítő} tananyag a TypeScriptről. Nem feltételezi, hogy láttad a 2. hét TypeScript diáit -- a legelejétől indulunk, majd jóval mélyebbre megyünk, mint amit egy heti óra kerete engedne.

\begin{itemize}
\item Ha még sosem láttál TypeScript kódot, nyugodtan kezdd itt
\item Ha a 2. héten már megismerted az alapokat, néhány dia ismétlés lesz -- utána viszont új anyag következik
\item A cél: hogy magabiztosan tudj TypeScript kódot olvasni és írni, ne csak felismerni
\end{itemize}

\begin{alertblock}{Nem kötelező anyag}
Ez a diasor \emph{nem} számonkérendő tananyag -- annak szól, aki jobban meg szeretné érteni a TypeScript-et, mint amire a heti órák ideje engedne.
\end{alertblock}
\end{frame}

\begin{frame}{Mi az a TypeScript, és miért érdemes használni?}
\footnotesize
A JavaScript \textbf{gyengén típusos} nyelv: egy változó bármikor bármilyen típusú értéket felvehet, és a legtöbb hiba csak futás közben derül ki. A \textbf{TypeScript} (Microsoft, 2012) a JavaScript egy kiterjesztése, ami \emph{statikus típusrendszert} ad hozzá -- a kód végül mindig sima JavaScript-té fordul le.

\begin{itemize}
\item A típushibák nagy része már íráskor / fordításkor kiderül, nem futás közben, esetleg egy élő felhasználónál
\item Az IDE (VS Code, stb.) pontos kódkiegészítést, azonnali hibajelzést tud adni
\item A kód önmagát dokumentálja: egy függvény szignatúrájából látszik, mit vár és mit ad vissza
\item Nagyobb csapatban, nagyobb, hosszú távon karbantartott kódbázisban különösen megtérül
\end{itemize}

\begin{block}{Fontos}
A TypeScript \emph{opcionális, fokozatosan bevezethető} réteg -- egy meglévő JavaScript projektbe fájlonként is átállhatunk rá.
\end{block}
\end{frame}

\begin{frame}[fragile]{Telepítés és a \texttt{tsconfig.json}}
\footnotesize
A TypeScript fordítót (\texttt{tsc}) npm csomagként telepítjük, majd egy konfigurációs fájlt hozunk létre, ami megmondja a fordítónak, hogyan viselkedjen.

\begin{block}{Telepítés}
\begin{verbatim}
npm install -D typescript
npx tsc --init
\end{verbatim}
\end{block}

\begin{block}{A \texttt{tsconfig.json} legfontosabb mezői}
\begin{itemize}
\item \texttt{target} -- milyen JavaScript verzióra fordítson (pl. \texttt{"ES2020"})
\item \texttt{module} -- modulrendszer (\texttt{"commonjs"} vagy \texttt{"esnext"})
\item \texttt{outDir} / \texttt{rootDir} -- hova kerüljön a lefordított kód, honnan olvasson forrást
\item \texttt{strict} -- bekapcsolja az összes szigorú típusellenőrzést (\emph{erősen ajánlott} \texttt{true})
\end{itemize}
\end{block}
\end{frame}

\begin{frame}[fragile]{Futtatás fejlesztés közben}
\footnotesize
A \texttt{.ts} fájlokat sem a böngésző, sem a Node.js nem futtatja közvetlenül -- előbb JavaScript-té kell fordítani. Fejlesztés közben ezt kényelmesebb eszközökkel oldjuk meg, mint kézzel fordítani minden mentés után.

\begin{block}{Klasszikus fordítás}
\begin{verbatim}
npx tsc              # egyszeri forditas
npx tsc --watch      # automatikusan ujrafordit mentes utan
\end{verbatim}
\end{block}

\begin{block}{Közvetlen futtatás (nincs külön fordítási lépés)}
\begin{verbatim}
npx tsx index.ts
\end{verbatim}
A \texttt{tsx} (és a régebbi \texttt{ts-node}) memóriában fordítja és rögtön futtatja is a kódot -- ez a legkényelmesebb fejlesztés közben.
\end{block}
\end{frame}

\begin{frame}[fragile]{Az első \texttt{.ts} fájl}
\footnotesize
Nézzük meg, hogyan néz ki egy egyszerű, típusozott TypeScript fájl -- ez lesz az alapja a következő diáknak, ahol részletesen végigvesszük az egyes típusokat.

\begin{lstlisting}[language=JavaScript,style=NodeJS]
function add(a: number, b: number): number {
  return a + b;
}

const result = add(2, 3);
console.log(`Az eredmeny: ${result}`);

// add('2', 3); -- ez forditasi hibat adna!
\end{lstlisting}

\begin{block}{Amit érdemes megfigyelni}
A paraméterek és a visszatérési érték típusát kettősponttal adjuk meg. Ha rossz típusú értékkel próbálnánk hívni a függvényt, a fordító \emph{azonnal} hibát jelezne -- még mielőtt a kód lefutna.
\end{block}
\end{frame}