93 lines
4.3 KiB
TeX
93 lines
4.3 KiB
TeX
\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}
|