TypeScript Developer Roadmap

What are Basic Types?

Basic types in TypeScript include string, number, boolean, null, undefined, symbol, and bigint. These types form the foundation of type safety and static analysis.

Why it matters

Understanding and using basic types is fundamental for writing clear, bug-free TypeScript code. It ensures variables and functions behave as expected.

How it works / How to use it

Annotate variables and function parameters with basic types. TypeScript will enforce type correctness at compile time.

Practice Steps

1. Declare variables with different basic types.
2. Annotate function parameters and return types.
3. Experiment with type inference by omitting explicit types.

Mini-Project or Use Case

Build a simple calculator app, using explicit types for all variables and functions.

Common Mistake

Relying solely on any type undermines TypeScript's benefits.

Read the Guide: Everyday Types

What are Arrays and Tuples?

Arrays and tuples are TypeScript structures for handling collections of values. Arrays hold multiple items of the same type, while tuples allow fixed-size arrays with known types for each element.

Why it matters

Properly typing arrays and tuples increases code clarity, prevents runtime errors, and enables powerful pattern matching and destructuring.

How it works / How to use it

Type arrays with number[] or Array<number>. Tuples are defined as [string, number] for fixed types and length.

Practice Steps

1. Declare and initialize arrays and tuples.
2. Access and mutate elements with type safety.
3. Use tuples for function return values.

Mini-Project or Use Case

Create a function that returns a tuple containing a status string and result number.

Common Mistake

Mixing types in arrays without explicit union types can cause type errors.

Read the Guide: Tuple Types

What are Typed Functions?

Typed functions in TypeScript have explicitly defined parameter and return types. This allows the compiler to catch incorrect usage and ensures predictable function behavior.

Why it matters

Typed functions improve code reliability, documentation, and refactoring safety. They are vital for building scalable APIs and libraries.

How it works / How to use it

Specify types for parameters and return values. Use optional and default parameters for flexibility.

Practice Steps

1. Define functions with typed parameters and return types.
2. Use arrow functions with type annotations.
3. Experiment with optional and rest parameters.

Mini-Project or Use Case

Build a math utility module with typed functions for add, subtract, etc.

Common Mistake

Forgetting to type function return values can lead to implicit any types.

Read the Guide: Functions

What are Typed Objects?

Typed objects in TypeScript use type annotations to define the shape and allowed properties of object literals. This enforces structure and prevents accidental property access or mutation errors.

Why it matters

Strongly typed objects are essential for modeling data, validating API responses, and ensuring code consistency across large codebases.

How it works / How to use it

Define object types using inline type annotations, type aliases, or interfaces. Use optional and readonly properties as needed.

Practice Steps

1. Create objects with explicit property types.
2. Define type aliases for reusable object shapes.
3. Use interfaces for complex structures.

Mini-Project or Use Case

Model a user profile object with typed properties and optional fields.

Common Mistake

Omitting type annotations can allow unintended properties or miss errors.

Read the Guide: Object Types

What are Type Aliases?

Type aliases in TypeScript allow you to create custom names for complex types. They are useful for simplifying code and improving readability, especially for unions, intersections, and object types.

Why it matters

Type aliases enable DRY (Don't Repeat Yourself) principles and make complex type signatures manageable. They are widely used in real-world projects for scalability.

How it works / How to use it

Define a type alias with the type keyword. Use it to annotate variables, function parameters, or return types.

Practice Steps

1. Create a union type alias:

   type ID = string | number;

2. Use aliases in function signatures.
3. Refactor repeated types into aliases.

Mini-Project or Use Case

Define a type for API response shapes and use it across multiple functions.

Common Mistake

Overcomplicating type aliases can reduce code clarity instead of improving it.

Read the Guide: Type Aliases

What are Enums?

Enums (enumerations) in TypeScript define a set of named constants, making code more readable and maintainable. They can be numeric or string-based.

Why it matters

Enums help prevent magic numbers/strings in code, improve readability, and enforce valid values for variables and function parameters.

How it works / How to use it

Declare an enum with the enum keyword. Use the enum members as values in your code.

Practice Steps

1. Define a numeric and a string enum.
2. Use enum values in switch statements.
3. Refactor hard-coded values into enums.

Mini-Project or Use Case

Model user roles or status codes in an application using enums.

Common Mistake

Relying on auto-incremented numeric enums can cause issues if values change.

Read the Guide: Enums

What are Union and Intersection Types?

Union types (|) allow a value to be one of several types. Intersection types (&) combine multiple types into one. These are powerful tools for expressing flexible yet type-safe APIs.

Why it matters

They enable advanced type modeling, especially for APIs, component props, and complex data structures. They help prevent invalid states and improve code safety.

How it works / How to use it

Use union types to allow multiple types for a variable. Use intersection types to merge properties from multiple types.

Practice Steps

1. Define a union type for function parameters.
2. Use intersection types for objects that must satisfy multiple contracts.
3. Refactor code to replace any with unions or intersections.

Mini-Project or Use Case

Create a function that accepts either a string or number and processes them differently.

Common Mistake

Confusing unions and intersections can lead to subtle type errors.

Read the Guide: Union Types

What are Literal Types?

Literal types in TypeScript restrict a variable to a specific value, such as a string or number. They are often used with unions to create limited sets of allowed values.

Why it matters

Literal types enforce stricter contracts and prevent invalid assignments, which is especially useful for configuration options, actions, or status codes.

How it works / How to use it

Define a variable with a literal type or union of literals. Use them in function parameters to restrict accepted values.

Practice Steps

1. Declare variables with literal types.
2. Use literal unions for function arguments.
3. Refactor magic strings into literal types.

Mini-Project or Use Case

Build a function that only accepts 'success', 'error', or 'loading' as status values.

Common Mistake

Forgetting to use literal types in place of generic string or number allows invalid values.

Read the Guide: Literal Types

What is Type Inference?

Type inference is TypeScript's ability to automatically determine the type of a variable or expression based on its value. This reduces boilerplate and keeps code concise while maintaining type safety.

Why it matters

Properly leveraging type inference leads to cleaner code and helps focus on business logic rather than redundant type annotations.

How it works / How to use it

Assign a value to a variable without an explicit type; TypeScript infers the type from the initializer. Use inference in function returns and destructuring.

Practice Steps

1. Declare variables without explicit types and inspect inferred types.
2. Use inferred return types in functions.
3. Check inferred types in your editor's hover tooltips.

Mini-Project or Use Case

Refactor a function-heavy module to rely on type inference where safe.

Common Mistake

Relying too heavily on inference can sometimes lead to any types if initializers are missing.

Read the Guide: Type Inference

What are Interfaces?

Interfaces in TypeScript define contracts for object shapes. They specify property names, types, and method signatures, serving as blueprints for objects and classes.

Why it matters

Interfaces promote code consistency, enable polymorphism, and facilitate large-scale application development. They are also vital for type-safe API design and third-party library integration.

How it works / How to use it

Declare an interface with the interface keyword. Implement the interface in objects or classes. Extend interfaces to compose complex types.

Practice Steps

1. Define an interface for a user object.
2. Implement the interface in a class.
3. Extend interfaces for inheritance.

Mini-Project or Use Case

Model a product catalog system using interfaces for products, categories, and inventory items.

Common Mistake

Confusing interfaces with type aliases—interfaces are best for objects and classes, while type aliases are more flexible.

Read the Guide: Interfaces

What are Classes?

Classes in TypeScript are blueprints for creating objects with shared structure and behavior. They support object-oriented programming with features like inheritance, access modifiers, and static members.

Why it matters

Classes enable code reuse, encapsulation, and abstraction. TypeScript enhances classes with strict typing, making large codebases more robust and maintainable.

How it works / How to use it

Define classes using the class keyword. Use public, private, and protected for member visibility. Implement interfaces for contracts.

Practice Steps

1. Create a class with typed properties and methods.
2. Use constructors and inheritance.
3. Implement an interface in a class.

Mini-Project or Use Case

Develop a class hierarchy for vehicles, with base and derived classes.

Common Mistake

Forgetting to type class properties can lead to runtime errors and weak type safety.

Read the Guide: Classes

What are Generics?

Generics in TypeScript allow the creation of reusable, type-safe functions, classes, and interfaces that work with a variety of types. They enable code flexibility while maintaining strict type safety.

Why it matters

Generics are essential for creating libraries, utility functions, and frameworks that operate on diverse data types without sacrificing type safety.

How it works / How to use it

Define generics with angle brackets <T>. Use them in function and class declarations to specify placeholder types.

Practice Steps

1. Write a generic identity function.
2. Use generics in arrays and promises.
3. Implement a generic stack class.

Mini-Project or Use Case

Build a generic repository pattern for CRUD operations.

Common Mistake

Overusing generics can make code hard to read; use them when type flexibility is needed.

Read the Guide: Generics

What are Type Guards?

Type guards are TypeScript constructs that narrow down the type of a variable within a conditional block. They help the compiler determine the exact type, allowing safe property access and method calls.

Why it matters

Type guards prevent runtime errors by ensuring variables are the correct type before use. They are crucial for working with unions, intersections, and complex APIs.

How it works / How to use it

Use typeof, instanceof, or custom type guard functions to refine types in conditionals.

Practice Steps

1. Write functions using typeof and instanceof guards.
2. Create a custom type guard function.
3. Apply guards in union type scenarios.

Mini-Project or Use Case

Implement a function that processes different shapes (circle, square) using type guards.

Common Mistake

Forgetting to use guards with union types can cause undefined behavior and errors.

Read the Guide: Narrowing & Type Guards

What are Readonly and Optional Modifiers?

Readonly and optional modifiers in TypeScript control property mutability and presence. readonly prevents reassignment, while ? marks properties as optional.

Why it matters

These modifiers enforce immutability and flexibility, leading to safer and more maintainable code, especially in APIs and configuration objects.

How it works / How to use it

Use readonly before property names and ? for optional properties in interfaces or type aliases.

Practice Steps

1. Define interfaces with readonly and optional fields.
2. Attempt to mutate a readonly property and observe the error.
3. Use optional properties in function arguments.

Mini-Project or Use Case

Design a configuration object with required, optional, and readonly properties.

Common Mistake

Mutating readonly properties leads to compilation errors and broken contracts.

Read the Guide: Readonly Properties

What are Index Signatures?

Index signatures in TypeScript allow objects to have arbitrary property keys of a specific type. They are useful for dictionaries, maps, and dynamic property assignment.

Why it matters

Index signatures enable flexible object modeling while maintaining type safety. They're essential for scenarios where property names are not known in advance.

How it works / How to use it

Define index signatures in interfaces or type aliases using [key: string]: Type.

Practice Steps

1. Create an interface with a string index signature.
2. Implement a dictionary object using the interface.
3. Access and mutate properties with dynamic keys.

Mini-Project or Use Case

Build a settings map where each key is a string and value is a string or number.

Common Mistake

Using index signatures without type unions can restrict value types unnecessarily.

Read the Guide: Index Signatures

What are Modules?

Modules in TypeScript enable code organization and encapsulation by dividing code into separate files with explicit imports and exports. They follow ES6 module syntax and are compiled to compatible JavaScript modules.

Why it matters

Modules promote maintainability, reusability, and better dependency management in large projects. They prevent global namespace pollution and enable tree-shaking in bundlers.

How it works / How to use it

Use export and import statements to share and consume code across files.

Practice Steps

1. Split a project into multiple files with exports/imports.
2. Experiment with default and named exports.
3. Configure module resolution in tsconfig.json.

Mini-Project or Use Case

Refactor a utility library into separate modules for each function.

Common Mistake

Mixing default and named exports can cause import errors.

Read the Guide: Modules

What are Namespaces?

Namespaces in TypeScript provide a way to group related code under a single name, helping avoid name collisions in the global scope. They are primarily used in legacy TypeScript codebases.

Why it matters

While modules are preferred for modern development, understanding namespaces is important for maintaining or migrating older codebases that use them.

How it works / How to use it

Declare a namespace with the namespace keyword. Wrap related interfaces, functions, or classes inside, and use export to expose members.

Practice Steps

1. Define a namespace with multiple exports.
2. Use members from the namespace in other files.
3. Refactor a small module to use namespaces.

Mini-Project or Use Case

Group math utility functions under a MathUtils namespace.

Common Mistake

Mixing namespaces with modules can cause confusing import/export issues.

Read the Guide: Namespaces

What are Declaration Files?

Declaration files (.d.ts) describe the shape of JavaScript code to the TypeScript compiler. They provide type information for JavaScript libraries, enabling type checking and IntelliSense even for untyped code.

Why it matters

Declaration files are essential for integrating third-party JavaScript libraries into TypeScript projects, ensuring type safety and developer productivity.

How it works / How to use it

Install type definitions from DefinitelyTyped using npm install @types/library. Create custom .d.ts files for your own JS code if needed.

Practice Steps

1. Install types for a library like lodash.
2. Write a custom .d.ts file for a JS utility.
3. Reference declaration files in your project.

Mini-Project or Use Case

Add type definitions for a legacy JavaScript library used in your project.

Common Mistake

Using libraries without available type definitions can lead to unsafe any types.

Read the Guide: Declaration Files

What are NPM Type Packages?

NPM type packages, often prefixed with @types/, provide TypeScript type definitions for popular JavaScript libraries. They are maintained by the DefinitelyTyped community.

Why it matters

Using these packages allows you to use JavaScript libraries in TypeScript projects with full type safety, IntelliSense, and error checking.

How it works / How to use it

Install type definitions using npm install @types/library. TypeScript automatically detects and uses these types.

Practice Steps

1. Install types for React or Express.
2. Use library APIs with type checking.
3. Update type packages as libraries evolve.

Mini-Project or Use Case

Integrate a third-party library (like lodash) with type safety in a TypeScript project.

Common Mistake

Forgetting to install type packages leads to any types and lost IntelliSense.

Read the Guide: DefinitelyTyped

What are ESNext Features?

ESNext features are the latest additions to the ECMAScript (JavaScript) language standard, such as async/await, optional chaining, and nullish coalescing. TypeScript supports many of these features ahead of browser support by transpiling them to compatible JavaScript.

Why it matters

Leveraging ESNext features allows TypeScript developers to write modern, concise, and expressive code while maintaining compatibility with older environments.

How it works / How to use it

Enable ESNext features in tsconfig.json by setting target and lib options. TypeScript transpiles code to your desired JavaScript version.

Practice Steps

1. Use optional chaining (?.) and nullish coalescing (??).
2. Write async functions with async/await.
3. Configure tsconfig.json for ESNext support.

Mini-Project or Use Case

Refactor a callback-heavy module to use async/await and modern syntax.

Common Mistake

Targeting an older JavaScript version in tsconfig.json can break ESNext features.

Read the Guide: ESNext Features

What are Import Types?

Import types in TypeScript allow you to import types only, without including runtime code. This optimizes bundle size and avoids circular dependencies.

Why it matters

Importing types efficiently keeps code lean and prevents unnecessary module imports, which is especially important in large-scale or performance-sensitive applications.

How it works / How to use it

Use import type { MyType } or import("./types") in type annotations.

Practice Steps

1. Refactor imports to use import type for types only.
2. Use typeof import() for dynamic type imports.
3. Check bundle size with and without type-only imports.

Mini-Project or Use Case

Optimize a shared types module to use type-only imports in a multi-package repo.

Common Mistake

Importing types as values can cause circular import errors and bundle bloat.

Read the Guide: Type-Only Imports

What is Path Mapping?

Path mapping in TypeScript allows you to define custom import paths for your modules using tsconfig.json. This feature streamlines imports and improves project structure.

Why it matters

Path mapping eliminates deep relative imports, making codebases more maintainable and readable, especially in monorepos or large projects.

How it works / How to use it

Configure the paths and baseUrl options in tsconfig.json to set up custom aliases.

Practice Steps

1. Add

   "baseUrl": "./src", "paths": { "@utils/*": ["utils/*"] }

   to tsconfig.json.
2. Refactor imports to use aliases.
3. Test imports in your editor and build process.

Mini-Project or Use Case

Refactor a multi-folder project to use path aliases for shared components.

Common Mistake

Forgetting to update build tools (like Webpack) to recognize TypeScript path mappings.

Read the Guide: Path Mapping

What is Strict Mode?

Strict mode in TypeScript refers to compiler options that enforce stricter type-checking rules, such as strictNullChecks, noImplicitAny, and strictBindCallApply. Enabling strict mode maximizes type safety.

Why it matters

Strict mode helps catch bugs early, enforces best practices, and leads to more reliable, maintainable codebases.

How it works / How to use it

Enable strict mode in tsconfig.json with "strict": true or enable individual strict flags.

Practice Steps

1. Set "strict": true in your config.
2. Fix resulting type errors.
3. Experiment with individual strict flags.

Mini-Project or Use Case

Refactor a legacy codebase to strict mode and resolve all type issues.

Common Mistake

Disabling strict mode to "fix" errors undermines the benefits of TypeScript.

Read the Guide: Strict Mode

What is Async/Await?

Async/await is a modern JavaScript feature supported by TypeScript for handling asynchronous operations. It allows developers to write asynchronous code that looks and behaves like synchronous code, improving readability and maintainability.

Why it matters

Async/await is essential for working with APIs, databases, and other asynchronous resources. It reduces callback hell and makes error handling straightforward with try/catch blocks.

How it works / How to use it

Declare functions with the async keyword and use await to pause execution until a promise resolves. TypeScript ensures type safety for promise results.

Practice Steps

1. Write an async function that fetches data from an API.
2. Handle errors with try/catch.
3. Type the return value as Promise<Type>.

Mini-Project or Use Case

Build a weather dashboard that fetches and displays data asynchronously.

Common Mistake

Forgetting to use await leads to unresolved promises and unexpected behavior.

Read the Guide: Async/Await

What are Promises?

Promises are JavaScript objects for representing the eventual completion (or failure) of an asynchronous operation. TypeScript enhances promises with type safety, ensuring predictable results.

Why it matters

Promises are the foundation for modern asynchronous programming. Understanding them is crucial for using async/await, handling API calls, and chaining asynchronous operations.

How it works / How to use it

Create promises using the Promise constructor or by returning a value from an async function. Chain operations with .then() and .catch().

Practice Steps

1. Write a function that returns a promise.
2. Chain multiple .then() calls.
3. Type promise results explicitly.

Mini-Project or Use Case

Fetch and process a list of users from a public API using promises.

Common Mistake

Forgetting to handle errors with .catch() can cause unhandled promise rejections.

Read the Guide: Using Promises (MDN)

What is the Fetch API?

The Fetch API is a modern browser interface for making HTTP requests. TypeScript provides built-in type definitions for fetch, enabling type-safe network operations.

Why it matters

Fetch is the standard for client-side HTTP requests. Using it with TypeScript ensures correct request/response handling and reduces runtime errors.

How it works / How to use it

Call fetch(url) to get a promise resolving to a Response object. Use await response.json() for JSON data, with proper type annotations.

Practice Steps

1. Write a function that fetches data from an API.
2. Type the response data using interfaces.
3. Handle errors and invalid responses.

Mini-Project or Use Case

Build a GitHub user search tool using fetch and TypeScript interfaces.

Common Mistake

Assuming the response is always valid JSON—always check status and handle errors.

Read the Guide: Fetch API (MDN)

What are Async Types?

Async types in TypeScript include Promise<T> and custom types for asynchronous operations. They describe the result type of async functions, ensuring type-safe handling of asynchronous data.

Why it matters

Async types prevent type mismatches, clarify code intent, and enable powerful features like await with full IntelliSense support.

How it works / How to use it

Annotate async functions with Promise<Type>. Use utility types for handling async results, such as Awaited<T>.

Practice Steps

1. Type an async function's return value as Promise<Type>.
2. Use Awaited<T> to unwrap promise types.
3. Write utility functions for async workflows.

Mini-Project or Use Case

Develop a data loader function that returns typed promises for different endpoints.

Common Mistake

Forgetting to type async results can lead to any types and runtime errors.

Read the Guide: Async Types

What is Linting?

Linting is the automated process of checking code for stylistic and programming errors. Tools like ESLint, with TypeScript plugins, enforce code quality, consistency, and best practices in TypeScript projects.

Why it matters

Linting catches bugs early, enforces style guidelines, and improves readability. It is vital for team collaboration and large codebases.

How it works / How to use it

Install ESLint and the TypeScript plugin. Configure rules in .eslintrc and integrate with your editor for real-time feedback.

Practice Steps

1. Install with

   npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

2. Run eslint --init and select TypeScript options.
3. Fix lint errors in your codebase.

Mini-Project or Use Case

Set up linting for a new TypeScript project and enforce a shared style guide.

Common Mistake

Ignoring lint warnings can lead to technical debt and inconsistent code.

Read the Guide: typescript-eslint

What is Formatting?

Formatting ensures code is consistently styled and readable. Tools like Prettier automatically format TypeScript code according to defined rules, reducing style debates and merge conflicts.

Why it matters

Consistent formatting improves code clarity, onboarding, and collaboration. It also integrates with CI/CD to enforce standards automatically.

How it works / How to use it

Install Prettier and configure rules in .prettierrc. Use editor plugins or CLI to format code on save or before commits.

Practice Steps

1. Install Prettier:

   npm install --save-dev prettier

2. Create a .prettierrc file with your preferred rules.
3. Format your codebase:

   npx prettier --write .

Mini-Project or Use Case

Set up Prettier to auto-format code before every commit using a Git hook.

Common Mistake

Overriding too many rules can reduce formatting tool effectiveness.

Read the Guide: Prettier Options

What is Testing?

Testing in TypeScript involves writing automated tests to verify code correctness and prevent regressions. Popular frameworks include Jest, Mocha, and Jasmine, all of which have TypeScript support.

Why it matters

Testing ensures application reliability, facilitates refactoring, and builds confidence in code changes. TypeScript's type safety further reduces the risk of runtime errors.

How it works / How to use it

Write test files with .test.ts or .spec.ts extensions. Use assertion libraries to validate behavior, and configure ts-jest or similar tools for seamless integration.

Practice Steps

1. Install Jest and TypeScript support:

   npm install --save-dev jest ts-jest @types/jest

2. Write and run a sample test.
3. Configure jest.config.js for TypeScript.

Mini-Project or Use Case

Write tests for a utility module, covering all edge cases and error handling.

Common Mistake

Not testing type-specific edge cases, leading to gaps in coverage.

Read the Guide: Jest + TypeScript

What are Build Tools?

Build tools automate the process of compiling, bundling, and optimizing TypeScript code for deployment. Popular tools include Webpack, Rollup, and esbuild, each with TypeScript plugins and loaders.

Why it matters

Build tools ensure code is production-ready, optimized, and compatible with various environments. They enable advanced features like code splitting, minification, and tree-shaking.

How it works / How to use it

Configure a build tool to run tsc or use a loader for TypeScript files. Set up output directories, plugins, and environment-specific optimizations.

Practice Steps

1. Install Webpack and ts-loader:

   npm install --save-dev webpack ts-loader

2. Create a webpack.config.js for TypeScript.
3. Run the build and inspect output files.

Mini-Project or Use Case

Set up a build process for a React+TypeScript application with code splitting.

Common Mistake

Misconfiguring loaders or output paths can cause build failures or missing files.

Read the Guide: Webpack + TypeScript

What is CI/CD?

CI/CD (Continuous Integration/Continuous Deployment) automates testing, building, and deploying TypeScript applications. Tools like GitHub Actions, Travis CI, and CircleCI streamline these workflows for faster, safer releases.

Why it matters

CI/CD ensures code quality, reduces manual errors, and accelerates delivery. Automated pipelines catch issues early and keep production stable.

How it works / How to use it

Set up YAML configuration files to define build, test, and deploy steps. Integrate with version control to trigger pipelines on code changes.

Practice Steps

1. Create a GitHub Actions workflow for TypeScript build/test.
2. Automate linting and formatting in the pipeline.
3. Deploy to a staging environment on merge.

Mini-Project or Use Case

Automate deployment of a TypeScript API to Vercel or Netlify using CI/CD.

Common Mistake

Skipping tests or builds in CI/CD can let bugs reach production.

Read the Guide: GitHub Actions Node.js

What is TypeScript Basics?

TypeScript basics refer to the foundational elements of TypeScript, such as primitive types, variable declarations, basic type annotations, and the compilation process. TypeScript builds on JavaScript by adding static typing, enabling developers to catch errors early and write more robust code.

Why it matters

Understanding TypeScript basics is essential for every TypeScript developer. Mastery of these concepts ensures that you can leverage TypeScript's type safety, improving code quality and maintainability. It also forms the groundwork for learning advanced features.

How it works / How to use it

You declare variables with explicit types, use type inference, and compile TypeScript (.ts) files into JavaScript. The TypeScript compiler (tsc) checks types at compile time, preventing many common bugs.

1. Install TypeScript globally:

   npm install -g typescript

2. Create a hello.ts file with typed variables.
3. Compile with

   tsc hello.ts

4. Run the resulting hello.js file in Node.js.

Mini-Project or Use Case

Build a simple calculator CLI that takes typed inputs and outputs results. This demonstrates variable declarations, type checking, and compilation.

Common Mistake

Assuming TypeScript types exist at runtime. Types are erased during compilation and do not exist in the JavaScript output.

Read the Guide: Basic Types

What are Union Types?

Union types in TypeScript allow a variable or parameter to accept multiple types, expressed with the | operator. This feature enables flexible APIs and data models that can handle more than one type of input or output.

Why it matters

Union types are crucial for real-world applications where data may come in different forms (e.g., string or number IDs). They help maintain strict type safety while accommodating necessary flexibility.

How it works / How to use it

Define a union type like type ID = string | number; and use it in function signatures or object properties. TypeScript enforces that only the allowed types are used.

1. Identify places where a value can be more than one type.
2. Declare a union type for these cases.
3. Use type guards to safely handle different types at runtime.

Mini-Project or Use Case

Design a search function that accepts either a string keyword or a numeric product ID.

Common Mistake

Forgetting to handle all possible types within a union, leading to runtime errors.

Read the Guide: Union Types

What is Type Assertion?

Type assertion in TypeScript is a mechanism that allows you to override the inferred type and tell the compiler to treat a value as a specific type. It's similar to type casting in other languages, but without runtime conversion.

Why it matters

Type assertions are helpful when you know more about a value's type than TypeScript can infer, such as when working with DOM elements, third-party libraries, or deserialized data. They enable you to bypass strict checks when necessary.

How it works / How to use it

Use the as keyword:

const input = document.getElementById('myInput') as HTMLInputElement;

Be cautious—assertions do not change the underlying type at runtime.

1. Identify cases where TypeScript can't infer the correct type.
2. Use as to assert the type.
3. Test thoroughly to prevent runtime errors.

Mini-Project or Use Case

Manipulate form fields in a web page, asserting DOM element types for safe property access.

Common Mistake

Misusing assertions to silence errors instead of fixing type issues, which can lead to runtime bugs.

Read the Guide: Type Assertions

What are Mapped Types?

Mapped types in TypeScript allow you to create new types by transforming properties of existing types. They use the in keyword and type queries to iterate over keys and modify their types or attributes.

Why it matters

Mapped types are powerful for building utility types, enforcing consistent property modifications, and reducing repetitive code. They underpin many built-in TypeScript types like Partial and Readonly.

How it works / How to use it

You define a mapped type like this:

type Readonly = { readonly [K in keyof T]: T[K] };

Apply mapped types to add, remove, or transform property modifiers across an entire type.

1. Create a base interface or type.
2. Write a mapped type to transform its properties.
3. Use the new type in your code and observe the enforced constraints.

Mini-Project or Use Case

Implement a utility that converts all properties of a settings object to optional or readonly using mapped types.

Common Mistake

Misunderstanding key remapping or omitting index signatures, which can lead to unexpected type results.

Read the Guide: Mapped Types

What are Conditional Types?

Conditional types in TypeScript allow you to express logic in the type system, enabling types to change based on other types using extends and ternary-like syntax. They are a key feature for advanced type-level programming.

Why it matters

Conditional types enable you to build flexible, expressive APIs and utility types that adapt to user input or generic parameters. They are used in many built-in TypeScript types like Exclude and ReturnType.

How it works / How to use it

Conditional types use the syntax T extends U ? X : Y:

type IsString = T extends string ? true : false;

They can be nested and combined with generics and mapped types.

1. Write a basic conditional type.
2. Apply it to different types to see the result.
3. Refactor a utility type using conditionals.

Mini-Project or Use Case

Create a type that extracts the return type of any function using ReturnType<T> or a custom conditional type.

Common Mistake

Overusing conditional types can make code hard to read and maintain; use them judiciously.

Read the Guide: Conditional Types

What are Utility Types?

Utility types are built-in TypeScript types that help transform or construct new types from existing ones. Examples include Partial, Readonly, Pick, Omit, and Record. They leverage generics and mapped types to simplify type manipulation.

Why it matters

Utility types reduce boilerplate, increase code clarity, and help enforce best practices. They are widely used in real-world projects to create flexible interfaces and API contracts.

How it works / How to use it

Apply utility types to existing types:

type User = { id: number; name: string; };
type PartialUser = Partial<User>;

You can combine utility types for advanced use cases.

1. Identify a type transformation need.
2. Choose the appropriate utility type.
3. Apply it and test type safety in your code.

Mini-Project or Use Case

Refactor a form handling module to use Partial and Pick for flexible data structures.

Common Mistake

Misapplying utility types can lead to overly permissive or restrictive types. Always check the resulting type.

Read the Guide: Utility Types

What are Template Literal Types?

Template literal types in TypeScript allow you to construct string literal types using template string syntax. They enable you to create dynamic, pattern-based types for string manipulation and validation at the type level.

Why it matters

Template literal types are invaluable for API path validation, CSS class name enforcement, and other scenarios where string patterns matter. They help prevent typos and enforce conventions in codebases.

How it works / How to use it

Define template literal types like this:

type EventName = `on${Capitalize<string>}`;

Combine with unions and utility types for powerful type expressions.

1. Identify a string pattern in your code.
2. Create a template literal type to enforce it.
3. Test by assigning valid and invalid values.

Mini-Project or Use Case

Model Redux action types or CSS class names using template literal types for consistency.

Common Mistake

Forgetting that template literal types only check strings at compile time, not runtime.

Read the Guide: Template Literal Types

What is tsconfig?

tsconfig.json is the configuration file for the TypeScript compiler, specifying options such as root files, compiler settings, and type-checking rules. It enables consistent builds and tailored type safety across projects.

Why it matters

Proper tsconfig setup ensures code quality, compatibility, and optimized builds. It allows teams to enforce strictness, target specific JavaScript versions, and control project structure.

How it works / How to use it

Initialize with:

tsc --init

Configure options like strict, target, module, and include based on your project's needs.

1. Run tsc --init in your project root.
2. Edit tsconfig.json to set desired compiler options.
3. Test compilation and adjust settings as needed.

Mini-Project or Use Case

Set up a multi-folder project with strict type checking and custom output directories.

Common Mistake

Leaving default or overly permissive options, which can hide type errors and reduce code quality.

Read the Guide: tsconfig Reference

What is Module Resolution?

Module resolution is the process TypeScript uses to locate and load modules imported in your code. It supports different strategies like Node and Classic, and can be customized via tsconfig.json settings.

Why it matters

Correct module resolution ensures that imports work as expected, prevents build errors, and supports scalable project structures with aliases and custom paths.

How it works / How to use it

Configure baseUrl, paths, and moduleResolution in tsconfig.json:

{ "compilerOptions": { "baseUrl": ".", "paths": { "@utils/*": ["src/utils/*"] } } }

1. Set up custom paths or aliases.
2. Import modules using aliases.
3. Test builds and editor navigation.

Mini-Project or Use Case

Refactor imports in a large project to use path aliases for cleaner code.

Common Mistake

Misconfiguring paths, leading to broken imports or confusing errors.

Read the Guide: Module Resolution

What are Incremental Builds?

Incremental builds in TypeScript allow the compiler to reuse information from previous compilations, dramatically speeding up build times for large projects. This is achieved by storing build info in .tsbuildinfo files.

Why it matters

Incremental builds are critical for developer productivity in large codebases, reducing waiting time and enabling faster feedback cycles.

How it works / How to use it

Enable incremental builds in tsconfig.json:

{ "compilerOptions": { "incremental": true } }

TypeScript will automatically manage build info files and only recompile changed files.

1. Enable incremental in your config.
2. Build your project and observe faster rebuilds.
3. Clean .tsbuildinfo when needed for full rebuilds.

Mini-Project or Use Case

Measure build times before and after enabling incremental builds in a medium-sized project.

Common Mistake

Deleting .tsbuildinfo unnecessarily, losing the benefits of incremental compilation.

Read the Guide: Incremental Builds

What is OOP?

Object-Oriented Programming (OOP) is a programming paradigm that organizes code using objects, classes, inheritance, encapsulation, and polymorphism. TypeScript enhances OOP with strong typing, interfaces, and access modifiers.

Why it matters

OOP enables scalable, maintainable, and reusable code structures, making it ideal for large applications. TypeScript's OOP features provide better tooling, refactoring, and error prevention compared to vanilla JavaScript.

How it works / How to use it

Define classes, interfaces, and inheritance:

class Animal { protected name: string; constructor(name: string) { this.name = name; } }
class Dog extends Animal { bark() { return 'Woof'; } }

1. Write a base class and extend it.
2. Implement interfaces for contracts.
3. Use access modifiers (public, private, protected).

Mini-Project or Use Case

Model a zoo with animal classes, inheritance, and polymorphic methods.

Common Mistake

Overusing inheritance instead of composition, leading to rigid code structures.

Read the Guide: Classes/OOP

What are Decorators?

Decorators are a stage-3 ECMAScript proposal and a TypeScript feature that allows you to annotate and modify classes, methods, properties, or parameters at design time. They provide a declarative way to add metadata or behavior to code elements.

Why it matters

Decorators are widely used in frameworks like Angular and NestJS for dependency injection, validation, and routing. They enable powerful metaprogramming patterns and code reuse.

How it works / How to use it

Enable decorators in tsconfig.json:

{ "experimentalDecorators": true }

Define decorators as functions and apply them with @ syntax:

function Log(target: any, propertyKey: string) { /* ... */ }
class Example { @Log doSomething() {} }

1. Enable experimentalDecorators.
2. Write a class decorator.
3. Apply it to a method or property.

Mini-Project or Use Case

Create a logging decorator that tracks method calls in a service class.

Common Mistake

Using decorators without understanding their execution order or side effects, leading to unexpected behavior.

Read the Guide: Decorators

What are Mixins?

Mixins are a design pattern that allows you to compose classes from reusable components, enabling multiple inheritance-like behavior in TypeScript. They help share functionality across unrelated classes.

Why it matters

Mixins promote code reuse and flexibility, especially when you need to share logic without creating deep inheritance hierarchies. They are widely used in UI libraries and frameworks.

How it works / How to use it

Mixins are implemented as functions that return classes, which are then extended:

function Timestamped(Base: TBase) { return class extends Base { timestamp = Date.now(); } }

1. Write a mixin function.
2. Apply it to a base class.
3. Instantiate the composed class and use mixed-in properties.

Mini-Project or Use Case

Create a logging mixin and apply it to multiple service classes for consistent logging behavior.

Common Mistake

Improperly typing mixins, leading to type errors or lost type information.

Read the Guide: Mixins

What are Access Modifiers?

Access modifiers in TypeScript are keywords that control the visibility of class members. The main modifiers are public, private, and protected. They help enforce encapsulation and data hiding.

Why it matters

Access modifiers ensure that class internals are not misused, supporting robust APIs and maintainable code. They are a key feature for large, collaborative projects.

How it works / How to use it

Apply modifiers to class properties or methods:

class Example { private secret: string; protected id: number; public name: string; }

1. Write a class with all three modifiers.
2. Attempt to access members from subclasses and outside the class.
3. Observe compiler errors for restricted access.

Mini-Project or Use Case

Design a user class with private password, protected ID, and public name fields.

Common Mistake

Exposing sensitive data by making fields public when they should be private or protected.

Read the Guide: Access Modifiers

What are Abstract Classes?

Abstract classes in TypeScript are classes that cannot be instantiated directly and are designed to be extended by other classes. They can define abstract methods that must be implemented by subclasses, enforcing a contract for derived classes.

Why it matters

Abstract classes provide a way to define common behavior while ensuring that certain methods are implemented by all subclasses. This is crucial for building extensible and reliable architectures.

How it works / How to use it

Declare an abstract class with the abstract keyword:

abstract class Shape { abstract area(): number; }

Subclasses must implement all abstract methods to be instantiated.

1. Write an abstract class with at least one abstract method.
2. Extend it in a subclass.
3. Implement the required methods and instantiate the subclass.

Mini-Project or Use Case

Model a drawing application with abstract shapes and concrete circle and rectangle classes.

Common Mistake

Attempting to instantiate an abstract class directly, which causes a compile-time error.

Read the Guide: Abstract Classes

What are Static Members?

Static members in TypeScript are class properties or methods that belong to the class itself, not to instances. They are used for utility functions, constants, or shared state.

Why it matters

Static members enable you to define functionality that is relevant to the class as a whole, not individual objects. They are commonly used for factory methods, counters, or global utilities.

How it works / How to use it

Declare static members using the static keyword:

class Counter { static count = 0; static increment() { Counter.count++; } }

Access with ClassName.member, not via instances.

1. Write a class with static properties and methods.
2. Call static methods directly from the class.
3. Observe shared state across instances.

Mini-Project or Use Case

Implement a static factory method for a user class that generates unique IDs.

Common Mistake

Trying to access static members from an instance, which causes errors.

Read the Guide: Static Members

What are Readonly Properties?

Readonly properties in TypeScript are class or interface members that can be assigned only once, typically during initialization. They help enforce immutability and protect against accidental mutations.

Why it matters

Readonly properties make code safer and more predictable, especially for value objects, configuration, or constants that should not change after creation.

How it works / How to use it

Use the readonly modifier:

class Config { readonly apiUrl: string; constructor(url: string) { this.apiUrl = url; } }

1. Define readonly properties in classes or interfaces.
2. Assign values during construction.
3. Attempting to modify them later causes a compile error.

Mini-Project or Use Case

Model an immutable settings object with readonly properties for all fields.

Common Mistake

Trying to change readonly properties after initialization, which is disallowed by the compiler.

Read the Guide: Readonly Properties

What are Getters and Setters?

Getters and setters in TypeScript are special methods that allow you to control access to class properties. They enable computed properties, validation, and encapsulation of internal state.

Why it matters

Getters and setters help you maintain data integrity, provide controlled access, and implement logic when reading or writing properties.

How it works / How to use it

Define with get and set keywords:

class User { private _age: number; get age() { return this._age; } set age(val: number) { if (val > 0) this._age = val; } }

1. Write a class with private fields and getter/setter methods.
2. Use the getter/setter as regular properties.
3. Add validation logic in the setter.

Mini-Project or Use Case

Implement a temperature class that converts between Celsius and Fahrenheit using getters and setters.

Common Mistake

Creating setters that allow invalid state or infinite recursion by assigning to the property inside itself.

Read the Guide: Getters and Setters

What is Type Checking?

Type checking in TypeScript refers to the process of verifying that values and operations conform to the declared or inferred types at compile time. This static analysis eliminates many classes of bugs before code runs.

Why it matters

Type checking catches type mismatches, invalid property access, and unsafe operations early, improving code reliability and maintainability. It is a cornerstone of TypeScript's value proposition over plain JavaScript.

How it works / How to use it

TypeScript's compiler analyzes your code and reports errors when types do not align:

let age: number = "twenty"; // Error: Type 'string' is not assignable to type 'number'

1. Write code with explicit and inferred types.
2. Intentionally introduce type errors and observe compiler feedback.
3. Fix errors and verify correct type usage.

Mini-Project or Use Case

Refactor a JavaScript module to TypeScript, enabling strict type checking and resolving all type errors.

Common Mistake

Suppressing type errors with any instead of fixing underlying issues, leading to unsafe code.

Read the Guide: Type Checking

What is Type Coverage?

Type coverage measures the percentage of your codebase that is protected by TypeScript's type system. Tools like type-coverage and ts-prune report areas where any or implicit types are used, helping you improve type safety.

Why it matters

High type coverage ensures maximum benefit from TypeScript, reducing the risk of runtime errors and making refactoring safer and easier.

How it works / How to use it

Install type-coverage:

npm install --save-dev type-coverage

Run npx type-coverage to get a report and address uncovered areas.

1. Install and run type coverage tools.
2. Refactor code to eliminate any and implicit types.
3. Track coverage over time as the project evolves.

Mini-Project or Use Case

Set a minimum type coverage threshold in CI and enforce it across the team.

Common Mistake

Ignoring type coverage reports, allowing type gaps to accumulate and reduce safety.

Read the Guide: type-coverage

What is React Integration?

React integration with TypeScript involves using TypeScript's type system to develop robust, type-safe React components and applications. It includes typing props, state, refs, and hooks for enhanced code reliability.

Why it matters

TypeScript improves React development by catching errors early, enabling better editor autocompletion, and documenting component contracts. It is now the standard for large-scale React projects.

How it works / How to use it

Install React types:

npm install --save-dev @types/react @types/react-dom

Type props and state in function or class components:

type Props = { title: string };
function Header({ title }: Props) { return <h1>{title}</h1>; }

1. Set up a React+TypeScript project.
2. Type all props, state, and hooks.
3. Refactor components for type safety.

Mini-Project or Use Case

Convert a JavaScript React component library to TypeScript with full typing.

Common Mistake

Using any for props or skipping type annotations, losing type safety benefits.

Read the Guide: React TypeScript Cheatsheet

What is Node.js Integration?

Node.js integration with TypeScript means building server-side applications using TypeScript for improved type safety, maintainability, and modern JavaScript features. It involves typing modules, asynchronous code, and leveraging Node.js type definitions.

Why it matters

TypeScript helps prevent runtime errors in Node.js apps, improves refactoring, and supports scalable backend architectures. It is widely adopted for modern server-side JavaScript development.

How it works / How to use it

Install Node.js types:

npm install --save-dev @types/node

Configure tsconfig.json for module and target settings. Write server code with typed APIs and async/await.

1. Set up a TypeScript project for Node.js.
2. Type all module exports, imports, and callbacks.
3. Use type-safe async functions for I/O.

Mini-Project or Use Case

Build a REST API server using TypeScript and Express, fully typed from routes to middleware.

Common Mistake

Neglecting to type asynchronous callbacks, leading to subtle bugs in production.

Read the Guide: TypeScript for Node.js

What is Express Integration?

Express integration with TypeScript enables you to build robust web APIs and servers with strong type guarantees. TypeScript's type system helps catch route, request, and response errors at compile time.

Why it matters

Typing Express applications improves code safety, refactoring, and documentation. It is essential for building maintainable, scalable backends in modern JavaScript stacks.

How it works / How to use it

Install Express types:

npm install --save-dev @types/express

Type request, response, and middleware signatures for safety.

1. Set up an Express server in TypeScript.
2. Type all routes, params, and middleware.
3. Use type inference for request and response objects.

Mini-Project or Use Case

Implement a CRUD API with full typing for all endpoints and middleware.

Common Mistake

Using any for request/response objects, losing type safety and autocompletion.

Read the Guide: Express with TypeScript

What is Webpack Integration?

Webpack integration with TypeScript involves bundling and transpiling TypeScript code for browser or Node.js environments. It uses ts-loader or babel-loader to process .ts files and output optimized JavaScript bundles.

Why it matters

Proper Webpack integration enables advanced build optimizations, hot reloading, and asset management for TypeScript projects. It is essential for modern web development workflows.

How it works / How to use it

Install loaders and configure Webpack:

npm install --save-dev webpack ts-loader typescript

Add ts-loader to webpack.config.js and set entry/output.

1. Install and configure Webpack and TypeScript loaders.
2. Set up entry points and output directories.
3. Test builds and enable source maps for debugging.

Mini-Project or Use Case

Bundle a React+TypeScript SPA with code splitting and hot module replacement.

Common Mistake

Misconfiguring loaders or excluding node_modules incorrectly, leading to failed builds.

Read the Guide: Webpack & TypeScript

What is Jest Integration?

Jest integration with TypeScript allows you to write and run type-safe tests for your codebase. Jest is a popular JavaScript testing framework with first-class TypeScript support via ts-jest.

Why it matters

Combining Jest and TypeScript ensures both runtime correctness and static type safety in tests, reducing bugs and improving confidence in code changes.

How it works / How to use it

Install dependencies:

npm install --save-dev jest ts-jest @types/jest

Configure Jest to use ts-jest and write tests in .ts files.

1. Set up Jest and ts-jest in your project.
2. Write and run TypeScript test files.
3. Use type-safe assertions and mocks.

Mini-Project or Use Case

Test a TypeScript utility library with 100% code and type coverage.

Common Mistake

Forgetting to configure ts-jest, resulting in failed test runs or untyped tests.

Read the Guide: Jest & TypeScript

What is Storybook Integration?

Storybook integration with TypeScript enables you to build, document, and test UI components in isolation with full type safety. Storybook supports TypeScript out of the box, making it easy to create interactive component libraries.

Why it matters

Storybook with TypeScript improves component documentation, enables visual test cases, and ensures type-safe props and events. It is widely used in design systems and large UI projects.

How it works / How to use it

Install Storybook and TypeScript dependencies:

npx storybook init --type react_scripts
npm install --save-dev typescript @types/react

Write stories in .tsx files with typed props.

1. Set up Storybook in a TypeScript project.
2. Add stories for each component.
3. Use type annotations for props and state.

Mini-Project or Use Case

Document a component library with interactive stories and type-checked props.

Common Mistake

Neglecting to type props in stories, which reduces documentation accuracy and type safety.

Read the Guide: Storybook & TypeScript

What is Monorepo Support?

Monorepo support in TypeScript involves managing multiple packages or projects within a single repository, sharing code and types efficiently. Tools like Yarn Workspaces, Lerna, and Nx are commonly used with TypeScript in monorepos.

Why it matters

Monorepos enable code sharing, consistent tooling, and atomic changes across projects. TypeScript's references and project references features make large-scale monorepos manageable and fast to build.

How it works / How to use it

Set up tsconfig.json with references:

{ "references": [ { "path": "../utils" } ] }

Use workspace tools to link dependencies and run scripts across packages.

1. Organize code into separate packages.
2. Configure project references for type safety and incremental builds.
3. Test cross-package imports and builds.

Mini-Project or Use Case

Manage a frontend and backend in a single monorepo with shared types and utilities.

Common Mistake

Misconfiguring references or workspace settings, leading to broken builds or type resolution errors.

Read the Guide: Project References

What is Type Annotation?

Type annotation is the explicit declaration of variable, parameter, or return types in TypeScript. This tells the compiler what type a value should be, making code more predictable and easier to debug.

Why it matters

Clear type annotations help prevent bugs, improve code readability, and provide better tooling support such as autocomplete and refactoring. They are essential in large projects to ensure code quality.

How it works / How to use it

You specify a type after a colon in variable and function declarations. For example:

let age: number = 25;
function greet(name: string): void { ... }

Practice Steps

1. Annotate variables and function parameters in a sample file.
2. Use union and literal types for more complex scenarios.
3. Refactor code to replace any with specific types.
4. Observe compiler feedback for mismatches.

Mini-Project or Use Case

Create a contact form handler with strict type annotations for all fields and responses.

Common Mistake

Forgetting to annotate function return types can lead to unintended implicit any types.

Read the Guide: Everyday Types

What are Advanced Types?

Advanced types in TypeScript include union, intersection, mapped, conditional, and utility types. These enable developers to model complex data, enforce constraints, and write expressive, reusable code.

Why it matters

Mastering advanced types is critical for building robust APIs, libraries, and frameworks. They empower you to capture intricate relationships and behaviors in your type definitions.

How it works / How to use it

Use syntax like | for unions, & for intersections, and built-in utility types like Partial and Pick:

type UserOrAdmin = User | Admin;
type ReadonlyUser = Readonly<User>;

Practice Steps

1. Define union and intersection types for models.
2. Apply utility types to interfaces.
3. Experiment with conditional types in generic functions.

Mini-Project or Use Case

Build a permission system using union and intersection types for roles and permissions.

Common Mistake

Overusing advanced types can make code unreadable. Use them judiciously for clarity and maintainability.

Read the Guide: Advanced Types

What are Type Utilities?

Type utilities are built-in TypeScript types like Partial, Pick, Omit, and Record that help manipulate and transform existing types. They are essential for DRY (Don't Repeat Yourself) principles and code scalability.

Why it matters

Utility types reduce boilerplate and make code more flexible. They are widely used in libraries, frameworks, and complex applications.

How it works / How to use it

Apply utility types to existing types:

type PartialUser = Partial<User>;
type OnlyName = Pick<User, "name">;

Practice Steps

1. Refactor interfaces using utility types.
2. Combine utility types with generics.
3. Use utility types in function parameters and return types.

Mini-Project or Use Case

Build a form handler that uses Partial and Pick for flexible data validation.

Common Mistake

Using utility types incorrectly can lead to loss of required fields or unintended type changes.

Read the Guide: Utility Types

What are Ambient Modules?

Ambient modules are TypeScript declarations that describe the types of modules whose source code is not available. They are defined in .d.ts files and enable type safety for external libraries or global variables.

Why it matters

Ambient modules allow seamless integration with third-party JavaScript code, providing type checking and autocompletion even when source code is missing.

How it works / How to use it

Declare ambient modules using declare module syntax:

declare module "external-lib" {
  export function foo(): void;
}

Practice Steps

1. Create a .d.ts file for an external JS library.
2. Use ambient modules to type-check imports from untyped packages.
3. Update ambient declarations as APIs evolve.

Mini-Project or Use Case

Add type safety to a project using a custom in-house JavaScript utility by writing an ambient module declaration.

Common Mistake

Incorrectly naming or scoping ambient modules can lead to module resolution errors.

Read the Guide: Ambient Modules

What are Triple-Slash Directives?

Triple-slash directives are special single-line comments in TypeScript that provide compiler instructions, such as referencing types or files. They are used for legacy code organization and dependency management.

Why it matters

Understanding triple-slash directives is important when working with older TypeScript projects or declaration files that rely on them for type resolution.

How it works / How to use it

Use /// <reference path="..." /> at the top of your TypeScript files:

/// <reference path="./types/global.d.ts" />

Practice Steps

1. Add a triple-slash reference to a declaration file.
2. Observe how it affects type resolution.
3. Remove the directive and test for errors.

Mini-Project or Use Case

Maintain a legacy codebase that uses triple-slash references for global types.

Common Mistake

Overusing triple-slash directives can lead to tangled dependencies and maintenance issues. Prefer ES modules for new code.

Read the Guide: Triple-Slash Directives

What is Tooling?

Tooling refers to the ecosystem of software tools that support TypeScript development, such as compilers, linters, formatters, and IDE extensions. These tools automate repetitive tasks, enforce code standards, and enhance productivity.

Why it matters

Effective tooling streamlines development, reduces bugs, and ensures code consistency across teams. It is essential for professional TypeScript workflows.

How it works / How to use it

Common tools include tsc (TypeScript compiler), eslint for linting, prettier for formatting, and VS Code extensions for autocompletion and refactoring.

npm install --save-dev typescript eslint prettier

Practice Steps

1. Set up tsc in a project.
2. Integrate eslint and prettier with TypeScript plugins.
3. Configure your IDE for TypeScript support.

Mini-Project or Use Case

Automate code formatting and linting in a TypeScript project using Prettier and ESLint.

Common Mistake

Neglecting to configure tools for TypeScript can lead to inconsistent code and missed errors.

Read the Guide: ESLint + TypeScript

What is NPM?

NPM (Node Package Manager) is the standard package manager for JavaScript and TypeScript projects. It manages dependencies, scripts, and project metadata.

Why it matters

Efficient use of NPM is vital for installing, updating, and managing libraries and tools in TypeScript projects. It underpins modern development workflows.

How it works / How to use it

Use npm install to add packages, package.json to manage scripts and dependencies, and npm run to execute tasks.

npm install lodash @types/lodash --save

Practice Steps

1. Install TypeScript and type definitions using NPM.
2. Manage project scripts for build and test tasks.
3. Update and remove dependencies as needed.

Mini-Project or Use Case

Set up a new TypeScript project with essential dependencies and automated scripts.

Common Mistake

Mixing up devDependencies and dependencies can bloat production builds.

Read the Guide: Using NPM

What is Webpack?

Webpack is a powerful module bundler for JavaScript and TypeScript applications. It bundles code, assets, and dependencies into optimized files for deployment.

Why it matters

Understanding Webpack is crucial for building efficient, production-ready TypeScript apps—especially for web projects requiring asset management and code splitting.

How it works / How to use it

Configure webpack.config.js with TypeScript loaders:

module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [{ test: /\.ts$/, use: 'ts-loader' }]
  }
};

Practice Steps

1. Install webpack, ts-loader, and dependencies.
2. Create a basic Webpack config for TypeScript.
3. Bundle and run your app.

Mini-Project or Use Case

Bundle a multi-file TypeScript project for the web using Webpack and ts-loader.

Common Mistake

Forgetting to include .ts in the resolve.extensions array can cause import errors.

Read the Guide: Webpack + TypeScript

What is ts-node?

ts-node is a TypeScript execution engine and REPL for Node.js. It lets you run TypeScript files directly without pre-compiling them to JavaScript.

Why it matters

ts-node speeds up development by allowing rapid prototyping and testing of TypeScript code, especially for server-side and scripting use cases.

How it works / How to use it

Install ts-node globally or as a dev dependency, then execute TypeScript files:

npx ts-node src/app.ts

Practice Steps

1. Install ts-node in your project.
2. Run scripts and experiments without compiling.
3. Integrate ts-node with nodemon for auto-reloading.

Mini-Project or Use Case

Develop and test a CLI tool in TypeScript using ts-node for rapid feedback.

Common Mistake

Using ts-node in production is discouraged; always pre-compile for deployment.

Read the Guide: ts-node Docs

What are Monorepos?

Monorepos are repository structures where multiple projects or packages reside in a single repository. In TypeScript, monorepos help manage shared code, dependencies, and build processes across several applications or libraries.

Why it matters

Monorepos streamline code sharing and dependency management. They are widely used in large organizations for scalable, maintainable development.

How it works / How to use it

Tools like Lerna or Yarn Workspaces manage monorepos. TypeScript’s references feature enables project inter-dependency:

{
  "compilerOptions": { "composite": true },
  "references": [ { "path": "../utils" } ]
}

Practice Steps

1. Set up Yarn Workspaces or Lerna in a repo.
2. Create multiple TypeScript projects with shared code.
3. Configure tsconfig.json references.

Mini-Project or Use Case

Build a monorepo with a shared utility library and two consuming apps.

Common Mistake

Improperly configured tsconfig references can break builds and type checking.

Read the Guide: Project References

What is React with TypeScript?

React is a popular UI library for building web interfaces. Using TypeScript with React enhances component development with static typing, better tooling, and safer code.

Why it matters

TypeScript improves React codebases by catching errors at compile-time, improving component contracts via props typing, and enabling safer state management.

How it works / How to use it

Install React and its type definitions, then type props and state in components:

interface Props { name: string; }
const Hello: React.FC = ({ name }) => <div>Hello, {name}!</div>;

Practice Steps

1. Create a React + TypeScript project using create-react-app or Vite.
2. Type component props and state.
3. Use hooks with typed parameters.

Mini-Project or Use Case

Build a typed to-do app with custom components and hooks.

Common Mistake

Not typing props or misusing any in components reduces type safety.

Read the Guide: React + TypeScript Cheatsheets

What is Node.js with TypeScript?

Node.js is a runtime for executing JavaScript and TypeScript on the server. Using TypeScript in Node.js projects provides static typing, IDE support, and safer API development.

Why it matters

TypeScript enhances Node.js apps with better maintainability, fewer bugs, and improved developer experience, especially in large back-end codebases.

How it works / How to use it

Install Node.js type definitions and configure your project:

npm install --save-dev @types/node
tsconfig.json: { "target": "ES6", "module": "commonjs" }

Practice Steps

1. Set up a Node.js + TypeScript project.
2. Type Express route handlers and middleware.
3. Use async/await with proper type annotations.

Mini-Project or Use Case

Build a RESTful API with typed routes and data models.

Common Mistake

Failing to type asynchronous functions can cause hidden runtime errors.

Read the Guide: Node.js + TypeScript Starter

What is Vue with TypeScript?

Vue.js is a progressive JavaScript framework for building user interfaces. TypeScript support in Vue enables type-safe component development, improved tooling, and scalable codebases.

Why it matters

TypeScript in Vue projects enhances code quality, allows for better refactoring, and reduces runtime errors in complex applications.

How it works / How to use it

Use the Vue CLI or Vite to scaffold a TypeScript project. Type props, data, and emits in components:

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  props: { count: Number }
});
</script>

Practice Steps

1. Create a Vue + TypeScript project.
2. Type component props and events.
3. Use Vue 3 Composition API with TypeScript.

Mini-Project or Use Case

Build a typed counter component with props validation and emits.

Common Mistake

Not typing emits or using any for props can reduce type safety.

Read the Guide: Vue + TypeScript

What is Angular with TypeScript?

Angular is a platform for building large-scale web applications, and it uses TypeScript as its primary language. TypeScript enables Angular’s advanced features like decorators, dependency injection, and strong typing.

Why it matters

TypeScript is integral to Angular development, providing advanced tooling, code safety, and scalability for enterprise-grade apps.

How it works / How to use it

Use the Angular CLI to scaffold TypeScript-based Angular projects. Decorate classes and inject dependencies with strong typing:

@Component({ selector: 'app-root', templateUrl: './app.component.html' })
export class AppComponent { title: string = 'MyApp'; }

Practice Steps

1. Create an Angular project with the CLI.
2. Type component inputs, outputs, and services.
3. Use RxJS with typed observables.

Mini-Project or Use Case

Build a typed Angular service and component for fetching and displaying data.

Common Mistake

Ignoring type errors in templates can lead to runtime failures.

Read the Guide: Angular + TypeScript

What is Express with TypeScript?

Express is a minimalist web framework for Node.js. Using TypeScript with Express brings static typing to routes, middleware, and request/response objects, improving safety and maintainability.

Why it matters

TypeScript in Express projects reduces runtime errors, clarifies API contracts, and enhances developer tooling for building robust back-end services.

How it works / How to use it

Install Express and its type definitions, then type route handlers:

import express, { Request, Response } from 'express';
const app = express();
app.get('/', (req: Request, res: Response) => { res.send('Hello!'); });

Practice Steps

1. Set up a TypeScript + Express project.
2. Type all route and middleware parameters.
3. Handle errors with typed middleware.

Mini-Project or Use Case

Develop a typed REST API with Express, including error handling and validation.

Common Mistake

Not typing request or response objects can cause subtle bugs and poor autocompletion.

Read the Guide: Express + TypeScript