third week

órai anyagok/extras/sections/04-union-intersection.tex

@@ -0,0 +1,90 @@
+\section{Union/Intersection}
+
+\begin{frame}[fragile]{Union típusok -- "vagy ez, vagy az"}
+\footnotesize
+Egy \textbf{union} típus (\texttt{|} jellel) azt fejezi ki, hogy egy érték \emph{többféle} típus egyike lehet. Ez az egyik legtöbbet használt eszköz a valós TypeScript kódban.
+
+\begin{lstlisting}[language=JavaScript,style=NodeJS]
+type Id = string | number;
+
+function printId(id: Id) {
+  console.log(`Az azonosito: ${id}`);
+}
+
+printId(123);        // OK
+printId('abc-123');  // OK is
+\end{lstlisting}
+
+\begin{block}{Gyakori példa}
+\texttt{type HttpMethod = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';} -- ilyenkor a fordító nem enged elgépelt, érvénytelen metódusnevet.
+\end{block}
+\end{frame}
+
+\begin{frame}[fragile]{Type narrowing -- a típus leszűkítése}
+\footnotesize
+Ha egy változó union típusú, a fordító csak azokat a műveleteket engedi rajta, amik \emph{minden} lehetséges típusnál érvényesek -- amíg nem szűkítjük le (narrowing), melyik konkrét típusról van szó.
+
+\begin{lstlisting}[language=JavaScript,style=NodeJS]
+function printId(id: string | number) {
+  if (typeof id === 'string') {
+    console.log(id.toUpperCase()); // itt mar biztos string
+  } else {
+    console.log(id.toFixed(2));    // itt mar biztos number
+  }
+}
+\end{lstlisting}
+
+\begin{itemize}
+\item \texttt{typeof} -- primitív típusok megkülönböztetésére (\texttt{string}, \texttt{number}, stb.)
+\item \texttt{instanceof} -- osztálypéldányok megkülönböztetésére
+\item \texttt{in} -- egy adott mező meglétének ellenőrzésére egy objektumon
+\end{itemize}
+\end{frame}
+
+\begin{frame}[fragile]{Intersection típusok -- "ez is, az is"}
+\footnotesize
+Az \textbf{intersection} típus (\texttt{\&} jellel) ennek épp az ellentéte: egy érték \emph{egyszerre} feleljen meg több típusnak is -- a mezők összeadódnak.
+
+\begin{lstlisting}[language=JavaScript,style=NodeJS]
+interface HasId {
+  id: number;
+}
+interface HasName {
+  name: string;
+}
+
+type Entity = HasId & HasName;
+
+const user: Entity = { id: 1, name: 'Anna' };
+\end{lstlisting}
+
+Az \texttt{Entity} típusú értéknek \emph{mindkét} interfész mezőit tartalmaznia kell -- ez hasznos, ha kisebb, újrafelhasználható "építőelemekből" rakunk össze nagyobb típusokat.
+\end{frame}
+
+\begin{frame}[fragile]{Literal típusok}
+\footnotesize
+A TypeScript-ben nemcsak \texttt{string} vagy \texttt{number} lehet egy típus, hanem egy \emph{konkrét érték} is -- ezt hívjuk literal típusnak. Union-nal kombinálva rendkívül kifejező, önmagát dokumentáló kódot kapunk.
+
+\begin{lstlisting}[language=JavaScript,style=NodeJS]
+type Status = 'pending' | 'active' | 'closed';
+
+function setStatus(status: Status) {
+  // csak a harom felsorolt string-et fogadja el
+}
+
+setStatus('active');   // OK
+setStatus('done');     // Hiba! nincs ilyen Status
+\end{lstlisting}
+\end{frame}
+
+\begin{frame}{Összefoglalás -- Union és Intersection}
+\footnotesize
+\begin{block}{Union és Intersection típusok}
+\begin{itemize}
+\item Union (\texttt{|}): "vagy ez, vagy az" -- egy érték többféle típus egyike lehet
+\item Type narrowing: \texttt{typeof}/\texttt{instanceof}/\texttt{in} -- leszűkítjük, melyik konkrét típusról van szó
+\item Intersection (\texttt{\&}): "ez is, az is" -- több típus mezői összeadódnak
+\item Literal típusok: konkrét értékek típusként, gyakran union-nal kombinálva (pl. HTTP metódusok)
+\end{itemize}
+\end{block}
+\end{frame}