TypeScript Learning Journey 🚀

A comprehensive TypeScript study repository featuring practical examples, mini-applications, and advanced concepts. This project demonstrates the power of TypeScript's type system through hands-on implementations covering type annotations, generics, decorators, and modern design patterns.

📚 Table of Contents

• Overview
• Project Structure
• Lessons
• Mini Applications
• Installation & Setup
• Technologies Used
• Learning Outcomes

🎯 Overview

This repository serves as a practical guide to TypeScript development, showcasing real-world applications of type safety, object-oriented programming principles, and modern JavaScript features enhanced with TypeScript's powerful type system.

Key Features

• Type Safety: Comprehensive examples of TypeScript's type system
• Design Patterns: Implementation of common software design patterns
• API Integration: Real-world examples with external APIs
• Modern Tooling: Integration with modern development tools and bundlers

📁 Project Structure

typescript-guide-1/
├── lesson1/                 # HTTP requests with type safety
│   └── fetchjson/          # Axios + TypeScript integration
├── lesson2/                # Core TypeScript concepts
│   ├── functions.ts        # Function type annotations
│   ├── tuples.ts          # Tuple types and usage
│   ├── typed-arrays.ts    # Array type definitions
│   ├── types.ts           # Custom type definitions
│   └── variables.ts       # Variable type annotations
├── maps-project/          # Google Maps integration
│   ├── src/
│   │   ├── User.ts        # User entity with location data
│   │   ├── Company.ts     # Company entity with faker data
│   │   ├── CustomMap.ts   # Custom map wrapper with type safety
│   │   └── index.ts       # Application entry point
│   └── @types/            # Custom type definitions
└── sorting-project/       # Algorithm implementations
    └── src/
        └── index.ts       # Sorting algorithms with generics

📖 Lessons

Lesson 1: HTTP Client with Type Safety

Focus: Leveraging TypeScript's type system for API interactions

Key Concepts Covered

• Generic Type Parameters: Using axios.get<T>() for type-safe HTTP requests
• Interface Definitions: Creating contracts for API response data
• Type Assertions vs Generics: Comparing different approaches to type safety
• Error Handling: Typed error handling in async operations

Technical Implementation

interface ITodoData {
    id: number;
    userId: number;
    title: string;
    completed: boolean;
}

const getTodoData = async (): Promise<void> => {
    const response = await axios.get<ITodoData>(url);
    const { id, title, completed } = response.data; // Fully typed!
}

Benefits Demonstrated:

• Compile-time error detection
• Enhanced IDE support with autocomplete
• Self-documenting code through type definitions
• Reduced runtime errors

Lesson 2: Core TypeScript Fundamentals

Focus: Mastering TypeScript's fundamental concepts and syntax

Variables & Type Annotations

• Primitive Types: string, number, boolean, null, undefined
• Type Inference: Letting TypeScript deduce types automatically
• Type Assertions: Explicit type casting when necessary
• Union Types: Combining multiple types with | operator

Functions

• Parameter Annotations: Explicit typing of function parameters
• Return Type Annotations: Specifying function return types
• Contextual Typing: TypeScript's ability to infer types from context
• Function Overloads: Multiple function signatures

Advanced Types

• Tuples: Fixed-length arrays with specific types per position

type Coordinates = [number, number]; // [latitude, longitude]
type UserInfo = [string, number, boolean]; // [name, age, isActive]

• Typed Arrays: Homogeneous collections with type safety

const userNames: string[] = ['Alice', 'Bob', 'Charlie'];
const mixedData: (string | number)[] = ['Alice', 25, 'Bob', 30];

🎯 Mini Applications

Google Maps Integration Project

Technical Overview

A sophisticated mapping application demonstrating advanced TypeScript patterns and Google Maps API integration.

Architecture: Object-Oriented Design with TypeScript

Core Components

1. CustomMap Class:

   • Implements the Facade pattern to simplify Google Maps API
   • Provides type-safe wrapper for map operations
   • Manages marker creation and positioning

2. User & Company Entities:

   • Demonstrates class-based architecture
   • Integration with faker-br for realistic test data
   • Implements common interface for mappable objects

3. Type Definitions:

   • Custom type declarations for faker-br library
   • Google Maps API type integration
   • Interface contracts for consistent object structure

Design Patterns Implemented

Facade Pattern:

class CustomMap {
    private googleMap: google.maps.Map;

    constructor(divId: string) {
        this.googleMap = new google.maps.Map(/* ... */);
    }

    addMarker(entity: Mappable): void {
        // Simplified interface hiding Google Maps complexity
    }
}

TypeScript Features Showcased

• Interface Contracts: Ensuring consistent object shapes
• Generic Constraints: Type-safe operations on different entity types
• Utility Types: Leveraging built-in TypeScript utilities
• Type Guards: Runtime type checking for enhanced safety
• Declaration Files: Custom .d.ts files for third-party libraries

Technology Stack

• TypeScript 4.5+: Latest language features
• Google Maps JavaScript API: Interactive mapping
• Parcel: Zero-configuration build tool
• Faker-br: Brazilian locale data generation

Sorting Algorithms Project

Focus: Implementing generic algorithms with TypeScript

Features

• Generic sorting implementations
• Type-safe algorithm interfaces
• Performance comparison utilities
• Concurrent build and run setup with nodemon

🛠 Installation & Setup

Prerequisites

• Node.js (v14 or higher)
• npm or yarn package manager
• Google Maps API key (for maps project)

Quick Start

# Clone the repository
git clone <repository-url>
cd typescript-guide-1

# Install dependencies for each project
cd lesson1/fetchjson && npm install
cd ../../maps-project && npm install
cd ../sorting-project && npm install

# Run individual projects
cd lesson1/fetchjson && npx ts-node index.ts
cd maps-project && npm run parcel
cd sorting-project && npm start

🔧 Technologies Used

Technology	Purpose	Version
TypeScript	Type-safe JavaScript	4.5+
Axios	HTTP client library	0.24.0
Google Maps API	Interactive mapping	3.47+
Parcel	Build tool & bundler	Latest
Faker-br	Test data generation	0.4.1
Nodemon	Development server	2.0+
Concurrently	Parallel script execution	7.0+

🎓 Learning Outcomes

After exploring this repository, you will have gained practical experience with:

Core TypeScript Concepts

• ✅ Type annotations and inference
• ✅ Interfaces and type aliases
• ✅ Generic programming
• ✅ Union and intersection types
• ✅ Utility types and mapped types

Advanced Patterns

• ✅ Object-oriented programming with TypeScript
• ✅ Design pattern implementation
• ✅ API integration with type safety
• ✅ Error handling strategies
• ✅ Module system and declarations

Development Workflow

• ✅ TypeScript compilation and tooling
• ✅ Integration with popular libraries
• ✅ Testing strategies for typed code
• ✅ Build optimization techniques

Real-World Applications

• ✅ Building type-safe web applications
• ✅ Working with external APIs
• ✅ Managing complex data structures
• ✅ Performance optimization considerations

---

This project is designed for educational purposes and demonstrates best practices in modern TypeScript development.