```latex
% !TEX program = xelatex
\documentclass[11pt]{article}

% Encoding and fonts
\usepackage{fontspec}
\setmainfont{TeX Gyre Pagella}
\setsansfont{TeX Gyre Heros}
\setmonofont{JetBrains Mono}
\usepackage{xcolor}
\usepackage[a4paper,margin=0.7in]{geometry}
\usepackage{enumitem}
\usepackage{titlesec}
\usepackage{hyperref}
\hypersetup{
  colorlinks=true,
  urlcolor=[rgb]{0.0,0.2,0.6},
  linkcolor=[rgb]{0.0,0.2,0.6},
  citecolor=[rgb]{0.0,0.2,0.6}
}
\usepackage{fancyhdr}
\usepackage{microtype}
\usepackage{array}
\usepackage{multicol}
\usepackage{graphicx}
\usepackage{tikz}
\usetikzlibrary{shapes.symbols,arrows.meta,fit,positioning,calc}
\usepackage[most]{tcolorbox}
\tcbuselibrary{skins,breakable}
\usepackage{pifont}
\usepackage{tabularx}

% Visual styles
\definecolor{UHRed}{HTML}{C8102E}
\definecolor{ExamGold}{HTML}{F2C94C}
\definecolor{InfoBlue}{HTML}{2D9CDB}
\definecolor{SoftGray}{HTML}{F4F6F8}
\definecolor{Ink}{HTML}{1F2937}
\definecolor{GreenOK}{HTML}{2E7D32}
\definecolor{Warn}{HTML}{B00020}
\definecolor{CodeBg}{HTML}{F0F4F8}
\definecolor{HeaderBlue}{HTML}{1565C0}

\pagecolor{white}
\color{Ink}

% Section formatting
\titleformat{\section}{\Large\bfseries\sffamily\color{UHRed}}{}{0em}{}
\titleformat{\subsection}{\large\bfseries\sffamily\color{Ink}}{}{0em}{}
\titleformat{\subsubsection}{\bfseries\sffamily\color{Ink}}{}{0em}{}
\setlist[itemize]{topsep=4pt,itemsep=2pt,parsep=0pt,partopsep=2pt}
\setlist[enumerate]{topsep=4pt,itemsep=2pt,parsep=0pt,partopsep=2pt}

% Custom boxes
\newtcolorbox{examhint}{
  enhanced, breakable,
  colback=ExamGold!20, colframe=UHRed!70!black,
  coltitle=black,
  title={Key Point}, fonttitle=\bfseries\sffamily,
  attach boxed title to top left={yshift=-2mm, xshift=3mm},
  boxed title style={colback=ExamGold, colframe=UHRed!70!black},
  left=6mm,right=6mm,top=3mm,bottom=3mm
}
\newtcolorbox{lecturehint}{
  enhanced, breakable,
  colback=SoftGray, colframe=InfoBlue!60!black,
  title={Note}, fonttitle=\bfseries\sffamily,
  left=6mm,right=6mm,top=3mm,bottom=3mm
}
\newtcolorbox{definition}{
  enhanced, breakable,
  colback=white, colframe=Ink!20!black,
  title={Definition}, fonttitle=\bfseries\sffamily,
  borderline west={2pt}{0pt}{InfoBlue},
  left=6mm,right=6mm,top=3mm,bottom=3mm
}
\newtcolorbox{examplebox}{
  enhanced, breakable,
  colback=white, colframe=Ink!20!black,
  title={Example}, fonttitle=\bfseries\sffamily,
  borderline west={2pt}{0pt}{UHRed},
  left=6mm,right=6mm,top=3mm,bottom=3mm
}
\newcommand{\cmark}{\textcolor{GreenOK}{\ding{51}}}
\newcommand{\xmark}{\textcolor{Warn}{\ding{55}}}

\usepackage{advdate}

\makeatletter
\def\maketitle{%
  \AdvanceDate[-1]
  % ── Brand banner ──────────────────────────────────────────────────────────
  \begin{tcolorbox}[
    enhanced, sharp corners, boxrule=0pt,
    colback=HeaderBlue, colframe=HeaderBlue,
    left=5mm, right=5mm, top=4mm, bottom=4mm,
    after skip=0pt,
  ]
    \begin{minipage}[c]{0.6\linewidth}
      {\fontsize{22}{24}\selectfont\sffamily\bfseries\color{white}WDS}%
      \hspace{7pt}{\small\sffamily\color{white!65!HeaderBlue}WebDevSimplified}
    \end{minipage}%
    \begin{minipage}[c]{0.4\linewidth}
      \raggedleft{\small\sffamily\itshape\color{white!65!HeaderBlue}\today}
    \end{minipage}
  \end{tcolorbox}
  \AdvanceDate[1]
  % ── Title block ───────────────────────────────────────────────────────────
  \begin{tcolorbox}[
    enhanced, sharp corners,
    colback=white, frame hidden,
    before skip=0pt,
    borderline west={0.4pt}{0pt}{Ink!15},
    borderline east={0.4pt}{0pt}{Ink!15},
    borderline south={0.4pt}{0pt}{Ink!15},
    left=2mm, right=2mm, top=5mm, bottom=5mm,
  ]
  {\LARGE\sffamily\bfseries\color{Ink}What Is TypeScript?}
  \par\vspace{3pt}
  {\small\sffamily\color{HeaderBlue!80!black}Setup Series\enspace\textbullet\enspace TypeScript}
  \end{tcolorbox}
  \vspace{1em}
}
\makeatother

\pagestyle{fancy}
\fancyhf{}
\fancyfoot[L]{\small\sffamily\color{Ink}WebDevSimplified}
\fancyfoot[C]{\small\sffamily\color{Ink}\thepage}
\fancyfoot[R]{\small\sffamily\color{Ink}Setup: What Is TypeScript?}
\renewcommand{\headrulewidth}{0pt}

\begin{document}
\maketitle

% ---- OVERVIEW ----
\section*{Overview}

This video is the course introduction. It covers:
\begin{enumerate}
  \item What TypeScript actually is and how it relates to JavaScript.
  \item How TypeScript code runs in the browser.
  \item The two distinct types of TypeScript developers.
  \item What this course does and does not teach.
  \item How to get the most out of the course.
\end{enumerate}

% ---- WHAT IS TYPESCRIPT ----
\section*{What Is TypeScript?}

\begin{definition}
\textbf{TypeScript} --- Normal JavaScript with a type system layered on top. Types let you declare what your variables, function parameters, and return values are supposed to be (strings, numbers, objects, etc.), enabling the compiler and your editor to catch bugs before runtime.
\end{definition}

Types provide two major benefits:
\begin{itemize}
  \item \textbf{Bug detection} --- The compiler flags type mismatches (e.g.\ passing a string where a number is expected) before you ever run the code.
  \item \textbf{Editor tooling} --- Accurate autocomplete, inline documentation, and refactoring support, because the editor now knows the shape of your data.
\end{itemize}

% ---- BROWSERS CAN'T RUN TYPESCRIPT ----
\section*{Browsers Can't Run TypeScript}

\begin{examhint}
Browsers can only execute JavaScript. TypeScript must be \textbf{compiled} down to JavaScript before it can run anywhere. The compilation step simply \textbf{strips all type annotations} --- no type information survives into the output. This is why TypeScript has zero runtime cost.
\end{examhint}

The compilation pipeline looks like this:

\vspace{0.5em}
\begin{center}
\begin{tikzpicture}[
  node distance=1.6cm,
  box/.style={
    rectangle, rounded corners=4pt,
    draw=Ink!30, fill=SoftGray,
    minimum width=2.8cm, minimum height=1cm,
    font=\sffamily\small, align=center
  },
  arrow/.style={-{Stealth[length=6pt]}, thick, color=InfoBlue}
]
  \node[box] (ts) {\texttt{.ts} file\\(TypeScript)};
  \node[box, right=of ts] (tsc) {TypeScript\\Compiler (TSC)};
  \node[box, right=of tsc] (js) {\texttt{.js} file\\(JavaScript)};
  \node[box, right=of js] (browser) {Browser /\\Runtime};

  \draw[arrow] (ts) -- (tsc);
  \draw[arrow] (tsc) -- (js) node[midway, above, font=\tiny\sffamily, color=Warn] {types stripped};
  \draw[arrow] (js) -- (browser);
\end{tikzpicture}
\end{center}
\vspace{0.5em}

% ---- SUPERSET ----
\section*{TypeScript Is a Superset of JavaScript}

\begin{definition}
\textbf{Superset} --- A language that contains everything another language has, plus additional features. Because TypeScript is a superset of JavaScript, \emph{all valid JavaScript is valid TypeScript}. You can rename a \texttt{.js} file to \texttt{.ts} and it will compile without changes.
\end{definition}

\noindent TypeScript only \emph{adds} things on top of JavaScript --- it never removes or changes existing behavior. This means you can adopt TypeScript incrementally in an existing JavaScript codebase.

\begin{examplebox}
Take any existing \texttt{app.js} file. Rename it \texttt{app.ts}. The code compiles as-is because TypeScript is a strict superset --- it accepts all JavaScript syntax unchanged.
\end{examplebox}

% ---- TWO TYPES OF DEVELOPERS ----
\section*{Two Types of TypeScript Developers}

There is an important distinction between developers who \emph{use} TypeScript and developers who \emph{write} TypeScript:

\vspace{0.5em}
\begin{center}
\begin{tabularx}{0.95\textwidth}{
  >{\raggedright\arraybackslash}X
  >{\raggedright\arraybackslash}X
}
\hline
\textbf{Use TypeScript} & \textbf{Write TypeScript} \\
\hline
Everyday web developers building apps & Library authors creating tools for other developers \\
Need solid, practical knowledge of common patterns & Require deep mastery of advanced, niche TypeScript features \\
\textasciitilde{}10--20\% of total TypeScript knowledge & Full breadth of the language \\
\textbf{What this course teaches} & Not covered in this course \\
\hline
\end{tabularx}
\end{center}
\vspace{0.5em}

\begin{lecturehint}
Writing TypeScript libraries (e.g.\ defining complex generic types for a framework) requires significantly more in-depth knowledge than using TypeScript on the job. This course focuses exclusively on the practical, job-relevant subset.
\end{lecturehint}

% ---- COURSE SCOPE ----
\section*{Course Scope}

\subsection*{What This Course Covers}
The TypeScript skills required to \textbf{land and succeed in a web developer job}. This is a deliberately scoped, practical curriculum --- not an exhaustive reference of every TypeScript feature.

\subsection*{What This Course Does Not Cover}
Advanced library-authoring patterns, complex type gymnastics, and niche features only needed when publishing TypeScript packages for other developers.

\begin{examhint}
The instructor's reasoning: teaching 100\% of TypeScript when only 10--20\% applies to daily job work wastes your time. The focused approach gets you job-ready faster with knowledge you'll actually use every day.
\end{examhint}

% ---- HOW TO GET THE MOST OUT OF THIS COURSE ----
\section*{How to Get the Most Out of This Course}

\begin{itemize}
  \item \textbf{Go slowly and deliberately.} Don't rush past concepts. Every topic builds directly on previous ones --- gaps in understanding compound quickly.
  \item \textbf{Practice each concept.} Work through the exercises. Passive watching is not enough; you need to write the code yourself.
  \item \textbf{Use it as a reference.} The course is structured so you can return to any individual video on a specific topic after completing it. It is designed to be a living reference, not a one-time watch.
\end{itemize}

\begin{lecturehint}
The course is intentionally structured as a reference library --- each video is self-contained enough that you can look up ``how do interfaces work in TypeScript?'' in six months and watch just that video. This makes it more valuable than docs for quick refreshers.
\end{lecturehint}

% ---- PREREQUISITES ----
\section*{Prerequisites}

\begin{examhint}
You \textbf{must know JavaScript} before taking this course. TypeScript builds directly on JavaScript --- you cannot learn TypeScript without a solid JavaScript foundation. The good news: TypeScript is considerably easier to learn than JavaScript was, so progress should feel faster.
\end{examhint}

% ---- KEY CONCEPTS SUMMARY ----
\section*{Key Concepts Summary}

\begin{definition}
\textbf{TypeScript} --- JavaScript with a type system. Types define the shape of your data; the compiler uses them to catch bugs and power editor tooling.\\[4pt]
\textbf{Compilation} --- The process of converting \texttt{.ts} files to \texttt{.js} files by stripping all type annotations. Browsers only ever see the resulting JavaScript.\\[4pt]
\textbf{Superset} --- TypeScript contains all of JavaScript plus additional features. All valid JavaScript is valid TypeScript.\\[4pt]
\textbf{Use vs.\ Write} --- Developers who \emph{use} TypeScript in apps need a practical subset; developers who \emph{write} TypeScript libraries need deep mastery. This course targets the former.
\end{definition}

% ---- CHECKLIST ----
\section*{Quick Reference Checklist}

\begin{multicols}{2}
\begin{itemize}[leftmargin=8pt]
  \item TypeScript = JavaScript + types \cmark
  \item Types catch bugs before runtime \cmark
  \item Types power editor autocomplete \cmark
  \item Browsers cannot run TypeScript \cmark
  \item TSC compiles \texttt{.ts} $\to$ \texttt{.js} \cmark
  \item Compilation strips all type info \cmark
  \item Zero runtime cost for types \cmark
  \item TS is a strict superset of JS \cmark
  \item All valid JS is valid TS \cmark
  \item Two developer types: use vs.\ write \cmark
  \item Course targets job-ready skills only \cmark
  \item \textasciitilde{}10--20\% of TS needed for jobs \cmark
  \item Go slowly; concepts build on each other \cmark
  \item Course doubles as a reference library \cmark
  \item Prerequisite: solid JavaScript knowledge \cmark
\end{itemize}
\end{multicols}

\end{document}
```

```latex
% !TEX program = xelatex
\documentclass[11pt]{article}

% Encoding and fonts
\usepackage{fontspec}
\setmainfont{TeX Gyre Pagella}
\setsansfont{TeX Gyre Heros}
\setmonofont{JetBrains Mono}
\usepackage{xcolor}
\usepackage[a4paper,margin=0.7in]{geometry}
\usepackage{enumitem}
\usepackage{titlesec}
\usepackage{hyperref}
\hypersetup{
  colorlinks=true,
  urlcolor=[rgb]{0.0,0.2,0.6},
  linkcolor=[rgb]{0.0,0.2,0.6},
  citecolor=[rgb]{0.0,0.2,0.6}
}
\usepackage{fancyhdr}
\usepackage{microtype}
\usepackage{array}
\usepackage{multicol}
\usepackage{tabularx}
\usepackage{graphicx}
\usepackage{tikz}
\usetikzlibrary{shapes.symbols,arrows.meta,fit,positioning,calc}
\usepackage[most]{tcolorbox}
\tcbuselibrary{skins,breakable}
\usepackage{pifont}
\usepackage{fvextra}
\usepackage{minted}
\setminted{
  bgcolor=CodeBg,
  fontsize=\small,
  breaklines=true,
  frame=none,
  linenos=false,
}

% Visual styles
\definecolor{UHRed}{HTML}{C8102E}
\definecolor{ExamGold}{HTML}{F2C94C}
\definecolor{InfoBlue}{HTML}{2D9CDB}
\definecolor{SoftGray}{HTML}{F4F6F8}
\definecolor{Ink}{HTML}{1F2937}
\definecolor{GreenOK}{HTML}{2E7D32}
\definecolor{Warn}{HTML}{B00020}
\definecolor{CodeBg}{HTML}{F0F4F8}
\definecolor{HeaderBlue}{HTML}{1565C0}

\pagecolor{white}
\color{Ink}

% Section formatting
\titleformat{\section}{\Large\bfseries\sffamily\color{UHRed}}{}{0em}{}
\titleformat{\subsection}{\large\bfseries\sffamily\color{Ink}}{}{0em}{}
\titleformat{\subsubsection}{\bfseries\sffamily\color{Ink}}{}{0em}{}
\setlist[itemize]{topsep=4pt,itemsep=2pt,parsep=0pt,partopsep=2pt}
\setlist[enumerate]{topsep=4pt,itemsep=2pt,parsep=0pt,partopsep=2pt}

% Custom boxes
\newtcolorbox{examhint}{
  enhanced, breakable,
  colback=ExamGold!20, colframe=UHRed!70!black,
  coltitle=black,
  title={Key Point}, fonttitle=\bfseries\sffamily,
  attach boxed title to top left={yshift=-2mm, xshift=3mm},
  boxed title style={colback=ExamGold, colframe=UHRed!70!black},
  left=6mm,right=6mm,top=3mm,bottom=3mm
}
\newtcolorbox{lecturehint}{
  enhanced, breakable,
  colback=SoftGray, colframe=InfoBlue!60!black,
  title={Note}, fonttitle=\bfseries\sffamily,
  left=6mm,right=6mm,top=3mm,bottom=3mm
}
\newtcolorbox{definition}{
  enhanced, breakable,
  colback=white, colframe=Ink!20!black,
  title={Definition}, fonttitle=\bfseries\sffamily,
  borderline west={2pt}{0pt}{InfoBlue},
  left=6mm,right=6mm,top=3mm,bottom=3mm
}
\newtcolorbox{examplebox}{
  enhanced, breakable,
  colback=white, colframe=Ink!20!black,
  title={Example}, fonttitle=\bfseries\sffamily,
  borderline west={2pt}{0pt}{UHRed},
  left=6mm,right=6mm,top=3mm,bottom=3mm
}
\newcommand{\cmark}{\textcolor{GreenOK}{\ding{51}}}
\newcommand{\xmark}{\textcolor{Warn}{\ding{55}}}

\usepackage{advdate}

\makeatletter
\def\maketitle{%
  \AdvanceDate[-1]
  \begin{tcolorbox}[
    enhanced, sharp corners, boxrule=0pt,
    colback=HeaderBlue, colframe=HeaderBlue,
    left=5mm, right=5mm, top=4mm, bottom=4mm,
    after skip=0pt,
  ]
    \begin{minipage}[c]{0.6\linewidth}
      {\fontsize{22}{24}\selectfont\sffamily\bfseries\color{white}WDS}%
      \hspace{7pt}{\small\sffamily\color{white!65!HeaderBlue}WebDevSimplified}
    \end{minipage}%
    \begin{minipage}[c]{0.4\linewidth}
      \raggedleft{\small\sffamily\itshape\color{white!65!HeaderBlue}\today}
    \end{minipage}
  \end{tcolorbox}
  \AdvanceDate[1]
  \begin{tcolorbox}[
    enhanced, sharp corners,
    colback=white, frame hidden,
    before skip=0pt,
    borderline west={0.4pt}{0pt}{Ink!15},
    borderline east={0.4pt}{0pt}{Ink!15},
    borderline south={0.4pt}{0pt}{Ink!15},
    left=2mm, right=2mm, top=5mm, bottom=5mm,
  ]
  {\LARGE\sffamily\bfseries\color{Ink}Why Use TypeScript?}
  \par\vspace{3pt}
  {\small\sffamily\color{HeaderBlue!80!black}Setup Series\enspace\textbullet\enspace TypeScript}
  \end{tcolorbox}
  \vspace{1em}
}
\makeatother

\pagestyle{fancy}
\fancyhf{}
\fancyfoot[L]{\small\sffamily\color{Ink}WebDevSimplified}
\fancyfoot[C]{\small\sffamily\color{Ink}\thepage}
\fancyfoot[R]{\small\sffamily\color{Ink}Setup: Why Use TypeScript?}
\renewcommand{\headrulewidth}{0pt}

\begin{document}
\maketitle

% ---- OVERVIEW ----
\section*{Overview}

This video directly addresses the most common objection to TypeScript and makes the case for adopting it. It covers:

\begin{enumerate}
  \item Debunking the myth that TypeScript slows you down.
  \item How VS Code infers types in plain JavaScript --- and where that breaks.
  \item The silent bug problem in JavaScript.
  \item How TypeScript restores full autocomplete \emph{and} adds error protection everywhere.
  \item The minimal cost of adding TypeScript to your code.
  \item Industry adoption as a practical career reason.
\end{enumerate}

% ---- THE MYTH ----
\section*{The Common Myth}

\begin{tcolorbox}[
  enhanced, sharp corners,
  colback=Warn!8, colframe=Warn!60,
  left=6mm, right=6mm, top=3mm, bottom=3mm,
  fontupper=\sffamily
]
\textbf{Myth:} ``TypeScript makes writing code more difficult and time-consuming because you have to add all those extra types.''
\end{tcolorbox}

\vspace{0.5em}

\noindent The instructor's position is the opposite: TypeScript makes writing code \textbf{significantly faster}, especially on larger projects, through two mechanisms:

\begin{itemize}
  \item Reliable, context-aware \textbf{autocomplete everywhere} in the codebase.
  \item Compile-time \textbf{bug detection} that catches mistakes JavaScript would silently ignore.
\end{itemize}

% ---- VS CODE TYPE INFERENCE IN JS ----
\section*{VS Code Type Inference in Plain JavaScript}

VS Code is smart. When you write plain JavaScript, it runs a TypeScript-powered inference engine under the hood and attempts to figure out your types from context.

\begin{examplebox}
\begin{minted}{javascript}
const button = document.createElement('button');
button.addEventListener('click', (e) => {
  console.log(e.target);
});
\end{minted}
VS Code correctly infers that \texttt{button} is an \texttt{HTMLButtonElement} and that \texttt{e} is a \texttt{MouseEvent} --- providing accurate autocomplete for both.
\end{examplebox}

\noindent This works because everything is \emph{inline} --- VS Code can trace the full chain from \texttt{createElement('button')} through the listener in one pass.

% ---- WHERE JS INFERENCE BREAKS DOWN ----
\section*{Where JavaScript Inference Breaks Down}

As soon as you refactor into a named function, VS Code loses the thread:

\begin{examplebox}
\begin{minted}{javascript}
// Inline — VS Code can infer e is MouseEvent ✓
button.addEventListener('click', (e) => { console.log(e.target); });

// Extracted — VS Code has no idea what e is ✗
button.addEventListener('click', handleClick);

function handleClick(e) {
  console.log(e.anyTarget); // typo — no error, no autocomplete
}
\end{minted}
\end{examplebox}

\noindent When \texttt{handleClick} is defined separately, VS Code has no context to infer what \texttt{e} is. Hovering over \texttt{e} shows only \texttt{any} --- the type system has gone blind.

\begin{examhint}
This breakdown is not hypothetical. Real codebases extract logic into functions constantly. JavaScript's inference only works for trivially simple, inline code. The moment complexity increases, you lose all the benefits.
\end{examhint}

% ---- THE SILENT BUG PROBLEM ----
\section*{The Silent Bug Problem in JavaScript}

This is the deeper danger. JavaScript does not throw an error when you access a property that does not exist on an object --- it returns \texttt{undefined}:

\begin{examplebox}
\begin{minted}{javascript}
function handleClick(e) {
  console.log(e.anyTarget); // misspelled — intended: e.target
}
// Output: undefined  (no error thrown, no warning, no indication)
\end{minted}
\end{examplebox}

\vspace{0.5em}
\begin{center}
\begin{tikzpicture}[
  node distance=1.4cm,
  box/.style={
    rectangle, rounded corners=4pt,
    draw=Ink!25, fill=SoftGray,
    minimum width=3cm, minimum height=0.9cm,
    font=\sffamily\small, align=center
  },
  badbox/.style={
    rectangle, rounded corners=4pt,
    draw=Warn!60, fill=Warn!10,
    minimum width=3cm, minimum height=0.9cm,
    font=\sffamily\small, align=center
  },
  arrow/.style={-{Stealth[length=6pt]}, thick, color=Ink!50}
]
  \node[box] (dev) {Developer\\types \texttt{e.anyTarget}};
  \node[badbox, right=1.6cm of dev] (js) {JavaScript\\silently returns \texttt{undefined}};
  \node[badbox, right=1.6cm of js] (prod) {Bug ships\\to production};

  \draw[arrow] (dev) -- (js);
  \draw[arrow] (js) -- (prod);

  \node[font=\tiny\sffamily\color{Warn}, below=0.1cm of js] {no error, no warning};
\end{tikzpicture}
\end{center}
\vspace{0.5em}

\noindent This class of bug is \textbf{impossible to detect in plain JavaScript} without running the code, finding the wrong output, tracing it back, and realizing the typo. On large codebases this can cost significant debugging time.

% ---- TYPESCRIPT TO THE RESCUE ----
\section*{TypeScript to the Rescue}

Switching the file to \texttt{.ts} and adding a type annotation to the function parameter unlocks two things simultaneously:

\begin{enumerate}
  \item \textbf{Error on the typo} --- TypeScript immediately flags that \texttt{anyTarget} does not exist on \texttt{MouseEvent}.
  \item \textbf{Full autocomplete restored} --- because TypeScript now knows the exact shape of \texttt{e}, the editor can offer every valid property (\texttt{target}, \texttt{currentTarget}, \texttt{clientX}, etc.).
\end{enumerate}

\begin{examplebox}
\begin{minted}{typescript}
function handleClick(e: MouseEvent) {
  console.log(e.anyTarget); // Error: Property 'anyTarget' does not exist on type 'MouseEvent'
  console.log(e.target);    // ✓ — full autocomplete available
}
\end{minted}
One word (\texttt{MouseEvent}) added to the code. Both problems solved.
\end{examplebox}

\begin{examhint}
The instructor's key observation: to get all of this --- full autocomplete and compile-time bug detection --- he had to add \textbf{one word} to his code. The return on investment is enormous.
\end{examhint}

% ---- JS VS TS COMPARISON ----
\section*{JavaScript vs.\ TypeScript: Autocomplete \& Safety}

\begin{center}
\begin{tabularx}{0.96\textwidth}{
  >{\raggedright\arraybackslash}X
  >{\raggedright\arraybackslash}X
  >{\raggedright\arraybackslash}X
}
\hline
\textbf{Scenario} & \textbf{Plain JavaScript} & \textbf{TypeScript} \\
\hline
Inline simple code & Autocomplete works (VS Code infers) & Autocomplete works \\
Extracted function & Inference breaks, \texttt{any} type & Autocomplete works everywhere \\
Typo on property & Silent \texttt{undefined}, no error & Compile-time error, caught immediately \\
Non-existent property & Returns \texttt{undefined} silently & Error: property does not exist \\
Hover for type info & Shows \texttt{any} or nothing & Shows exact type \\
\hline
\end{tabularx}
\end{center}

% ---- MINIMAL COST, MAXIMUM BENEFIT ----
\section*{Minimal Cost, Maximum Benefit}

\begin{definition}
\textbf{The TypeScript value proposition} --- A small amount of type annotation code yields disproportionately large gains in editor tooling and bug prevention. You do not need to annotate everything; even minimal typing unlocks significant productivity.
\end{definition}

\begin{lecturehint}
The demo showed the entire difference between the broken JavaScript version and the fixed TypeScript version was a single type annotation: \texttt{e: MouseEvent}. This is the pattern throughout TypeScript --- targeted, minimal annotations that unlock full type inference for surrounding code.
\end{lecturehint}

% ---- INDUSTRY ADOPTION ----
\section*{Industry Adoption}

Even if the technical benefits alone are not convincing, there is a strong pragmatic career reason to learn TypeScript:

\begin{itemize}
  \item Most companies are \textbf{already using TypeScript} or are actively converting their codebases.
  \item TypeScript's popularity is on a \textbf{continuous upward trajectory}.
  \item What is currently listed as a ``nice to have'' on job postings is increasingly becoming a \textbf{hard requirement}.
\end{itemize}

\begin{examhint}
TypeScript knowledge is trending from optional to mandatory in the industry. Learning it now is not just about writing better code --- it directly expands the set of jobs you are qualified for.
\end{examhint}

% ---- KEY CONCEPTS SUMMARY ----
\section*{Key Concepts Summary}

\begin{definition}
\textbf{VS Code Type Inference} --- VS Code uses a TypeScript engine to infer types in plain JavaScript files. It works well for simple inline code but fails as soon as logic is extracted into separate functions.\\[4pt]
\textbf{Silent Bug} --- A bug in JavaScript that produces no error. Accessing a non-existent property on an object returns \texttt{undefined} rather than throwing, meaning typos and logic errors can go completely undetected.\\[4pt]
\textbf{Type Annotation} --- Explicit declaration of a value's type (e.g.\ \texttt{e: MouseEvent}). Tells TypeScript exactly what a variable is, enabling both error detection and full autocomplete for that type.
\end{definition}

% ---- CHECKLIST ----
\section*{Quick Reference Checklist}

\begin{multicols}{2}
\begin{itemize}[leftmargin=8pt]
  \item TS makes coding \emph{faster}, not slower \cmark
  \item Benefits: autocomplete + bug detection \cmark
  \item VS Code infers types in plain JS \cmark
  \item Inference only works for simple inline code \cmark
  \item Extracted functions break JS inference \cmark
  \item JS: property typos return \texttt{undefined} silently \cmark
  \item Silent bugs can ship to production undetected \cmark
  \item \texttt{.ts} file + one type annotation fixes both issues \cmark
  \item Autocomplete restored across entire function \cmark
  \item Compile-time error on non-existent properties \cmark
  \item Minimal annotations, maximal benefit \cmark
  \item Most companies already use or are adopting TS \cmark
  \item TS shifting from nice-to-have to required \cmark
  \item Industry adoption = direct career impact \cmark
\end{itemize}
\end{multicols}

\end{document}
```

```latex
% !TEX program = xelatex
\documentclass[11pt]{article}

% Encoding and fonts
\usepackage{fontspec}
\setmainfont{TeX Gyre Pagella}
\setsansfont{TeX Gyre Heros}
\setmonofont{JetBrains Mono}
\usepackage{xcolor}
\usepackage[a4paper,margin=0.7in]{geometry}
\usepackage{enumitem}
\usepackage{titlesec}
\usepackage{hyperref}
\hypersetup{
  colorlinks=true,
  urlcolor=[rgb]{0.0,0.2,0.6},
  linkcolor=[rgb]{0.0,0.2,0.6},
  citecolor=[rgb]{0.0,0.2,0.6}
}
\usepackage{fancyhdr}
\usepackage{microtype}
\usepackage{array}
\usepackage{multicol}
\usepackage{graphicx}
\usepackage{tikz}
\usetikzlibrary{shapes.symbols,arrows.meta,fit,positioning,calc}
\usepackage[most]{tcolorbox}
\tcbuselibrary{skins,breakable}
\usepackage{pifont}
\usepackage{fvextra}        % Must come BEFORE minted — patches fancyvrb for breaklines
\usepackage{minted}
\setminted{
  bgcolor=CodeBg,
  fontsize=\small,
  breaklines=true,
  frame=none,
  linenos=false,
}

% Visual styles
\definecolor{UHRed}{HTML}{C8102E}
\definecolor{ExamGold}{HTML}{F2C94C}
\definecolor{InfoBlue}{HTML}{2D9CDB}
\definecolor{SoftGray}{HTML}{F4F6F8}
\definecolor{Ink}{HTML}{1F2937}
\definecolor{GreenOK}{HTML}{2E7D32}
\definecolor{Warn}{HTML}{B00020}
\definecolor{CodeBg}{HTML}{F0F4F8}
\definecolor{HeaderBlue}{HTML}{1565C0} % Dark blue for header banner

\pagecolor{white}
\color{Ink}

% ---- LISTINGS (terminal / shell) ----
\usepackage{listings}
\definecolor{TermPrompt}{HTML}{2E7D32}
\definecolor{TermKeyword}{HTML}{0D47A1}
\definecolor{TermSubcmd}{HTML}{00695C}
\definecolor{TermFlag}{HTML}{B71C1C}

\lstdefinelanguage{shellsession}{
  alsoletter={-},
  keywords=[1]{npm, npx, node},
  keywords=[2]{tsc, init, install, run, start},
  keywords=[3]{-y, --save-dev, --init, --noEmitOnError},
  sensitive=true,
  morecomment=[l]{\#},
}

\lstdefinestyle{terminal}{
  language=shellsession,
  backgroundcolor=\color{CodeBg},
  basicstyle=\small\ttfamily\color{Ink},
  keywordstyle=[1]\bfseries\color{TermKeyword},
  keywordstyle=[2]\color{TermSubcmd},
  keywordstyle=[3]\color{TermFlag},
  commentstyle=\itshape\color{gray},
  breaklines=true,
  columns=flexible,
  keepspaces=true,
  showstringspaces=false,
  literate={$}{\textcolor{TermPrompt}{\textbf{\$}}}{1},
  xleftmargin=1em,
  xrightmargin=1em,
  aboveskip=6pt,
  belowskip=6pt,
}

% Section formatting
\titleformat{\section}{\Large\bfseries\sffamily\color{UHRed}}{}{0em}{}
\titleformat{\subsection}{\large\bfseries\sffamily\color{Ink}}{}{0em}{}
\titleformat{\subsubsection}{\bfseries\sffamily\color{Ink}}{}{0em}{}
\setlist[itemize]{topsep=4pt,itemsep=2pt,parsep=0pt,partopsep=2pt}
\setlist[enumerate]{topsep=4pt,itemsep=2pt,parsep=0pt,partopsep=2pt}

% Custom boxes
\newtcolorbox{examhint}{
  enhanced, breakable,
  colback=ExamGold!20, colframe=UHRed!70!black,
  coltitle=black,
  title={Key Point}, fonttitle=\bfseries\sffamily,
  attach boxed title to top left={yshift=-2mm, xshift=3mm},
  boxed title style={colback=ExamGold, colframe=UHRed!70!black},
  left=6mm,right=6mm,top=3mm,bottom=3mm
}
\newtcolorbox{lecturehint}{
  enhanced, breakable,
  colback=SoftGray, colframe=InfoBlue!60!black,
  title={Note}, fonttitle=\bfseries\sffamily,
  left=6mm,right=6mm,top=3mm,bottom=3mm
}
\newtcolorbox{definition}{
  enhanced, breakable,
  colback=white, colframe=Ink!20!black,
  title={Definition}, fonttitle=\bfseries\sffamily,
  borderline west={2pt}{0pt}{InfoBlue},
  left=6mm,right=6mm,top=3mm,bottom=3mm
}
\newtcolorbox{examplebox}{
  enhanced, breakable,
  colback=white, colframe=Ink!20!black,
  title={Example}, fonttitle=\bfseries\sffamily,
  borderline west={2pt}{0pt}{UHRed},
  left=6mm,right=6mm,top=3mm,bottom=3mm
}
\newcommand{\cmark}{\textcolor{GreenOK}{\ding{51}}}
\newcommand{\xmark}{\textcolor{Warn}{\ding{55}}}

\usepackage{advdate}

\makeatletter
\def\maketitle{%
  \AdvanceDate[-1]
  % ── Brand banner ──────────────────────────────────────────────────────────
  \begin{tcolorbox}[
    enhanced, sharp corners, boxrule=0pt,
    colback=HeaderBlue, colframe=HeaderBlue,
    left=5mm, right=5mm, top=4mm, bottom=4mm,
    after skip=0pt,
  ]
    \begin{minipage}[c]{0.6\linewidth}
      {\fontsize{22}{24}\selectfont\sffamily\bfseries\color{white}WDS}%
      \hspace{7pt}{\small\sffamily\color{white!65!HeaderBlue}WebDevSimplified}
    \end{minipage}%
    \begin{minipage}[c]{0.4\linewidth}
      \raggedleft{\small\sffamily\itshape\color{white!65!HeaderBlue}\today}
    \end{minipage}
  \end{tcolorbox}
  \AdvanceDate[1]
  % ── Title block ───────────────────────────────────────────────────────────
  \begin{tcolorbox}[
    enhanced, sharp corners,
    colback=white, frame hidden,
    before skip=0pt,
    borderline west={0.4pt}{0pt}{Ink!15},
    borderline east={0.4pt}{0pt}{Ink!15},
    borderline south={0.4pt}{0pt}{Ink!15},
    left=2mm, right=2mm, top=5mm, bottom=5mm,
  ]
  {\LARGE\sffamily\bfseries\color{Ink}How To Initialize A TypeScript Project}
  \par\vspace{3pt}
  {\small\sffamily\color{HeaderBlue!80!black}Setup Series\enspace\textbullet\enspace TypeScript}
  \end{tcolorbox}
  \vspace{1em}
}
\makeatother

\pagestyle{fancy}
\fancyhf{}
\fancyfoot[L]{\small\sffamily\color{Ink}WebDevSimplified}
\fancyfoot[C]{\small\sffamily\color{Ink}\thepage}
\fancyfoot[R]{\small\sffamily\color{Ink}Setup: Initialize TS project}
\renewcommand{\headrulewidth}{0pt}

\begin{document}
\maketitle

% ---- OVERVIEW ----
\section*{Overview}

There are two primary ways to set up a TypeScript project:
\begin{enumerate}
  \item \textbf{Manually using TSC} --- the TypeScript command-line compiler (this video).
  \item \textbf{Using a bundler} --- e.g.\ Vite (covered in the next video).
\end{enumerate}

\begin{lecturehint}
In 99\% of real-world use cases you will use a bundler or framework that handles compilation automatically. Understanding TSC directly is foundational knowledge, not your day-to-day workflow.
\end{lecturehint}

% ---- STEP 1: PROJECT INIT ----
\section*{Step 1 --- Initialize a Node Project}

Start by creating a new project and generating a \texttt{package.json} with all defaults:

\begin{lstlisting}[style=terminal]
$ npm init -y
\end{lstlisting}

\noindent The \texttt{-y} flag accepts all default values automatically. The resulting \texttt{package.json} is perfectly usable as-is for a TypeScript project.

% ---- STEP 2: INSTALL TYPESCRIPT ----
\section*{Step 2 --- Install the TypeScript Compiler}

Install TypeScript as a \textbf{dev dependency}:

\begin{lstlisting}[style=terminal]
$ npm install --save-dev typescript
\end{lstlisting}

\begin{examhint}
\textbf{Why a dev dependency?} TypeScript is a development-time tool. You compile your code locally and ship the resulting JavaScript to production --- the compiler itself never runs in production. Installing it locally (rather than globally) also \textbf{version-stamps} it in \texttt{package.json}, so everyone on the project uses the exact same compiler version.
\end{examhint}

\begin{definition}
\textbf{Dev Dependency} --- A package only needed during development/build time, not at runtime. Listed under \texttt{devDependencies} in \texttt{package.json}. Excludes it from production bundles.
\end{definition}

% ---- STEP 3: CREATE A TS FILE ----
\section*{Step 3 --- Create a TypeScript File}

Rename or create a \texttt{.ts} file (e.g.\ \texttt{script.ts}). TypeScript is a superset of JavaScript, so valid JS is valid TS:

\begin{minted}{typescript}
const a = 1;

function sum(num1: number, num2: number) {
  return num1 + num2;
}
\end{minted}

\noindent Without a config file, TypeScript has no context about your project and won't provide full type checking or autocomplete. That's what the next step fixes.

% ---- STEP 4: INITIALIZE TSCONFIG ----
\section*{Step 4 --- Generate \texttt{tsconfig.json}}

Run the TypeScript initializer via \texttt{npx} (which executes the locally installed package):

\begin{lstlisting}[style=terminal]
$ npx tsc --init
\end{lstlisting}

\begin{definition}
\textbf{npx} --- A Node utility that runs executables from your local \texttt{node\_modules}. Using \texttt{npx tsc} ensures you run the project-local version of the TypeScript compiler, not some globally installed one.\\[4pt]
\textbf{tsconfig.json} --- The TypeScript project configuration file. Controls compiler behavior: target ECMAScript version, output directory, strict mode, and much more.
\end{definition}

\begin{lecturehint}
The generated \texttt{tsconfig.json} is heavily commented and large. You don't need to understand every option immediately --- the defaults are sensible for getting started. Options are explained throughout the course as they become relevant.
\end{lecturehint}

\noindent Once \texttt{tsconfig.json} exists, TypeScript understands your project scope and will immediately start reporting type errors for untyped code.

% ---- STEP 5: COMPILE ----
\section*{Step 5 --- Compile a TypeScript File}

To compile a single file:

\begin{lstlisting}[style=terminal]
$ npx tsc script.ts
\end{lstlisting}

This produces \texttt{script.js} in the same directory, with all TypeScript-specific syntax stripped out.

\subsection*{What the Compiler Does}
\begin{itemize}
  \item \textbf{Type erasure} --- Removes all type annotations (\texttt{: number}, interfaces, etc.).
  \item \textbf{Downleveling} --- Converts modern syntax to the target JS version. For example, with \texttt{target: ES2016} in \texttt{tsconfig.json}, \texttt{const} becomes \texttt{var}.
\end{itemize}

\begin{examhint}
The \texttt{target} field in \texttt{tsconfig.json} controls which ECMAScript version your output targets. A lower target (e.g.\ \texttt{ES2016}) means more downleveling --- newer syntax gets converted to older equivalents for browser/runtime compatibility.
\end{examhint}

% ---- ERROR BEHAVIOR ----
\section*{Compiler Error Behavior}

\subsection*{Default Behavior (Errors Still Output)}

By default, even if TypeScript reports a type error, it \textbf{still produces a JavaScript output file}. This can lead to shipping broken code.

\begin{examplebox}
Calling \texttt{sum(1)} instead of \texttt{sum(1, 2)} produces a type error in \texttt{script.ts}. Running \texttt{npx tsc script.ts} will print the error to the console \emph{but still write} \texttt{script.js} with the bad call in it.
\end{examplebox}

\subsection*{Preventing Output on Errors --- \texttt{noEmitOnError}}

To stop the compiler from writing output files when errors exist, pass the flag directly:

\begin{lstlisting}[style=terminal]
$ npx tsc script.ts --noEmitOnError
\end{lstlisting}

Or enable it permanently in \texttt{tsconfig.json}:

\begin{minted}{json}
{
  "compilerOptions": {
    "noEmitOnError": true
  }
}
\end{minted}

\begin{examhint}
\textbf{Always enable \texttt{noEmitOnError} in real projects.} Without it, a failed build still overwrites your output file with broken JavaScript. With it, the output only updates when the code is valid --- a much safer default.
\end{examhint}

% ---- KEY CONCEPTS ----
\section*{Key Concepts Summary}

\begin{definition}
\textbf{TSC (TypeScript Compiler)} --- The official CLI tool for compiling \texttt{.ts} files to \texttt{.js}. Invoked as \texttt{npx tsc}.\\[4pt]
\textbf{Type Erasure} --- The process of removing TypeScript-specific syntax during compilation, leaving only valid JavaScript.\\[4pt]
\textbf{Downleveling} --- Converting newer ECMAScript syntax to an older target version (e.g.\ \texttt{const} $\to$ \texttt{var} for ES2016 targets).\\[4pt]
\textbf{noEmitOnError} --- Compiler option that prevents JavaScript output when type errors are present.
\end{definition}

% ---- COMMAND REFERENCE ----
\section*{Command Reference}

\begin{center}
\begin{tabular}{>{\ttfamily}l >{\raggedright\arraybackslash}p{9cm}}
\hline
\normalfont\textbf{Command} & \textbf{Purpose} \\
\hline
npm init -y                          & Initialize project with default package.json \\
npm install --save-dev typescript    & Install TypeScript as a dev dependency \\
npx tsc --init                       & Generate tsconfig.json with commented defaults \\
npx tsc script.ts                    & Compile a single TypeScript file \\
npx tsc script.ts --noEmitOnError    & Compile, but skip output if errors exist \\
\hline
\end{tabular}
\end{center}

% ---- WHAT'S NEXT ----
\section*{What's Next}

\begin{lecturehint}
The next video covers setting up TypeScript with \textbf{Vite} --- a modern bundler that handles TSC compilation automatically behind the scenes. This is the approach you'll use in real projects.
\end{lecturehint}

% ---- CHECKLIST ----
\section*{Quick Reference Checklist}

\begin{multicols}{2}
\begin{itemize}[leftmargin=8pt]
  \item Two setup methods: TSC vs.\ bundler \cmark
  \item \texttt{npm init -y} initializes project \cmark
  \item TypeScript installed as \texttt{--save-dev} \cmark
  \item Why dev dependency, not production \cmark
  \item \texttt{npx} runs local executables \cmark
  \item \texttt{npx tsc --init} creates tsconfig.json \cmark
  \item tsconfig controls compiler behavior \cmark
  \item \texttt{target} field controls JS version output \cmark
  \item Type erasure: TS syntax stripped on compile \cmark
  \item Downleveling: \texttt{const} $\to$ \texttt{var} on old targets \cmark
  \item Default: errors still produce output \cmark
  \item \texttt{noEmitOnError}: blocks output on errors \cmark
  \item Enable \texttt{noEmitOnError} in config or CLI \cmark
  \item Next: Vite bundler setup \cmark
\end{itemize}
\end{multicols}

\end{document}
```