Skip to content

mechseiko/learn-typescript

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Learn Typescript

Welcome to the hands-on TypeScript learning environment!

Instead of reading long documentation, you'll learn by doing. Each lesson is a .ts file in src/lessons/ filled with explanations, examples, and challenges.

🎯 Who Is This For?

  • JavaScript developers looking to add type safety to their projects.
  • Frontend devs working with React, Vue, or Angular.
  • Anyone who wants a quick, interactive way to learn TypeScript fundamentals.

🛠️ Setup Instructions

To get started, make sure you have Node.js installed, then follow these steps:

  1. Install Dependencies:

    npm install
  2. Run a Lesson: Each lesson has a dedicated NPM script. For example, to run the first lesson:

    npm run lesson:01

📚 The Curriculum Roadmap

We recommend going through them in order:

Foundation

  • Lesson 01: Introduction to TypeScript
  • Lesson 02: Basic Types (string, number, boolean, any, unknown)
  • Lesson 03: Arrays and Tuples
  • Lesson 04: Objects and Type Inference
  • Lesson 05: Functions in TypeScript

Intermediate Patterns

  • Lesson 06: Advanced Function Types (Overloads, void, never)
  • Lesson 07: Type Aliases
  • Lesson 08: Union and Intersection Types
  • Lesson 09: Type Narrowing (typeof, in, instanceof)
  • Lesson 10: Literal Types (UI State management)

Object-Oriented & Structural

  • Lesson 11: Interfaces
  • Lesson 12: Generics (The key to reusable code)
  • Lesson 13: Utility Types (Partial, Pick, Omit, Record)
  • Lesson 14: Enums

Advanced Features & Integration

  • Lesson 15: Type Assertions (as)
  • Lesson 16: Modules in TypeScript
  • Lesson 17: Classes in TypeScript
  • Lesson 18: Advanced Types (keyof, mapped types)
  • Lesson 19: Working with Third-Party Libraries (@types)
  • Lesson 20: TypeScript in Real Frontend Projects

✍️ How to Learn

Each file follows a standard format:

  1. Lesson Title & Goal: What you'll achieve.
  2. Concept Explanation: Short and punchy.
  3. Basic Example: The "Hello World" of the concept.
  4. Real Frontend Example: How it's used in the wild.
  5. Common Mistakes: What to watch out for.
  6. Practice Challenges: Your turn to write code!

🤝 Contributing & Issues

We want to make this the best TypeScript resource for beginners!

  • Found a bug? Open an issue.
  • Want to help? Check out our Contributing Guide.
  • Suggestions? We'd love to hear your ideas for new lessons or better examples!

Happy Coding! 💻

About

Typescript roadmap with Interactive lessons for developers. Each concept lives in a runnable .ts file with explanations and use cases.

Topics

Resources

Contributing

Stars

Watchers

Forks

Contributors