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.

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 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.

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.

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

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.

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.

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.

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.

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.

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 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.

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.

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.