🟦 TypeScript — Zero to Advanced

A structured hands-on journey through TypeScript fundamentals, type systems, modern patterns, and React + TypeScript development.

📊 Quick Repository Stats

📁 Learning Folders	📄 Source Files	⚛️ React/TSX Components	🪝 Custom Hooks
16	28	5	1

---

🧭 Table of Contents

• 📖 About This Repository
• 🗺️ Learning Roadmap
• 📚 Learning Journey (Folder Breakdown)
• 🧠 TypeScript Concepts Covered
• ⚛️ React + TypeScript Integration
• 🧩 Component Architecture
• 🪝 Custom Hooks
• 🧾 Shared Types Architecture
• 🔬 TypeScript → React Connection
• 📁 Repository Structure
• ▶️ Getting Started
• 🧠 Learning Philosophy
• 🎯 Skills Covered
• 📊 Learning Progression
• 🚀 What This Repository Demonstrates
• 🔮 Future Roadmap
• 🧑‍💻 Author

---

📖 About This Repository

This repository documents a practical, step-by-step learning path for TypeScript — progressing systematically from core syntax annotations to advanced type constructs, asynchronous data fetching, and real-world React + TypeScript web application development.

Learn
   ↓
Understand
   ↓
Write TypeScript
   ↓
Practice
   ↓
Build with React
   ↓
Apply Type Safety

---

🗺️ Learning Roadmap

🟢 STAGE 1 — FOUNDATION
      └── Type Annotations • Basic Types • Type Inference • Compile-Time Checking
            ↓
🟡 STAGE 2 — CORE TYPE SYSTEM
      └── Union & Literal Types • Type Narrowing • Type Assertions • Type Aliases
            ↓
🔵 STAGE 3 — OBJECTS & FUNCTIONS
      └── Object Shapes • Optional/Default Params • Utility Types (Partial, Required, Readonly)
            ↓
🟣 STAGE 4 — DATA STRUCTURES & OOP
      └── Typed Arrays • Tuples • Enums (Numeric, String, Const) • Classes & OOP
            ↓
🟠 STAGE 5 — INTERFACES & GENERICS
      └── Interfaces & Merging • Generic Functions & Constraints • Type Reusability
            ↓
⚡ STAGE 6 — ASYNCHRONOUS TYPESCRIPT
      └── Typed API Integration (Axios & Native Fetch) • Promises • Error Handling
            ↓
⚛️ STAGE 7 — REACT + TYPESCRIPT APPLICATION
      └── Typed Components • PropsWithChildren • Custom Hooks (useFetch<T>) • Form Events

---

📚 Learning Journey (Folder Breakdown)

Every directory isolates a specific stage of the TypeScript learning path with practical code examples:

📅 Stage	📚 Topic	📂 Location	🎯 Learning Objective
00	Compiler & Type Safety	00 Ts Folder/	Setting up TypeScript, compile-time error detection, primitive string/number checks
01	Type Annotations	1st Ts Folder/	Explicit type signatures for function parameters and return types
02	Type Inference	2nd Ts Folder/	Understanding TypeScript's automatic type inference mechanism
03	Unions & Literals	3rd Ts Folder/	Union types (string | number) and strict string literal unions
04	Type Narrowing	4th Ts Folder/	Control-flow type narrowing using typeof guards & optional parameters
05	Assertions & unknown	5th Ts Folder/	Safe type narrowing with unknown vs unsafe any and type casting
06	Type Aliases	6th Ts Folder/	Creating reusable custom object type contracts using type
07	Object Types & Shapes	7th Ts Folder/	Object literals, property type inference, and nested structure constraints
08	Functions & Utilities	8th Ts Folder/	Function return signatures (void, null), default/optional params, Partial<T>, Required<T>, Readonly<T>
09	Arrays, Tuples & Enums	9th Ts Folder/	Typed arrays (T[]), tuples ([string, number]), numeric & string enum, const enum
10	Classes & OOP	10th Ts Folder/	Class constructors, access modifiers (public, private, protected), methods & instantiation
11	Interfaces	11th Ts Folder/	Defining object contracts with interface, optional properties (?), inheritance (extends)
12	Generics	12th Ts Folder/	Reusable type-safe code using generic parameters (<T>) and constraints
13	Axios API Integration	13th Ts Folder/	Type-safe HTTP requests using Axios (axios.get<T>), async/await, error handling
14	Native Fetch API	14th Ts Folder/	Typed asynchronous API calls using native fetch(), response.ok checks, JSON parsing
15	React + TypeScript App	15th Ts Folder/	Full-fledged React + Vite SPA with typed components, props, hooks, forms, and custom state

---

🧠 TypeScript Concepts Covered

🧠 Concept	📂 Primary Location	💡 Practical Application
Type Annotations	1st Ts Folder/	Explicitly declaring variable and parameter types
Type Inference	2nd Ts Folder/	Letting TypeScript infer variable types automatically
Union & Literal Types	3rd Ts Folder/	Restricting variables to finite sets of scalar/string literal values
Type Guards & Narrowing	4th Ts Folder/	Safely checking types at runtime using typeof conditions
unknown Top Type	5th Ts Folder/	Forcing explicit type narrowing before property access over any
Type Aliases	6th Ts Folder/	Modeling reusable domain objects (type ChaiOrder = { ... })
Function Signatures	8th Ts Folder/	Return types, optional (?) & default parameters, void logging
Utility Types	8th Ts Folder/	Standard library utilities: Partial<T>, Required<T>, Readonly<T>
Arrays & Tuples	9th Ts Folder/	Homogeneous lists (string[]), fixed-length positional tuples ([string, number])
Enums & Const Enums	9th Ts Folder/	Strongly-typed constant collections (ChaiType, const enum SugarLevel)
Classes & Access Controls	10th Ts Folder/	Object-oriented state encapsulation with public/private attributes
Interfaces	11th Ts Folder/	API contracts, optional fields, declaration merging, class implementation
Generics	12th Ts Folder/	Parameterized functions (wrapInArrays<T>(item: T): T[]) for maximum reusability
Typed Asynchronous HTTP	13th Ts Folder/ & 14th Ts Folder/	Strongly-typed API client responses using Axios (axios.get<Todo>) & fetch()

---

⚛️ React + TypeScript Integration

Location: 15th Ts Folder/

The culmination of the learning journey integrates TypeScript into a modern Vite + React single-page application.

React Component  ──>  Typed Props Interface  ──>  Strict State Types  ──>  Generic Custom Hooks

---

🧩 Component Architecture

The React application demonstrates real-world component design patterns:

🧩 Component	📂 Location	🎯 Purpose & TypeScript Usage
Card	Card.tsx	Renders item information using an explicit CardProps interface with optional isSpecial?: boolean and default values.
CardLayout	Children.tsx	Demonstrates React layout wrapping using PropsWithChildren<{ title: string; footer?: ReactNode }> for container component composition.
Lists	Lists.tsx	Receives array props (List[]), map-renders nested Card components, and performs conditional prop computations (isSpecial={price > 30}).
OrderForm	OrderForm.tsx	Controlled form input with typed event handlers (React.FormEvent<HTMLFormElement>) and typed callback props (onSubmit(order: { name: string; cups: number })).
Counter	counter.tsx	Simple stateful component utilizing typed state hooks (useState<number>(1)).

---

🪝 Custom Hooks

File: useFetch.ts

The application features a reusable, generic asynchronous custom hook for network requests:

interface FetchState<T> {
  data: T | null;
  loading: boolean;
  error: string | null;
}

export function useFetch<T>(url: string): FetchState<T> {
  // Generic state management for API calls
}

💡 Why TypeScript Matters Here

• 🧬 Generics (<T>): Allows useFetch to fetch any data payload (e.g. List[], User, Todo) while preserving end-to-end type safety.
• 🛡️ Discriminated Union / State Shape: Guarantees consumers check loading and error states safely.
• 📦 Reusability: One hook satisfies all API endpoints without resorting to any.

---

🧾 Shared Types Architecture

File: types.ts

Shared type definitions are centralized to maintain a single source of truth across components:

export interface List {
  id: number;
  name: string;
  price: number;
}

This interface is exported and imported into App.tsx and Lists.tsx, enforcing consistent data models across component boundaries.

---

🔬 TypeScript → React Connection

TypeScript Concept            React Application Implementation
─────────────────────────────────────────────────────────────────────────────
Interface / Type Alias  ───>  Component Props (CardProps, OrderFormProps)
Generics (<T>)          ───>  Generic Custom Hooks (useFetch<T>)
Union Types             ───>  Component Variants & Dynamic UI States
Optional Fields (?)     ───>  Optional Props with Default Fallbacks
Type Guards (typeof)    ───>  Event Handlers & Form Input Parsing
PropsWithChildren       ───>  Layout Wrappers & Slot Composition

---

📁 Repository Structure

typescript-zero-to-advanced/
├── 🟢 00 Ts Folder/                 # Basic setup & compiler error checks
│   └── 📄 basic.ts
├── 📚 1st Ts Folder/                 # Function annotations
├── 📚 2nd Ts Folder/                 # Type inference
├── 📚 3rd Ts Folder/                 # Union & literal types
├── 📚 4th Ts Folder/                 # Type narrowing & typeof
├── 📚 5th Ts Folder/                 # unknown type vs assertions
├── 📚 6th Ts Folder/                 # Type aliases
├── 📚 7th Ts Folder/                 # Object shapes & type inference
├── 📚 8th Ts Folder/                 # Functions & Partial/Required/Readonly
├── 📚 9th Ts Folder/                 # Arrays, Tuples & Enums
├── 📚 10th Ts Folder/                # Classes & OOP access modifiers
├── 📚 11th Ts Folder/                # Interfaces & merging
├── 📚 12th Ts Folder/                # Generics (<T>)
├── ⚡ 13th Ts Folder/                # Axios API integration
├── ⚡ 14th Ts Folder/                # Native fetch API integration
├── ⚛️ 15th Ts Folder/                # React + TypeScript Application
│   ├── 📂 Components/
│   │   ├── 📄 Card.tsx              # Typed props & defaults
│   │   ├── 📄 Children.tsx          # PropsWithChildren layout
│   │   ├── 📄 Lists.tsx             # List rendering & array props
│   │   ├── 📄 OrderForm.tsx         # Typed form & event handlers
│   │   └── 📄 counter.tsx           # Typed useState hook
│   ├── 📂 Hooks/
│   │   └── 📄 useFetch.ts           # Generic custom hook <T>
│   ├── 📄 types.ts                  # Shared app interfaces
│   ├── 📄 App.tsx                   # Main React entry component
│   ├── 📄 main.tsx                  # React DOM mount point
│   ├── 📄 package.json              # App dependencies & scripts
│   └── 📄 vite.config.ts            # Vite configuration
└── 📖 README.md                     # Documentation

---

▶️ Getting Started

1. Running Standalone TypeScript Files (00 to 14)

Navigate to any standalone lesson folder and compile/run with TypeScript:

# Using tsc (TypeScript Compiler) + Node
cd "00 Ts Folder"
npx tsc basic.ts
node basic.js

# Or run directly with ts-node / bun (if installed)
npx ts-node basic.ts

2. Running the React + TypeScript Application (15th Ts Folder)

Navigate into the React project directory, install dependencies, and start the Vite development server:

# Navigate to React project directory
cd "15th Ts Folder"

# Install dependencies
npm install

# Start Vite local development server
npm run dev

Then open http://localhost:5173 in your browser.

---

🧠 Learning Philosophy

Learn Concept  ──>  Write Code  ──>  Compile  ──>  Debug  ──>  Refactor  ──>  Build React App

1. 📚 Learn: Understand type system mechanics and static analysis.
2. ✍️ Write: Practice syntax in isolated TypeScript files.
3. ⚙️ Compile: Let the TypeScript compiler catch errors before runtime.
4. 🔍 Debug: Inspect type errors, fix narrowing issues, and refine types.
5. ⚛️ Build: Implement concepts into real-world React UIs.

---

🎯 Skills Covered

• TypeScript Fundamentals: Primitive types, type annotations, compiler configuration
• Type System Mechanics: Type inference, union types, literal types
• Control-Flow Narrowing: Type guards, typeof, unknown safe assertions
• Object & Function Modeling: Type aliases, optional parameters, function return signatures
• Built-in Utility Types: Partial<T>, Required<T>, Readonly<T>
• Data Structures: Typed arrays (T[]), fixed-length tuples, readonly tuples
• Enumerations: Numeric enums, string enums, performance-focused const enum
• Object-Oriented Programming: Classes, constructors, public/private/protected modifiers
• Interface Design: Object shape contracts, extends inheritance, optional fields
• Generic Programming: Reusable generic functions (<T>) and constraints
• Asynchronous Type Safety: Typing Axios client responses & native fetch() calls
• React Integration: Typing component props, PropsWithChildren, ReactNode
• Event Handling: Typing form events (React.FormEvent) and input change events
• Custom React Hooks: Designing reusable generic custom state hooks (useFetch<T>)

---

📊 Learning Progression

TypeScript Foundation (00 - 02)
   ↓
Unions, Narrowing & unknown (03 - 05)
   ↓
Type Aliases & Functions (06 - 08)
   ↓
Arrays, Tuples & Enums (09)
   ↓
Classes & Interfaces (10 - 11)
   ↓
Generics (<T>) (12)
   ↓
Async API Integration (13 - 14)
   ↓
React + TypeScript Application (15)

---

🚀 What This Repository Demonstrates

• 🛡️ Compile-Time Error Prevention: Eliminates undefined is not a function errors before code hits production.
• 🤝 Self-Documenting Code Contracts: Interfaces and type aliases serve as explicit documentation for API boundaries and component props.
• 🔄 Confident Refactoring: Change data structures with confidence knowing compiler errors will flag every broken usage site.
• ⚛️ Production-Ready React Patterns: Demonstrates type-safe component props, layout children composition, form event handling, and generic custom hooks.

---

🔮 Future Roadmap

Note: The following topics are planned for future learning expansion and advanced TypeScript study.

• ⬜ Advanced Generics: Conditional types (T extends U ? X : Y), infer keyword usages
• ⬜ Mapped & Template Literal Types: Dynamic type transformations and string template types
• ⬜ Declaration Files (.d.ts): Authoring custom ambient type definitions for untyped packages
• ⬜ Type-Level Programming: Utility types implementation from scratch
• ⬜ Advanced React Patterns: Polymorphic components, useReducer with typed action unions
• ⬜ Full-Stack TypeScript: End-to-end type safety using Node.js, Express/NestJS, and Prisma ORM

---

🧑‍💻 Author

Built and maintained with passion as part of a continuous frontend engineering and TypeScript learning journey.

---

⭐ If you find this repository helpful for learning TypeScript, consider giving it a star! ⭐

Happy Coding! 🚀