Typescript (+ React) : The beginner guide

Master typing objects in TypeScript by using inline and reusable types, work with coords having lat and lng strings, implement displayUser, and safely handle optional lastName to avoid undefined errors.

learn the basics of object oriented programming, including classes, objects, methods, properties, and constructors, and see how inheritance and instances improve maintainability over procedural code.

Explore how to create your own types in TypeScript using interfaces, including optional properties, nested interfaces, an array of person, and a sayHi function returning void.

Learn how to define a TypeScript class with a constructor, manage speed and brand, and enforce brand formatting with a setter while introducing read-only and private and public access.

Learn how private, public, and static modifiers control access in TypeScript classes; use getters and setters for safe access, and access static members without creating instances.

Learn how tuples enforce a three-number RGB color array with values 0–255, ensuring only three numbers. See how RGB.push can add a value and how read-only tuples prevent further modification.

Learn to run TypeScript in a node environment by compiling with tsc, then executing the produced JavaScript with node, while nodemon and ts-node watch and restart on changes.

Define a TypeScript bank account class with operations to add, withdraw, and report balance, enforcing minimum balance errors. Compute mensual interest with a ceiling and manage favourite accounts and transfers.

Design a transfer money function that withdraws from one account and deposits to another, and implement get mensual interests using a configurable interest rate and interest ceiling.

Develop and test a favorite accounts feature in a bank account array by adding accounts, initializing with an empty array, and removing by id with proper error handling.

Learn how to use union types in TypeScript to combine numbers, strings, booleans, and custom shapes like square and circle, including type narrowing and safe property access, and arrays.

Learn how the is operator narrows types in TypeScript with a fish or bird example, so pet objects reveal swim, fly, and walk capabilities.

Explain difference between interfaces and types in TypeScript, showing that interfaces can merge while types cannot. Demonstrate with vehicle, car, and boat how extends and the & keyword share properties.

Explore get and set accessors in TypeScript to control class properties, using a private radius with validation for nonnegative values.

Discover how the implements keyword enforces interface contracts on classes, enabling multiple interfaces and a print function for books, magazines, and PDFs, with printable and exportable examples.

Master generics in TypeScript to remove the last element from any typed array, preserving the exact return type for numbers, strings, booleans, and custom types like heroes.

Master TypeScript generics by building a generic class smart array with a type parameter T, supporting shuffle, push, and removeLast, plus a values getter with heroes as example.

Learn to implement a TypeScript abstract spell base class with a name and cast method, then build fire and frost spells using name enums and constructors.

Master a wizard class in TypeScript by building a spell book with fire and frost spells. Learn generic constraints to ensure casts match spell types and handle missing spells.

Build a TypeScript spell system by creating fire and frost spell arrays, wizard objects, and robust error handling with try/catch for missing spells like firebolt and blizzard.

Learn conditional typings in TypeScript by mapping a spell type to either fire spell name or frost spell name using a conditional type.

Explore class decorators in TypeScript, including a decorator factory to pass parameters and access a class's constructor and prototype, with tsconfig.json enabling experimental decorators.

Learn how to implement a method decorator that wraps a function using its descriptor, logs the method name and arguments, and returns the original result via apply.

Build a basic trivia quiz app with React and TypeScript, using an API to fetch five mythology questions, a 10-second timer, and green/red feedback with a final score.

set up a react plus typescript project with vite, install dependencies, run the dev server on port 3000, and prepare the initial app for API data fetching.

Learn how to use the open trivia database api to fetch questions by number, category, difficulty, and type, and to build requests and parse results.

Create a header with a logo and background, set a layout with global CSS, and drive a step-based UI via a TypeScript enum to render quantity, category, difficulty, play, score.

Build a fully typed slider component in React using Chakra UI, with max, min, and step props, render marks, and pass the selected value to the app for API requests.

Define fetch quiz params with a TypeScript interface, set default values for amount, category, and difficulty, and save the amount to advance to the next step.

Learn to fetch trivia categories using Axios in a React TypeScript app, define quiz category types, create a quiz API helper, and populate categories for the next step.

Build a responsive radio button grid with chakra radio and radio group in a simple grid to display categories and track the selected category ID with state.

Explore handling a mixed category in a quiz app using TypeScript and React. Add an empty category with id minus one, update quiz params on next, and differentiate mixed category.

Build a set quiz difficulty feature by implementing a radio group with easy, medium, hard, and mixed options, manage current difficulty with state, and pass it to the play screen.

Fetch quiz data from the API using axios, type the response and items, load questions into state, and pass them to a play component while handling insufficient questions.

Build a React TypeScript quiz UI with a question and four answers in a radio group, advancing to the next item on selection, rendering HTML with dangerouslySetInnerHTML using Chakra.

Implement lottie animations in a react quiz to indicate right or wrong answers, using lottie-react with valid and invalid json assets, and advance to the next question on completion.

Shuffle the answer options on each new question and color them green for correct and red for incorrect during animation, while preventing clicks until the animation ends.

Create a TypeScript React progress bar that displays 10 rectangles, gray by default, turning green for correct answers and red for incorrect ones using a history array.

Build a timer with a chakra circular progress bar in a React TypeScript quiz. Implement progress with useState and useEffect, safely update state, and trigger onFinished to advance questions.

Implement a score screen in a react and typescript quiz that shows correct over total answers, offers a score-based message, and a restart button.

Fix the categories loading by adding a loading state and a chakra spinner, showing a centered loading screen while categories fetch runs in a React plus TypeScript app.