A comprehensive, hands-on TypeScript learning repository covering everything from basic types to advanced patterns, React integration, and Node.js backend development.
Welcome to your complete TypeScript learning journey! This repository is designed to take you from TypeScript beginner to advanced developer through practical, real-world examples and structured learning paths.
This repository covers everything you need to become proficient in TypeScript:
- ✅ Core TypeScript Fundamentals - Master the building blocks
- ✅ Intermediate Concepts - Object-oriented programming, interfaces, and advanced patterns
- ✅ Advanced Type System - Generics, conditional types, utility types, and type-level programming
- ✅ React + TypeScript - Build type-safe, scalable frontend applications
- ✅ Node.js + TypeScript - Create robust backend services and APIs
Learning TypeScript/
├── 📁 src/
│ ├── 📂 1-core-types/ # TypeScript Fundamentals
│ │ ├── 01-primitives.ts # Basic types (string, number, boolean)
│ │ ├── 02-arrays-tuples.ts # Collections and fixed arrays
│ │ ├── 03-enums.ts # Enumeration types
│ │ ├── 04-objects.ts # Object typing and interfaces
│ │ ├── 05-functions.ts # Function signatures and overloads
│ │ ├── 06-union-types.ts # Multiple possible types
│ │ ├── 07-type-guards.ts # Runtime type checking
│ │ ├── 08-intersection-types.ts # Combining types
│ │ ├── 09-literal-types.ts # Exact values as types
│ │ ├── 10-type-inference.ts # Automatic type detection
│ │ ├── 11-type-assertions.ts # Manual type casting
│ │ ├── 12-never-type.ts # Impossible values
│ │ ├── 13-typeof-keyof.ts # Type operators
│ │ ├── 📝 notes.md # Detailed explanations
│ │ ├── 📝 README.md # Section guide
│ │ ├── 📝 recap.md # Key takeaways
│ │ └── 📝 quiz-answers.md # Practice solutions
│ │
│ ├── 📂 2-intermediate-types/ # Intermediate Concepts
│ │ ├── 01-type-aliases.ts # Custom type definitions
│ │ ├── 02-interfaces.ts # Contract definitions
│ │ ├── 03-aliases-vs-interfaces.ts # When to use each
│ │ ├── 📁 04-oop/ # Object-Oriented Programming
│ │ │ ├── 01-classes-objects.ts
│ │ │ ├── 02-constructors.ts
│ │ │ ├── 03-this-keyword.ts
│ │ │ ├── 04-access-modifiers.ts
│ │ │ ├── 05-inheritance.ts
│ │ │ ├── 06-getters-setters.ts
│ │ │ ├── 07-static-members.ts
│ │ │ ├── 08-abstract-classes.ts
│ │ │ ├── 09-oop-patterns.ts
│ │ │ ├──📝 oop-notes.md # Detailed explanations
│ │ │ ├──📝 README.md # Section guide
│ │ │ └──📝 recap.md # Key takeaways
│ │ ├── 05-method-overloading.ts
│ │ ├── 06-function-overloading.ts
│ │ ├── 07-namespaces.ts
│ │ ├── 08-modules.ts
│ │ ├── 09-index-signatures.ts
│ │ ├── 10-optional-readonly.ts
│ │ ├── 11-unknown-vs-any.ts
│ │ ├── 12-satisfies-operator.ts
│ │ ├── 13-declaration-merging.ts
│ │ ├── 📝 notes.md # Detailed explanations
│ │ ├── 📝 README.md # Section guide
│ │ ├── 📝 recap.md # Key takeaways
│ │ └── 📝 quiz-answers.md # Practice solutions
│ │
│ ├── 📂 3-advanced-types/ # Advanced Type System
│ │ ├── 01-type-narrowing.ts # Smart type refinement
│ │ ├── 02-generics.ts # Reusable type parameters
│ │ ├── 03-conditional-types.ts # Type-level conditionals
│ │ ├── 04-infer-keyword.ts # Type inference in conditions
│ │ ├── 05-discriminated-unions.ts # Tagged unions
│ │ ├── 06-mapped-types.ts # Transform existing types
│ │ ├── 07-key-remapping.ts # Advanced key manipulation
│ │ ├── 08-template-literal-types.ts # String type manipulation
│ │ ├── 09-utility-types.ts # Built-in helper types
│ │ ├── 10-type-level-functions.ts # Complex type operations
│ │ ├── 11-branded-types.ts # Nominal typing patterns
│ │ ├── 12-recursive-types.ts # Self-referencing types
│ │ ├── 📝 notes.md # Detailed explanations
│ │ ├── 📝 README.md # Section guide
│ │ ├── 📝 recap.md # Key takeaways
│ │ └── 📝 quiz-answers.md # Practice solutions
│ │
│ ├── 📂 4-typescript-in-react/ # React + TypeScript
│ │ ├── 📁 react-playground/ # Live React examples
│ │ │ ├── src/
│ │ │ │ ├── components/ # Typed React components
│ │ │ │ ├── concepts/ # Learning modules
│ │ │ │ │ ├── 01-props-and-state/
│ │ │ │ │ ├── 02-events-and-forms/
│ │ │ │ │ ├── 03-hooks-and-refs/
│ │ │ │ │ ├── 04-context-api/
│ │ │ │ │ ├── 05-custom-hooks-generics/
│ │ │ │ │ ├── 06-component-composition/
│ │ │ │ │ ├── 07-typing-external-data/
│ │ │ │ │ └── 08-practical-ui-types/
│ │ │ │ └── App.tsx
│ │ │ ├── package.json # React dependencies
│ │ │ └── vite.config.ts # Vite configuration
│ │ ├── 📝 notes.md # Detailed explanations
│ │ ├── 📝 README.md # Section guide
│ │ ├── 📝 recap.md # Key takeaways
│ │ └── 📝 quiz-answers.md # Practice solutions
│ │
│ ├── 📂 5-typescript-in-node/ # Node.js + TypeScript
│ │ ├── src/
| | | ├── 01-basic-types.ts # Node.js type basics
│ │ | ├── 02-modules-and-esm.ts # Module systems
│ │ | ├── 03-working-with-fs.ts # File system operations
│ │ | ├── 04-node-builtins.ts # Built-in modules
│ │ | ├── 05-type-safe-env.ts # Environment variables
│ │ | ├── 06-simple-server.ts # HTTP server basics
│ │ | ├── 07-express-basics.ts # Express.js with TypeScript
│ │ | ├── 08-error-handling.ts # Type-safe error handling
│ │ | ├── 09-routing.ts # Route typing
│ │ | ├── 10-controllers-and-services.ts
│ │ | ├── 11-middlewares.ts # Middleware typing
│ │ | ├── 12-global-types.ts # Global type definitions
│ │ | ├── 13-api-response-types.ts # API response typing
│ │ | ├── 14-utils-and-helpers.ts # Utility functions
│ │ | ├── 15-auth-jwt.ts # Authentication patterns
│ │ | └── 16-testing-basics.test.ts # Testing with TypeScript
│ │ ├── 📝 notes.md # Detailed explanations
│ │ ├── 📝 README.md # Section guide
│ │ ├── 📝 recap.md # Key takeaways
│ │ └── 📝 quiz-answers.md # Practice solutions
│ │
├── 📄 package.json # Project dependencies
├── 📄 tsconfig.json # TypeScript configuration
└── 📄 README.md # This guide
- Node.js 18+ - Download here
- Basic JavaScript knowledge - ES6+ features
- Code editor - VS Code recommended with TypeScript extensions
-
Clone the repository
git clone https://github.com/pranav89624/Learn-Typescript.git cd Learn-Typescript -
Install dependencies
npm install
-
Verify TypeScript installation
npx tsc --version
Option 1: Compile and Run
# Compile all TypeScript files
npm run build
# Run a specific compiled file
node dist/1-core-types/01-primitives.jsOption 2: Direct TypeScript Execution
# Install ts-node globally (optional)
npm install -g ts-node
# Run TypeScript files directly
npx ts-node src/1-core-types/01-primitives.tsOption 3: Watch Mode
# Automatically recompile on changes
npm run watchPath: src/1-core-types/
Begin your TypeScript journey with fundamental concepts:
- Basic types and type annotations
- Arrays, tuples, and enums
- Object and function typing
- Union and intersection types
- Type inference and assertions
Goal: Understand TypeScript syntax and basic type system
Path: src/2-intermediate-types/
Advance to more complex patterns:
- Interfaces vs type aliases
- Object-oriented programming in TypeScript
- Function and method overloading
- Modules and namespaces
- Advanced type modifiers
Goal: Write maintainable, object-oriented TypeScript code
Path: src/3-advanced-types/
Master the advanced type system:
- Generic programming
- Conditional and mapped types
- Template literal types
- Utility types and type manipulation
- Type-level programming
Goal: Create flexible, reusable type-safe abstractions
Path: src/4-typescript-in-react/
Apply TypeScript to frontend development:
- Component and prop typing
- Hooks and context with TypeScript
- Event handling and forms
- Custom hooks and composition patterns
- External API integration
Goal: Build production-ready React applications
Path: src/5-typescript-in-node/
Develop backend services with TypeScript:
- Node.js built-ins and modules
- Express.js with type safety
- API design and error handling
- Authentication and middleware
- Testing strategies
Goal: Create robust backend services and APIs
- Follow the numbered sequence - Each section builds upon previous concepts
- Read the README first - Each folder has a detailed guide
- Study the notes - Every section includes comprehensive explanations
- Practice actively - Modify examples and create your own variations
- Test yourself - Use the quiz files to verify understanding
- Modular curriculum - Each section can be taught independently
- Progressive complexity - Concepts build naturally
- Real-world examples - Practical, applicable code samples
- Assessment materials - Built-in quizzes and exercises
- Quick lookup - Well-organized, searchable content
- Copy-paste friendly - Production-ready code patterns
- Best practices - Industry-standard approaches
- Common pitfalls - Warnings about frequent mistakes
{
"compilerOptions": {
"target": "ES6", // Modern JavaScript output
"module": "commonjs", // Node.js compatibility
"strict": true, // Maximum type safety
"outDir": "./dist", // Compiled output directory
"rootDir": "./src", // Source code location
"esModuleInterop": true, // Module interoperability
"forceConsistentCasingInFileNames": true,
"skipLibCheck": true,
"strictNullChecks": true, // Prevent null/undefined errors
"lib": ["ES2017", "DOM"] // Available APIs
},
"include": ["src/**/*"] // Files to compile
}{
"scripts": {
"build": "tsc", // Compile TypeScript to JavaScript
"start": "tsc && node dist/index.js", // Build and run
"watch": "tsc --watch" // Auto-recompile on changes
}
}- Start with the basics - Don't skip fundamental concepts
- Practice regularly - Consistency beats intensity
- Experiment freely - Modify examples to test understanding
- Read error messages - TypeScript errors are educational
- Use strict mode - Learn proper TypeScript from the start
- ❌ Using
anytype everywhere - defeats the purpose of TypeScript - ❌ Ignoring compiler errors - they prevent runtime bugs
- ❌ Not reading the notes - context and explanations are crucial
- ❌ Rushing through sections - understanding > speed
- ❌ Avoiding strict mode - makes learning harder later
# Check types without compiling
npx tsc --noEmit
# See detailed error information
npx tsc --listFiles --explainFiles
# Generate declaration files for learning
npx tsc --declaration --emitDeclarationOnly- 📖 Comprehensive Coverage - Everything from basics to advanced patterns
- 🎯 Practical Examples - Real-world, applicable code samples
- 📚 Extensive Documentation - Detailed notes and explanations for every concept
- 🔄 Progressive Structure - Each concept builds naturally on previous ones
- ⚛️ Framework Integration - Specific sections for React and Node.js
- ✅ Self-Assessment - Quizzes and exercises to test understanding
- 🛠️ Production Ready - Industry-standard configurations and practices
- 📱 Beginner Friendly - Clear explanations without assuming prior knowledge
- TypeScript Handbook - Official TypeScript documentation
- TypeScript Playground - Online TypeScript editor
- TypeScript Discord - Community discussions
- r/typescript - Reddit community
- Stack Overflow - Q&A
- Type Challenges - Advanced type puzzles
- TypeScript Deep Dive - Comprehensive guide
- Effective TypeScript - Best practices book
We welcome contributions to improve this learning resource!
- 🐛 Bug Reports - Found an error? Open an issue
- 💡 Suggestions - Ideas for new examples or explanations
- 📝 Documentation - Improve existing notes and guides
- 🔧 Code Examples - Add more practical examples
- 🎯 Exercises - Create additional practice problems
- Fork the repository
- Create a new branch (
git checkout -b feature) - Make your changes with clear commit messages
- Test your code changes
- Submit a pull request with a detailed description
For detailed steps visit CONTRIBUTING.md.
This project is licensed under the MIT License - see the LICENSE file for details.
- ✅ Free to use for personal and commercial projects
- ✅ Modify and distribute as needed
- ✅ No warranty - use at your own discretion
- ✅ Attribution appreciated but not required
Pranav Verma
- GitHub: @pranav89624
- LinkedIn: Pranav Verma
- X/Twitter: @pranav89624
- Dev.to: @pranav89624
- TypeScript Team - For creating an amazing language
- Open Source Projects - For inspiration and examples
⭐ Star this repository if you find it helpful!
🚀 Start Learning Now • 📚 Browse Examples • 💬 Get Help
Happy coding and enjoy your TypeScript learning journey! 🚀