91 lines
3.4 KiB
TeX
91 lines
3.4 KiB
TeX
\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}
|