Understanding TypeScript

Explore the essential TypeScript basics, including built-in types, object and array types, function types, and custom or special types. Build a solid foundation to tackle advanced topics in later sections.

Dive into TypeScript essentials by writing code in .ts files, compiling to JavaScript, and running with Node.js, focusing on core features without a UI.

Explore how TypeScript uses explicit type assignments for variables, built-in types like string, number, and boolean, and see how TypeScript features differ from JavaScript and compile to JavaScript.

Understand how TypeScript adds explicit types like string and boolean, while vanilla JavaScript handles value types without explicit type assignments. Use typeof to inspect values in JavaScript.

Explore type inference and type annotation in TypeScript by comparing explicit type assignments with inferred types from initial values, and learn when to rely on inference or provide explicit types.

Assign explicit types to function parameters in TypeScript after the parameter names, and use initial values for type inference. Calls require numbers, optional parameters apply, and strings are not allowed.

Explore how explicit type assignments and type inference determine value types, and why the any type should be used only as a last resort to avoid weakening TypeScript.

Replace the any type with union types to gain flexibility while preserving type safety, using the pipe symbol to allow string or number and prevent booleans, objects, and arrays.

Discover how TypeScript infers an array of strings and blocks pushing non-string values, demonstrating arrays and objects and the power of union types for multiple value types.

Master TypeScript array types by using type inference or explicit typing, including union types like (string | number)[] to store strings or numbers, and define array contents clearly.

Explore the alternative array type declaration in TypeScript using the Array<T> generic form, contrasting with square brackets, to describe an array of strings or numbers.

Explore tuple types in TypeScript to enforce fixed-length, clearly typed arrays, exemplified by possibleResults as a two-element array with a number first and a number second.

Explore how TypeScript handles object types, including inferred definitions, nested objects, and unions, with IDE autocomplete and type checking enforcing a user object with name, age, hobbies, and role.

Explore TypeScript's empty object type, which actually represents any value not undefined or null. See why a string can appear to fit this type, though it is a value.

Discover how the built-in TypeScript record type models flexible objects with unknown keys, using generics to define string or number keys and string or number values.

Learn how TypeScript enums restrict values to a fixed set, using a role example (admin, editor, guest), and understand how enums compile to JavaScript and customize defaults.

Discover how literal types in TypeScript define specific values like admin, editor, or guest, offer a popular alternative to enums, and enable unions to constrain two-element tuples and two-number arrays.

Learn how TypeScript's type aliases create custom names for complex union and literal types, enabling reuse of roles and user types across code to reduce duplication.

Learn to specify function return value types in TypeScript by using a return type after the parameter list, and note when inference applies.

Explore the void type in TypeScript and learn how functions that return nothing are inferred as void, with examples like a log function that simply prints to the console.

Discover the never type in TypeScript by comparing it with void, using a logAndThrow function to show how never means a function will not complete and prevents value assignment.

Understand how functions are first-class values in TypeScript, and learn to define function types for callbacks, including parameters and return types, and apply them to objects with methods.

Explore null and undefined in TypeScript, using union types to allow a value, null, or undefined, and clarify the practical differences between null, undefined, and JavaScript.

Explore how TypeScript infers null and undefined and narrows union types with a simple DOM example using getElementById. Learn to safely access the input's value after a check.

Explore how TypeScript uses type narrowing with null checks, the non-null assertion operator, and optional chaining (?.) to safely access values like HTMLElement, avoiding runtime errors.

Demonstrates how to use type casting in TypeScript to treat a general HTML element as an HTMLInputElement, enabling access to the value property while cautioning about safety and null handling.

Explore the unknown type in TypeScript, compare it with any, and learn how to safely narrow types with runtime checks before using values from diverse data sources.

Explore optional values in TypeScript by learning optional parameters and properties, using a question mark to mark them, with examples like generateError and a user object with optional role.

Explore the nullish coalescing operator in JavaScript and TypeScript, and learn how it treats null or undefined differently from an empty string when assigning fallback values.

Learn how to manage TypeScript projects, configure compilation to JavaScript, control type checking, and leverage IDE integration to surface errors according to your settings.

Configure TypeScript per project by creating a tsconfig.json used by the compiler and IDE. Generate it with tsc --init, then learn that options are optional or for use cases.

Explore tsconfig options with a focus on target and libs, learn how to control JavaScript output and include DOM or JSX libraries for TypeScript projects.

Learn how TypeScript configures imports, exports, and file emission, including rootDir and outDir, enabling TypeScript and JavaScript interop, source maps, and bundler usage for scalable projects.

Explore how TypeScript's type checking works, and learn how strict mode, noImplicitAny, and strictNullChecks shape error reporting via tsconfig.

Run the TypeScript compiler without targeting a single file to honor the tsconfig.json project settings, producing modern JavaScript and source maps in the dist folder.

Enable automatic TypeScript compilation by running tsc --watch, which monitors your rootDir and updates the dist output whenever you save changes.

Install type declarations such as @types/node to let TypeScript understand Node.js APIs and third-party libraries, enabling IDE support and safer coding in module projects.

Apply essential TypeScript features by building a first demo project, an investment calculator that runs in the terminal with hard-coded values to reinforce concepts learned earlier.

Initialize a TypeScript project with tsconfig.json and ES2022 target, enable strict type checking, and build a calculator that computes yearly investment results using calculateInvestment and printResults.

Define a TypeScript type alias called investment data to encapsulate initial amount, annual contribution, return rate, and duration as a single object for the calculate investment function.

Define a TypeScript function returning a union of an investment result array or an error string, using a calculation result alias to model each year's total amount, contributions, and interest.

Learn how to implement calculateInvestment in TypeScript by destructuring input data, validating inputs, and computing yearly totals like total, totalContributions, and totalInterestEarned, building an InvestmentResult array.

demonstrate connecting functions and passing values in TypeScript by using printResults to handle CalculationResult that can be a string or an array, with a type guard and printing year totals.

Understand how TypeScript defines an investment data type, compiles with tsc using tsconfig.json, and executes in node to output yearly investment results over a 10-year horizon.

Explore modern JavaScript syntax like let, const, arrow functions, rest parameters, and spread operators, and learn how TypeScript translates it for older browsers.

Explore let and const in modern JavaScript, compare them with var, and learn TypeScript's compile-time checks and block scope to write cleaner, safer code for older browsers.

Demonstrate arrow functions in TypeScript for concise, one-expression bodies with implicit returns, and how TypeScript infers event objects in callbacks, enabling shorter, safer DOM-related code.

Learn how to use default function parameters in TypeScript by assigning defaults to the end, enabling calls with one argument while preserving non-default parameter order.

Use the spread operator to pull elements from arrays and copy objects without using pointers. Discover how spreading creates new arrays and copies key value pairs in objects.

Use rest parameters and the spread operator to accept unlimited arguments as an array. Sum with reduce or a loop, and explore combining rest parameters with tuples for fixed counts.

Learn how array and object destructuring extract values from a hobbies array and a person object without changing the originals, using rest parameters and key aliasing.

See how TypeScript compiles modern JavaScript to older targets like ES5, producing longer code with var and removed destructuring, and how the dist folder and app.js reflect the compiled output.

Explore how TypeScript enhances JavaScript classes with extra features, and see how interfaces remain a TypeScript-exclusive feature that can be used with classes.

Understand that classes are blueprints for objects, existing in vanilla JavaScript and enhanced by TypeScript, allowing multiple instances with the same shape and methods but different data.

Explore creating a first class in TypeScript by defining class properties directly, using a constructor to initialize name and age, and comparing with vanilla JavaScript.

Explore a concise TypeScript shortcut that auto-creates class properties from constructor parameters, compare it to vanilla JavaScript, and see how TypeScript compiles to JavaScript with a tsconfig.json producing basics.js.

Explore how TypeScript uses public, private, and protected modifiers to control property access, the constructor parameter shorthand, and how defaults differ from vanilla JavaScript.

Learn the read-only keyword in TypeScript, usable with public or private, which prevents reassigning a property while still allowing mutation of the underlying array via push.

Explore TypeScript class features using the get keyword to implement a getter that returns a computed full name from private first and last name fields, accessible as a public property.

Learn how TypeScript uses setters and getters to validate input before storing it in properties, with examples using the set keyword, underscores, and error handling.

Learn how to add static properties and methods using the static keyword, access them on the class itself, and use a static greet method for utility-style functionality.

Explore inheritance in TypeScript and JavaScript by extending a user base class to build an employee with a job title and work method, using super to call the base constructor.

Explains how the protected modifier in TypeScript lets extending classes access a private field like _firstName, while keeping it inaccessible from outside and avoiding public access.

Abstract classes in TypeScript define a UIElement base with an identifier and clone method; they cannot be instantiated, and derived like SideDrawerElement extend it using super.

Explore interfaces in TypeScript, a TypeScript-only feature that defines an object's type and serves as a contract for classes. Learn using the interface keyword and implements keyword to enforce structure.

Define a first TypeScript interface using the interface keyword to describe an authenticatable object with email and password properties and login and logout methods.

Define an object that conforms to the Authenticatable interface, including email, password, and login and logout methods. Implement logic to check credentials against a database and create a session.

Compare interfaces and type aliases for defining object shapes, noting that both work, but declaration merging favors interfaces because types cannot merge.

Explore how interfaces define object shapes and enforce class contracts with implements in TypeScript. Build an AuthenticableUser class with login and logout, including email and password properties.

Learn how interfaces enforce a base object shape in TypeScript by requiring an Authenticatable object with a login method for authentication, and compare interfaces with using the type keyword.

Learn how to extend interfaces in TypeScript using the extends keyword to inherit properties from a base interface and add new ones like role, without altering the original interface.

See how TypeScript interfaces compile to JavaScript, with the interface keyword erased in the final code. Interfaces exist to help design but do not appear in vanilla JavaScript.

Explore advanced TypeScript features, including intersection types, type guards, discriminated unions, and function overloads, along with related patterns and practices.

Explore TypeScript intersection types by combining FileData and Status into AccessedFileData. Compare this with interfaces using extends to share data across FileData and DatabaseData.

Master type guards in TypeScript to distinguish file sources from database sources in a load data function, using property checks like path or url to drive logic.

Explore discriminated unions in TypeScript by using a shared type property to distinguish FileSource and DBSource, enabling safe access to path or connection URL via type guards.

Define TypeScript type guards for classes using the instanceof operator to discriminate between User and Admin objects, enabling safe calls to join or scan in a union-typed init function.

Outsource type guard logic to reusable functions like isFile, and leverage type predicates to narrow input types to FileSource when the guard returns true.

Learn function overloading in TypeScript by returning a string or a number based on input type (string or array), using type guards, union types, and template literals.

Explore how TypeScript supports function overloading with multiple signatures and a single implementation, enabling different parameter lists and return types depending on which signature is invoked.

Learn how TypeScript's index type feature enables flexible objects with dynamic property names while preserving type safety, using string as the default key type and union value types.

Understand how TypeScript narrows type inference with as const, converting a string array into a readonly array of specific values like admin, guest, and editor, preventing pushes.

Explore how the record type functions as a generic that maps string keys to number or boolean values, comparing custom types with the built-in record approach.

Explore the TypeScript satisfies keyword to enforce type-safety and precise type inference by validating a value against a target type, while narrowing concrete object shapes.

Explore generics and generic types in TypeScript, understand why this feature exists, and learn how to build and use generic types.

Explore how to type an array of strings in TypeScript, compare the array type syntax with generics using angle brackets, and see why generics serve as a convenient shortcut.

Understand generic types as combinations of multiple types used together, such as an array of strings, to create flexible, reusable type definitions and build your own generics.

Define a generic DataStore type with an index signature and a placeholder T, enabling flexible stores; use it with strings, or strings and booleans via unions at the usage site.

Explore creating generic functions in TypeScript, using a merge example with a type placeholder T, and leverage type inference to return arrays of the correct type without explicit annotations.

Explore how to define and use multiple generic parameters in TypeScript, enabling separate type placeholders like T and U for input values.

Explore generics and constraints in TypeScript by building a mergeObj utility that merges two objects with a generic type T constrained to object, ensuring safe spread and meaningful results.

Explore how TypeScript generics handle multiple object types using placeholders and constraints to merge objects into an intersection type with optional username and age.

Learn to build generic classes and interfaces in TypeScript by creating a user class with a flexible id property, instantiable with string or number, and inferring the id type.

Learn how generics in TypeScript create flexible types that work with multiple value types. Understand when to use them and why they are useful.

The module kicks off with a demo project that uses classes and generic types to build a linked list in TypeScript, preparing you for deeper exploration in the next sections.

Explore how a linked list stores values in nodes connected by next pointers in TypeScript, and compare its efficiency to arrays while practicing a practical data structure.

Define a linked list in a new TypeScript project by creating LinkedList and ListNode with private root and length, using an optional root for undefined, and setting up for logic.

Add an add method to the LinkedList that stores values in a ListNode and uses a generic type, enabling numberList or nameList at instantiation.

Define a generic ListNode with a value and an optional next pointer, instantiate it in the LinkedList, and implement add to append at the end and increment length.

Improve a TypeScript linked list by adding a tail pointer to enable constant-time appends, updating the tail after inserting a new node, and handling undefined initial states.

Implement get number of elements and print methods to traverse the linked list from the root and log values, then compile with tsconfig and run to verify length and output.

Explore an updated linked-list class with insert-at-position and delete-at-position methods, and learn how it loops through nodes to update neighboring links using private, public properties and generic types in TypeScript.

Explore advanced TypeScript types by deriving, manipulating, and combining types, using built-in features to create more complex and versatile type systems.

Explore how the typeof operator works in both JavaScript and TypeScript, including using it in type aliases to infer string literal types from constants.

Discover how the typeof operator derives types from values in TypeScript, using it on a settings object to infer properties like difficulty, min level, did start, and players.

Explore TypeScript's keyof operator, which derives a union of object keys from a type. See how a user type with name and age demonstrates its use beyond vanilla JavaScript.

Explore how the keyof operator links two type placeholders in a two-parameter generic getProp with T extends object, enabling safe value extraction and TypeScript inference.

Learn to use indexed-access-types to derive the Perms type from AppUser's permissions, derive types from values with typeof, and reuse a type alias for the permissions array.

Explore TypeScript's indexed access types to extract the element type from an array, using Perms[number] to derive a single permission object from an array of permissions.

Explore mapped types in TypeScript to transform an operations type into a related results type by mapping keys with keyof and the in operator using a generic type parameter T.

Explore mapped types in TypeScript, making properties optional or non-optional, and toggling read-only flags with minus operators to control property mutability in resulting types.

Learn how TypeScript template literal types create new string literal types from unions, using backticks and injection, to build file permissions and derive data file event names via mapped types.

Understand TypeScript conditional types to derive element types from arrays and build generic utility types. Learn how GetElementType uses a conditional type to return string or never based on input.

Explains conditional types in TypeScript through a generic getFullName function, using a FullnamePerson type to return string or never based on firstName and lastName presence.

Explore how the infer keyword extracts a function’s return type using conditional types and generics, including rest parameters, to derive type information.

Explore TypeScript's built-in utility types that derive and transform types from existing ones, such as return types and partial types, to streamline annotating values and parameters.