JavaScript and TypeScript: The Complete Guide (Vite & Node)

Explore the lexical structure of JavaScript, covering tokens, identifiers, literals, whitespace, comments, case sensitivity, keywords, and operators such as arithmetic, assignment, and comparison.

Define variables in JavaScript using var, let, and const, explore reassignment, semicolons, prettier formatting, and how TypeScript adds type safety, with examples of number and string types.

Declare with const to avoid redeclaration, use let only when needed, and default to camelCase; PascalCase and snake_case appear, with underscores or dollars allowed and numbers cannot start a name.

Explore primitive types and unions in TypeScript, including boolean, number, string, undefined, and null, and learn type inference, union types, and the role of any in the language.

Explore primitive types and unions in TypeScript by declaring string variables, observing type inference, and practicing explicit typing for string, string or number, and string or null.

Explore JavaScript arithmetic operators, unary operators, and type coercion, including plus, minus, multiply, divide, modulo, exponentiation, and the not a number concept, with template literals and quokka for output.

Learn how to coerce values to numbers using the plus sign. Parse int, parse float, and the number constructor, and booleans become 1 or 0.

Explore infinity in JavaScript as a global number value, including negative infinity, arithmetic with huge numbers, and division by zero producing infinity.

Master compound assignment operators in JavaScript by using x += 5, x *= 10, and x /= 10, with exponentiation and proper order of operations demonstrated.

Practice multiple ways to increment and decrement numbers, convert 20 to a string and 20.5 to a number, using unary operator, template literals, String, parseInt, Number, and compound operators.

Master if statements and conditional operators with booleans, including else paths, and understand strict equality for reliable comparisons in code.

Master if statements and else if chains, including nested conditionals, and use the modulus operator to determine even or odd numbers with clear console output.

Explore how JavaScript treats truthy and falsy values, including common pitfalls with inputs and the use of strict equality comparators and the not operator to validate values.

Solve two logical-operator challenges: use modulo with an if statement to check divisibility by three and five, and test strings for yes, no, maybe, or perhaps, printing pass or fail.

Install TypeScript as a dev dependency with npm, configure tsconfig.json, and compile TypeScript to JavaScript using tsc, producing JavaScript code for browsers and NodeJS runtimes.

Learn how while loops run code repeatedly while a condition is true, including using continue and break, handling infinite loops, and iterating from 1 to 10 in JavaScript.

Explain the do while loop as a variation of the while loop that runs its block at least once, then repeats while a condition holds, with examples in JavaScript.

Learn to solve while-loop challenges in JavaScript by computing the average of numbers 1 through 100. Exclude 55 using a conditional, and print numbers 1–10 in reverse.

Explore switch statements in JavaScript by mapping the day of the week to console logs, compare with if statements, and learn case, break, default, and block brackets.

Practice switch statements to evaluate a grade and a day of the week, using fall-through for concise messages, handling invalid inputs, and learning when to apply switches.

Explore for loops for fixed-number iterations, initializing a counter, condition, and increment, log from 0 to 100, and contrast with while loops driven by external factors.

Explore for loop challenges that compute the average between 1 and 100 inclusive, compare approaches for even numbers, and log 1–20 in reverse to reinforce concise loop practice.

Explore the ternary operator as a concise alternative to if statements. It returns a value based on a condition such as age, with const for clarity.

master fizzbuzz with JavaScript and TypeScript by implementing 1–100 output using for loops, if-else, switch on true, and nested ternaries, highlighting proper control flow and best-practice cautions.

Demonstrate scope in JavaScript, including global, block, and function scopes, and how const and let stay within their blocks. Explain hoisting, showing how var differs and why to avoid it.

Explore how functions act as reusable code blocks that take inputs, perform operations such as adding numbers, and return a value, with TypeScript enforcing return types like void and number.

Explore guard clauses to bail out of functions early, replacing nested ifs with single-line returns and clearer checks for invalid inputs.

Explore core JavaScript and TypeScript concepts by building functions: calculate average, add strings with template literals, square a number, and sum of squares, showcasing code reuse and avoiding duplication.

Explore how parameters passed by value work in JavaScript, showing that functions receive copies of primitive arguments from the stack. Modifications affect only the function's local values, not the originals.

Explore defining arrow functions using const, parameters, and => syntax, comparing them to anonymous functions; learn how arrow functions return values without the return keyword and how to invoke them.

Explore typing variables that hold functions with TypeScript's arrow function syntax and explicit return types. See how type mismatches trigger errors and learn when explicitly annotating your functions is useful.

Solve four challenges by creating anonymous, arrow, and regular functions to measure string length, find the max of two numbers, check evenness, and determine a value's type using typeof.

Learn how functions return other functions and how type aliases in TypeScript simplify complex signatures, with void and number returns, and practical patterns for clean, legible code.

Practice building an arrow function named Main that returns an anonymous function using two numbers, apply type aliases, invoke the main function, and log the sum.

explains immediately invoked function expressions and how to execute anonymous functions right away, returning values and avoiding boilerplate; covers arrow functions, type aliases, and compiling with tsc.

Dissect callback functions, showing how to pass and invoke a function as an argument; define a TypeScript callback type and use anonymous callbacks with numeric parameters.

Discover how objects store user data as key-value pairs, access properties with dot or bracket notation, and define methods using different function syntaxes, including this context versus arrow functions.

Explore adding, modifying, and removing object properties in TypeScript and JavaScript, including conditionally adding optional properties, using dot and bracket notation, and type aliases to ensure type safety.

Learn objects and pass-by-reference in JavaScript by updating a person's age, and see how heap storage affects in-place changes, then validate a product with simple property rules.

Master object destructuring in JavaScript and TypeScript, extracting first name, last name, and age; rename with colon, use rest operator, and access card item with item, price, and quantity.

Explore optional chaining and the nullish coalescing operator to safely access nested session data and simplify permission checks in TypeScript and JavaScript.

Learn the non-null assertion operator to claim a value isn't null or undefined. Use it sparingly; prefer optional chaining with the knowledge coalescing operator for fallbacks.

Learn how to create read-only objects with Object.freeze and its limits on nested properties, including optional chaining caveats. Explore type-level read-only properties in TypeScript and runtime enforcement.

Explore how arrays store multiple items under a single variable and grow dynamically. Learn TypeScript typing for arrays, unions, empty arrays, and indexing from zero with the push method.

Explore fundamental array properties and methods in JavaScript, including length, push, pop, shift, unshift, and the toString and join methods to convert arrays to strings and customize separators.

Define a cart item type with product name, quantity, and price. Implement add item to cart and clear cart methods using consistent TypeScript syntax.

Explore how to nest arrays in TypeScript by using unions to allow numbers or arrays of numbers, and observe how TypeScript infers element types.

Explore tuples as fixed-size arrays defined by TypeScript and enforce immutability with the read only modifier. Destructure tuples and arrays, and use type aliases to simplify code.

Explore the rest and spread operators in JavaScript, learning how to collect an arbitrary number of arguments, spread arrays into new structures, and destructure to extract or keep remaining elements.

Learn to iterate arrays with the for of loop, replace counters with element variables, log values, and use a contains function, plus guidance on object parameters and destructuring for clarity.

Learn to add to cart and remove items by id using a temporary array, then compare with a splice-based approach via array entries.

Explore the forEach method to iterate arrays declaratively with a callback that receives each element, its index, and the array, then build a student type and log names using destructuring.

Explore the map method to transform a student array into a new array with is adult, while preserving the original, using destructuring and rest/spread to omit age.

Explore using the find method to locate the first element that satisfies a predicate, returning that element or undefined, with a practical adult example and a challenge.

Discover how the filter method creates a new array by keeping elements that pass a predicate, without mutating the original, using a callback with element, index, and array, filtering adults.

Explore every and some array methods using a predicate to check if all or one student is an adult (age >= 18); implement declarative and imperative versions with for loop.

this lecture explains the reduce method, the accumulator and initializer, and walks through callback with previous and current values, ending with a longest word challenge.

Explore a compact guide to array methods, featuring the forage method, filter, map, every, sum, define, find index, and reduce, with practical examples showing when to use each.

Learn how to make objects iterable with for-in, Object.keys, Object.values, and Object.entries; ensure ES2017 compatibility and destructure tuples to access keys and values.

Explore object oriented programming, learning how classes act as blueprints with properties and methods, and how constructors and the new keyword instantiate objects.

Design and implement employee and manager classes in TypeScript, with id, name, title, salary, and direct reports, plus methods to change title, get salary, and manage reports.

Explore polymorphism in object oriented programming by overriding the parent method and using super to extend the base get salary logic, enabling flexible and extensible behavior.

Explore how interfaces differ from type aliases in TypeScript, using implements, extends, and class-based object-oriented patterns to enforce structure while keeping types flexible.

Understand private, public, and protected access modifiers, explore read only properties, and see how inheritance and constructor property declarations simplify class definitions.

Learn encapsulation by using private data and a controlled public interface, ensure no duplicates with exists, and provide add, remove, and get items, while cloning arrays to prevent external mutation.

Explore generics in TypeScript to replace any with type parameters, enable type inference, and build a safe swap function for two-value tuples using generics T and U.

Learn how type assertion with 'as' overrides a value's type in TypeScript, letting you access array and number methods, and understand the risks of misusing type assertions with external code.

Build a recursive trim strings function in TypeScript that trims all strings within objects and arrays, including nested levels, while preserving original data types.

Explore how to implement generics with a data storage class in TypeScript, using optional constructor arguments and a private array, and expose safe access via getters and setters.

Learn how sets differ from arrays by preventing duplicates, initialize from an iterable, and use add, delete, has, size, and clear in TypeScript and JavaScript.

Master maps in JavaScript and TypeScript by creating and initializing maps with key-value pairs, retrieving and setting values, deleting entries, and iterating with keys, values, and entries.

Explore how to constrain generics with extends in TypeScript, using type bounds, type guards, and utilities like record to enforce keys and values.

Explore indexed access in TypeScript to extract types from objects and arrays, using bracket notation, number indexing, and the type of operator for auto-complete and safety.

Explore how the keyof operator returns the keys of an object as a union, enabling safe property updates with generics and type constraints in TypeScript.

Explore intersections in TypeScript to combine the properties of a user object with credentials, such as display name, email, and password, into a single type rather than a union.

Merge two objects with a generic function that accepts two object types that extend object and returns their intersection, using spread syntax or Object.assign to produce a merged result.

Learn to use generics with types and apply TypeScript utility types such as partial, required, omit, pick, and record to shape and constrain objects.

Explore TypeScript mapped types and modifiers, using key of T to map properties, apply read only and minus modifiers, and create partial or optional nested properties.

Explore recreating TypeScript utility types, including my partial, transform, and pick, by mapping over keys to make properties optional, replace types, and select subsets, with comparisons to Partial and Pick.

Explore how const assertion and the satisfies operator enforce precise types in a TypeScript routing array, preserving narrow types while validating pages with path and label.

Explore the DOM and HTML structure, wire form inputs to JavaScript submit events, and validate or send data; then set up a live server and apply Tailwind utilities.

Explore the document object model and how the browser renders HTML, access form inputs by id with document.getElementById, and handle rendering timing and optional chaining in TypeScript.

Explore methods to query the DOM elements using getElementById and querySelector, differentiate by id, class, and CSS selectors, select a form's inputs and button, and avoid numeric ids.

Explore querySelectorAll to fetch inputs, convert node lists to arrays for map and reduce, and filter by input types (e.g., number) using css selectors and TypeScript typing.

Explore how to listen for input events, access event targets and values, and parse numbers, while comparing onchange and addEventListener for single versus multiple listeners.

Implement the form logic to validate four inputs as numbers by converting them, prevent the page from refreshing with event.preventDefault, and log max and min values using Math.max and Math.min.

Explore manipulating the dom to display max and min numbers, update text with template literals, join values with a comma and space, and apply color changes via classList using tailwind.

Learn to import JavaScript files with a script tag, point to a local script.js using a relative path, and use defer to run scripts after the document loads.

Explore how Vite enables fast TypeScript web development by optimizing transpiling, bundling, and minifying code, and compare it with Webpack while scaffolding a new project.

migrate the project to TypeScript by creating a safe getElement utility, validating nulls, using generics to narrow element types (html form, button, input), and throwing errors for missing selectors.

Explore client side rendering (CSR) with JavaScript to dynamically render a form and inputs using document.createElement, array.from, and DOM manipulation, and compare with static HTML.

Learn how ES modules organize code by extracting logic into separate files and using named and default exports to import elements and getElement.

Build a from-scratch TypeScript todo app with add, delete, clear, and complete features, display items left, and show an error pop up using Tailwind CSS and client-side rendering.

Scaffold the project with vanilla TypeScript, install dependencies, and set up the HTML structure; implement a get element utility to query DOM elements and wire the to-do form.

Build a todo form in TypeScript, defining a Todo type and using type-only imports to avoid emissions. Validate input, show errors, and push a todo with id, title, and completed.

Export a renderTodos function that clears the list and renders each in-memory todo as DOM elements, and move the todos array to its own store module to avoid circular imports.

Learn to delete todos and mark them as complete, update the items left using CSS selectors and querySelectorAll, and implement clear completed to refresh the list.