TypeScript: From Zero to Expert (2024)

Explore the number data type in TypeScript, declare decimals, negatives, hex, and binary numbers, and enforce type safety with explicit annotations in variables and functions.

Learn how to use the string data type in TypeScript to store text, concatenate strings with plus signs, and print square area messages in English, Spanish, and French.

Explore the boolean data type in TypeScript, using explicit true or false values (not 0 or 1) to drive if statements and else branches, and how booleans control code execution.

Declare and type objects in TypeScript by defining properties like name as string and age as number. See how TypeScript flags type errors while JavaScript erases types at compile.

Explore how TypeScript arrays are defined and typed, with string and number examples and type annotations. See how inference and any types affect available methods and runtime behavior.

Explore how tuples define fixed-length arrays in TypeScript, using a dictionary-like example with image and video keys such as Emma.jpg and Emma.mp4, and learn the tuple syntax.

Explore the enum data type in TypeScript, using a single enumeration like colors with red, blue, and green to simplify comparisons and value assignments.

Learn how the any data type in TypeScript enables storing numbers, strings, and booleans with great flexibility, while warning against sacrificing type safety and returning to JavaScript-like behavior.

Learn how union types in TypeScript let a merge function handle numbers or strings, performing addition or concatenation, with input validation to prevent booleans and support mixed arrays.

Explore literal data types in TypeScript, including string literals, numbers, and boolean values, and how exact values constrain variables via union types, type guards, and type aliases.

Define and reuse union types with TypeScript type aliases, creating named data types like browser and fight options, and apply them to function parameters for safer, clearer code.

Learn to use functions as types in TypeScript by creating calculate rect area and print area, and enforce a function signature (base: number, height: number) => number for the calculator.

Learn how to use callback functions in TypeScript to run actions after summing two numbers, with a defined callback signature and a void return type.

Explore how the unknown data type in TypeScript handles dynamic content and enables type validations. Compare with any, see its restrictions, and learn to use unions for precise data handling.

Explore the never data type in TypeScript by examining functions that throw, never return, and run infinite loops, illustrating how never differs from void.

Set up TypeScript projects in Visual Studio Code and enable watch mode so changes to .ts files auto-compile to .js, manage multiple files, and adjust configuration.

initialize the project with tsconfig.json to enable per-file compilation and faster TypeScript builds, then use tsc -w to watch changes and auto-generate JavaScript files.

Configure the tsconfig target to control the emitted JavaScript version, learning how ES5 outputs var while ES6 enables let and const for browser compatibility choices.

Learn how to manage libraries in a TypeScript project with the lib option, including dom for browser code, as shown in hello world.ts.

Explore TypeScript configuration options, including allowJs for compiling JavaScript files, checkJs for error validation, and declaration and declarationMap for generating .d.ts files and code maps for JavaScript APIs.

Learn how the source map option generates .map files to enable debugging TypeScript in the browser by mapping to App.ts, with breakpoints and console logs.

Explore how the outdir and rootdir options in the config file control where compiled JavaScript files are emitted and how the src and dist folders reflect the project structure.

Explore key TypeScript configuration options, including removeComments, noEmit, and downlevelIteration, and learn how importHelpers and the isolateModules option affect emitted code.

Enable the noEmitOnError option to stop compilation and prevent JavaScript emission as soon as a TypeScript error is detected.

Explore TypeScript strict options, including no implicit any and strict null checks, with examples of strict bind call apply and enabling use strict in emitted files.

Learn strict TypeScript checks, including reporting unused locals and parameters, ensuring all function paths return a value, and validating switch and indexed access scenarios through practical examples.

Discover how to use include and exclude options in a TypeScript project to control which files compile, and tailor the build by selectively including or excluding files.

Set up a local web server for TypeScript apps using the Live Server extension, enabling real-time updates, live preview, and quick debugging with watch mode.

Debug TypeScript apps by setting breakpoints in Visual Studio Code, configuring launch.json and tsconfig.json for source maps, and running in the browser to trace variables and code flow.

Build a practical TypeScript project called color switcher that generates a random hexadecimal color and applies it to the page background, using HTML, CSS, and a TypeScript script.

Learn to add a callback to a function for color generation and update the user interface in TypeScript.

Learn how classification distinguishes objects by properties and behaviors, using cars and airplanes as examples, and see that in programming, properties correspond to features and methods correspond to behaviors.

Define a class as a blueprint with properties and methods that shape objects, and use this template to create multiple objects of the same type in TypeScript.

Learn to create your first TypeScript class named rectangle, define properties base, height, and color with appropriate number and string data types, and prepare for compilation with tsc.

Define and implement class methods in TypeScript to calculate a rectangle's area and perimeter, using this to access height and base and returning numerical results.

Create new instances of a class in TypeScript by using the new keyword, as shown with rectangle objects and the rectangle data type to enforce proper type assignments.

Learn how to control accessibility in TypeScript classes by using private and public members, restricting external access to methods and properties in a rectangle example.

Discover how constructors in TypeScript initialize class properties, enable default and parameterized object creation, and drive flexible rectangle calculations with base, height, and color.

Learn how to simplify class property declarations in TypeScript by using constructor parameters with access modifiers, eliminating separate property definitions and redundant assignments.

Demonstrate static methods by using the class name to perform operations like Math.pow and pie without creating instances, and contrast this with instance methods in rectangle and circle classes.

Learn how a static property, shared by all circle instances, counts created circles at the class level and is accessed via the circle class to reveal the total.

Learn how to declare read-only static properties in TypeScript to prevent altering constants, such as a static Pie used for circle calculations, ensuring reliable numeric results.

Create a task management app in TypeScript by scaffolding a new project named Task.eered, wiring App.tsx and index.html, and styling with styles.css to add and complete tasks.

Define the main app container and build incomplete and completed task sections in TypeScript, using checkboxes and labels to track status, with a concrete demonstration of list items.

Create a todo item class in TypeScript with a task name and a boolean isComplete, define its constructor, and link the app.js script in index.html to continue the workflow.

Define a task manager class in TypeScript to store tasks in an array of items, and implement add task to create new todo items with a default incomplete state.

Declare references to the task input, add button, and task holders; attach a click event to add the task to the incomplete list using a task manager, configure tsc compilation.

Define an HTML helper class with a static create task item method that builds a list item containing a checkbox and label to render tasks.

Create list items from todo elements, append them with appendChild to the DOM, and route each item to the completed or pending section based on its completed property.

Mark todo items as completed by listening for checkbox changes, set is completed to true, and redraw the lists with displayTask to move tasks to the completed section.

Finish the application by creating a bottom function named cleared to reset the task input after adding a task, ensuring the input clears on each addition.

Explore how inheritance reduces code duplication by placing shared functions in a base vehicle class and inheriting them into automobile and airplane, while submarine gains unique features such as submerge.

Create a base multimedia file class in TypeScript, defining common properties like creation date, modification date, name, and item type, and implement a display information method to show file details.

Explore implementing inheritance in TypeScript by building dynamic and static file classes that extend a multimedia file base, adding duration and edit, plus stop, pass, and play behaviors.

learn to implement base constructors, use super to call the parent constructor from derived classes, and pass parameters to initialize creation date, modification date, name, item type, and duration.

Learn how class hierarchies in TypeScript govern assignments between multimedia file, static file, and dynamic file, and see why only lower-to-higher hierarchy transfers work while static-specific methods remain inaccessible.

Explore polymorphism through inheritance by overriding a getType method in dynamic, static, and other file classes. Observe how a multimedia file base class provides different outputs at runtime.

The protected access modifier provides limited access to a class's properties and methods within its hierarchy. Use protected to expose checksum and the validate checksum method to derived classes.

Learn how getters and setters in TypeScript enable controlled access to class properties, perform validations, and encapsulate data by using get and set to manage a checksum.

Build a TypeScript project to draw lines by creating an HTML structure with index.html, a canvas, and a draw line button, wired by app.ts and styles.css.

Convert pure JavaScript line drawing to TypeScript by creating a line class with a 2D canvas context and origin coordinates, then implement a draw method.

Draw random lines in a TypeScript app by adding a Math Helper with generateRandom, replacing fixed values, and wiring a button to redraw lines on a canvas.

We refactor the TypeScript app to add inheritance by creating a base shape class and a line subclass, enabling circle drawing on a canvas via arc and draw methods.

Define a circle class extending shape, a constructor taking a canvas context and origin plus a radius, implement a draw method rendering an arc with start angle and end angle.

Introduce a text shape that extends the base shape to draw strings on the canvas using a draw method with fillText.

Explore interfaces and abstract classes in TypeScript by building an abstract figures demo in Visual Studio Code, showcasing how inheritance and draw methods are structured.

Learn how interfaces define a contract between a class and its implementers in TypeScript, including declaring without implementation, no access modifiers, and optional properties.

Implement a TypeScript interface in a class using implements to fix errors. Observe that a contract requires a draw method and cannot be instantiated or extended.

Explore interface extension in TypeScript by using extends to extend calculator from shape, enforce implementing all inherited methods in implementing classes, and apply calculate area with practical examples.

Reference a class through its interface in TypeScript and demonstrate a calculate area function that accepts a figure interface and draws circles and lines polymorphically.

Learn how to define read-only properties in TypeScript interfaces and implement them in classes such as circle and line, ensuring values initialize once and cannot be reassigned.

Define a function type with an interface FN that declares numeric parameters n1 and n2 and a numeric return value, a pattern you may see on Stack Overflow.

Explore optional properties, parameters, and methods in TypeScript using interfaces and classes, including optional constructor parameters and a render method.

Examine abstract classes with a base figure and a not implemented get area method, using the abstract keyword to prevent instantiation and guide specific shapes to implement area calculations.

Learn how abstract methods in an abstract class enforce implementation in derived classes, using a base figure example and a get tab method, and compare abstract classes with interfaces.

Practice interfaces by building a bootstrap-based TypeScript app that uses an interface with renew, login, and cancel; implement Neoflix, Cameron Prime, and OB premium.