TypeScript – 100+ Lab Exercises (Basic, Intermediate, Advanced)

🔰 Basic Level (30+ Exercises)

 

Goal: Master TypeScript syntax, typing, and foundational programming constructs.

 

Type Basics

  • Print a message using console.log().

  • Declare typed variables (number, string, boolean).

  • Use any, unknown, never types.

  • Use type inference.

  • Typecast variables using as and angle bracket syntax.

Arrays & Tuples

  • Declare and manipulate a typed array.

  • Create a tuple with mixed types.

  • Access tuple elements using indexes.

  • Destructure arrays and tuples.

Enums & Unions

  • Define an enum and use it in a function.

  • Create union types and use them in parameters.

  • Use type aliases with union types.

Control Flow

  • Use if, switch, for, while, do...while.

  • Type-safe iteration over arrays.

  • Demonstrate optional chaining and nullish coalescing.

Functions

  • Write typed functions with default/optional parameters.

  • Use function expressions and arrow functions.

  • Create a higher-order function with type signatures.

  • Overload a function using union parameters.

 

🚀 Intermediate Level (40+ Exercises)

 

Goal: Leverage advanced types, interfaces, generics, and OOP features.

 

Interfaces & Types

  • Define and implement an interface.

  • Extend interfaces.

  • Use readonly and optional properties.

  • Create index signatures in an interface.

Classes & OOP

  • Create a class with typed properties and methods.

  • Implement access modifiers (public, private, protected).

  • Use constructors and the this keyword.

  • Create a class that implements an interface.

  • Inherit from a parent class and override methods.

Advanced Type Features

  • Use literal types in function parameters.

  • Implement discriminated unions.

  • Use type guards (typeof, instanceof, custom guards).

  • Create mapped types and conditional types.

DOM & BOM Integration

  • Select DOM elements with type safety.

  • Add type-safe event listeners.

  • Handle form inputs with proper typing.

  • Create an HTML/JS form validator in TypeScript.

Modules & Namespaces

  • Create reusable modules with export and import.

  • Organize code into folders and files.

  • Use internal and external modules with namespaces.

Generics

  • Create a generic function (e.g., identity function).

  • Use generics in classes and interfaces.

  • Constrain generics using extends.

  • Create a reusable data storage utility.

 

🧠 Advanced Level (40+ Exercises)

 

Goal: Develop production-grade applications using decorators, type manipulations, and integration with popular frameworks.

 

Utility Types & Type Operations

  • Use Partial, Required, Readonly, Pick, Omit.

  • Deep clone objects with mapped types.

  • Implement custom utility types.

  • Combine and intersect multiple types.

Decorators (Experimental)

  • Create class decorators for logging.

  • Create property decorators for validation.

  • Use method decorators to audit function calls.

  • Enable experimental decorators in tsconfig.json.

Build Tools & Configuration

  • Setup tsconfig.json with strict type checks.

  • Compile a project using tsc.

  • Use aliases for module paths.

  • Enable source maps and output directories.

Testing in TypeScript

  • Write unit tests using Jest with TypeScript.

  • Mock interfaces and classes.

  • Use ts-jest for config-free testing.

TypeScript with Node.js

  • Create an Express.js server in TypeScript.

  • Use TypeScript with async/await routes.

  • Validate request data with type safety.

  • Configure Nodemon with TS support.

Integration with React (Optional Track)

  • Create a functional component with TSX.

  • Use Props and State with interfaces.

  • Type useRef, useEffect, and event handlers.

  • Create a reusable custom hook with generics.

 

Capstone Projects

 

  • Type-Safe Contact Form – with validation and submission.

  • Blog System with Express & TypeScript – full CRUD.

  • E-commerce Product Manager – with cart and type-safe inventory.

  • TypeScript Utility Library – build your own Lodash-like helpers.

  • Real-Time Dashboard App – with typed WebSocket communication.

 

✅ Tech Stack (for real-world context)

 

  • Node.js + Express

  • React + TSX

  • PostgreSQL with TypeORM

  • Jest + ts-jest

  • Docker for deployment

Download Syllabus 👇
Scroll to Top