The Complete TypeScript Course - Build 3 Projects!

Explore functions in TypeScript to organize your code and make it modular. Build on the types covered earlier in the course as you learn to apply functions throughout this section.

Explore setting up a section two TypeScript project, declare and invoke functions, and compare function declarations, expressions, and arrow variants, with explicit versus inferred return types.

Explore optional and default parameters in TypeScript and master if-else conditionals. Use reduce with arguments to sum numbers and learn apply, call, and bind for function invocation and this typing.

Explore the core loop constructs in TypeScript, including for, for of, while, do while, for each, and for in, with examples using arrays and objects.

Generator functions offer lazy evaluation, yield, and next control to produce values, as shown by a fibonacci generator that yields values through an iterator.

Explore how to define an iterable iterator with symbol.iterator, implement next and yield to generate 1–10, and use for of, spread, and destructuring to consume and display values.

Learn how TypeScript expresses function types with call signatures, including optional and default parameters and explicit return types. See contextual typing in action with function expressions and callbacks.

Explore how overloaded function signatures enable multiple call patterns in TypeScript, using full versus shorthand signatures, union-based implementations, and type narrowing for expressive APIs.

Explore generics in TypeScript by transforming a swap function from concrete types to a reusable, polymorphic solution using a generic type parameter T, constraints, and type inference.

Explore how TypeScript binds generic types to concrete types across functions, type aliases, interfaces, and later classes, and master various call signature forms.

Explore bounded generics in TypeScript using a comparable interface and extends constraints. See how classes and interfaces enable a polymorphic find max with numeric and person examples.

Explore default generics in TypeScript by building a generic concat function that joins array items into a string, using a default string type when the generic type is not specified.

Learn to implement a generic filter array function in TypeScript, taking an array and a predicate to return items that satisfy a condition, with examples of even numbers and strings.

Explore classes and related topics in TypeScript to elevate your knowledge to a new level. Look ahead to the next lecture on classes to deepen your understanding.

Learn how to define and use classes in TypeScript, including properties, methods, constructors, and access modifiers; create base and derived classes with extends, and apply abstract to prevent direct instantiation.

Demonstrates building an abstract animal class with a private name and constructor, plus an abstract make sound method, then implements it in a dog class with sleep and eat behaviors.

Discover how the this type enables fluent interfaces in TypeScript by building a fluent calculator with add, subtract, multiply, and divide methods and a getResult accessor for chaining.

Explore interfaces and type aliases in TypeScript, compare their shapes, assignability, and extension rules, and learn how declaration merging works for interface declarations.

Explore how classes implement interfaces in TypeScript using implements, enforce type safety with animal and dog examples, and distinguish interfaces from abstract classes for flexible design.

Explore how TypeScript uses structural typing to compare classes by shape, including how private or protected fields affect assignability, and learn generics with a box.

Learn how to use the static keyword to define class-wide properties and methods, access them without creating instances, and implement a singleton pattern for a single shared instance.

Enable decorators in TypeScript and implement a log instantiation class decorator that extends the original constructor, logs instantiation details, and stringifies arguments with JSON.stringify.

Explore the property decorator in TypeScript and how to declare a named class property. See a console.log example with a string property and instantiation, preparing for the decorator factory.

Explore decorator factories in TypeScript, which create parameterized decorators by returning a function that runs as the decorator at runtime and logs a custom message before the original method executes.

Learn to implement a timing method decorator in TypeScript that wraps the original method, measures execution time, and logs the method name with the elapsed milliseconds.

Explain TypeScript accessor decorators on a property descriptor for getters and setters, why decorators apply to first accessor, with a multiply-by-two decorator that doubles on get and logs on set.

Apply a parameter decorator in TypeScript to enforce positive numbers using reflect metadata. Define a positive number metadata key and a validate decorator to guard a multiply method.

Explore how to simulate final classes in TypeScript using a private constructor and a static create method, preventing extension while reinforcing class safety and type concepts.

Build a shape container in TypeScript using interface, generics, and a decorator to log additions, compute total area, and identify the largest shape.

Explore two advanced TypeScript concepts—type guards and creating our own nominal typing—to add extra type safety to code when the scenario calls for it.

Master type guards in TypeScript by narrowing variable types with the type of and instance of operators, building custom predicates, and implementing union type guards with discriminant properties.

Explore nominal typing in TypeScript by simulating branded types with type branding, intersection types, unique symbols. Distinguish user id, order id, and company id to prevent errors and improve safety.

Learn how to handle errors in TypeScript to prevent program crashes and build robust, reliable applications.

Learn how TypeScript's type system helps handle runtime errors by returning null in a divide function, showing when division by zero yields null and how to log errors gracefully.

Throwing exceptions handle errors in TypeScript by interrupting execution with throw new Error('cannot divide by zero'). Wrap code in try catch, verify instance of error, log issues, and offer feedback.

learn how returning exceptions provides safety by using a class divide by zero that extends range error, with explicit messages and handling of each error type.

Learn to implement a TypeScript option container with some and none, enabling flatMap and getOrElse for safe, chainable handling of values that may be absent.

Tackle a mid-course mini project in the complete TypeScript course to reinforce all the concepts learned so far, and begin implementing it in the next lecture.

Design a simplified TypeScript book management CLI with a book interface and a generic manager for add, update, delete, and list, using input validation, decorators, and in-memory persistence.

Explore implementing a TypeScript book management system with a generic book interface, a book manager class, and decorators for logging and validation, including add, update, delete, and list operations.

Wraps up the book manager project by implementing method decorators for logging and validation, adding test data, and building a command-line interface to add, update, delete, and list books.

Explore asynchronous programming as a powerful tool and an essential building block for real-world applications, and gain an understanding of what asynchronous programming is.

Explore asynchronous programming in TypeScript, using callbacks, promises, and streams, with examples like setTimeout and asynchronous file reads, and discuss the limitations of plain callbacks.

Explore promises to manage asynchronous operations in JavaScript and TypeScript. Chain tasks, handle errors with then, catch, and async/await, and learn practical file operations and sequential workflows.

Practice asynchronous programming by using axios to fetch, add, update, and delete tasks from a JSON placeholder API, with a dedicated task service and comprehensive error handling.

Explore modules to neatly organize and reuse code across multiple files. Learn how this approach supports managing large code bases and improving readability.

Learn how to organize code with TypeScript modules by exporting functions and variables, importing them, and using default exports and private modifiers to encapsulate data.

Explore using JavaScript libraries in TypeScript by understanding type declaration files and the declare keyword, install type definitions from DefinitelyTyped (like Lodash), and enable ES module interop.

Explore two popular front-end frameworks used with TypeScript: React and Next.js, to understand how TypeScript powers modern front-end apps and websites through a crash course on their inner workings.

Discover how TypeScript enforces type safety in React components and props. Set up a React TypeScript project with vite, install, run dev, and experience hot reload.

Learn to build React components with TypeScript by creating greet and list TSX files, using JSX and conditional rendering, and wiring them in App.tsx toward a to-do app.

Render multiple elements with React fragments instead of divs, keeping the dom clean. Render a dynamic list with map and unique keys, and note event handling in the next lecture.

Learn to handle click events with onClick, print actions, and access the synthetic base event from React. Use useState to track the active item and Bootstrap classes to highlight it.

It teaches passing data into components with props and interfaces in a TypeScript React context, including items and title, handling item selection with callbacks, and using children to pass content.

Build a simple to-do list in React with TypeScript to practice what you learned, including creating, editing, deleting, and marking tasks as completed using a task component with defined props.

Create a reusable to do list component that maps tasks to task components, passing text, completed status, and on edit, on delete, and on toggle complete callbacks.

Build a functional to-do app in React and TypeScript by implementing an add task form with useState, handling task creation, editing, deleting, and toggling completion, and wiring components in app.tsx.

Explore how to set up and run a Next.js project, compare npx and npm usage, and begin building a to-do app with routing, app directory structure, and core files.

Explore Next.js routing based on the file system and conventions, create pages like /users and nested routes such as /users/favorites, and use links to enable seamless in-app navigation.

Compare client-side and server-side rendering, weigh bundles, memory, SEO, and security, then combine them with client and server components in Next.js, using a client component to enable interactivity.

Fetches user data from an api using async/await and renders a typed user list. Secures data by moving logic to the server and demonstrates Next.js server and client code.

Set up a Next.js to-do project with TypeScript, ESLint, Bootstrap, and uuid, then implement a separate client and server structure using a JSON server to simulate remote data.

Create a to-do list in a TypeScript React app by defining an ITask interface, building a list with delete and edit buttons, and fetching tasks via an API.

Explore server actions in Next.js 13.4, enabling asynchronous server-side tasks from client components to create, fetch, update, and delete to-dos without API endpoints, using use server, fetch, and JSON server.

Implement and wire a to-do task system in Next.js: add, delete, and edit tasks using client actions, server actions, and router navigation, with uuid generation and state management.

Design and implement a Trello-like board using React with drag-and-drop, cards, and modals, starting from a template and building a structured component set and data types.

Build a Trello dashboard in React by setting up a DnD provider with an HTML5 backend, and implementing header, home page, and draggable columns and items.

Explore task types in TypeScript by defining task and status interfaces, exporting test data from resources folder, and using icons and colors to represent in progress, in review, and done.

Implement a drop wrapper and column component in a TypeScript React project, using the use drop hook from the React Dad library to manage drag-and-drop with is over highlighting.

Explore building a drag-and-drop task board with React and TypeScript, implementing item components, useRef, useDrag, useDrop hooks, and a window modal to view task details.