Type Script

Why learn TypeScript ❓ #

  • TypeScript is a strongly typed superset of JavaScript that compiles to plain JavaScript. It provides better tooling and error checking, making it a popular choice for large-scale projects.
  • With TypeScript, you can take advantage of modern JavaScript features and type safety, leading to better code quality and maintainability.
  • TypeScript is indeed widely used in combination with popular JavaScript front-end frameworks like Angular, React, and Vue. This makes it a valuable skill for web developers working on the front-end. Additionally, TypeScript is also used with popular back-end frameworks, such as Node.js, Express, NestJS further enhancing its importance in the world of full-stack web development.

🎓 Take Away Skills #

After completing this learning path you will be knowledgeable in:

  • TypeScript Basics and Syntax
  • Types and Interfaces
  • Classes and Inheritance
  • Generics
  • Decorators
  • Modules and Namespaces
  • Integration with JavaScript frameworks

🛠️ Prerequisites #

🧑🏻‍💻 Programming Knowledge #

You should have a solid understanding of JavaScript, including ES6 features, before diving into TypeScript.

You can refer to the JavaScript learning path mentioned above if you need to brush up on your JavaScript skills.

📲 Installation and Setup #

Before you install TypeScript, you’ll need Node.js and npm (Node.js package manager) installed on your system. npm is included with Node.js, so you only need to install Node.js:

  • Node.js

    JavaScript runtime which helps you run JavaScript programs in your system.

    Install Node

    Note: Install the stable version

Once you have Node.js and npm installed, you can proceed with the installation of TypeScript:

  • TypeScript

    Install TypeScript globally using npm (Node.js package manager).

    npm install -g typescript

In addition, you’ll need a code editor and browser to follow along with this learning path. The preferred ones are listed below:

  • VS Code

    Light-weight code editor by Microsoft with a large ecosystem of plugins to help your workflow

    Install VS Code

  • Google Chrome A browser based on V8 JavaScript engine with developer tools. Install Google Chrome

💡 Learning Session #

Basics of TypeScript #

🎓 Topics to Learn

  • TypeScript Syntax and Basics
  • Static Types and Type Annotations
  • Interfaces
  • Functions and Optional Parameters
  • Enums and Tuples

🧑🏻‍💻 Learn from

📽️ Videos

Articles/Blogs

🛠️ Get into action

  • Both of the above mentioned resources include a lot of activities. Try those activities to get a better understanding of TypeScript.

Advanced TypeScript #

🎓 Topics to Learn

  • Classes and Inheritance
  • Generics
  • Decorators
  • Modules and Namespaces
  • Integration with JavaScript frameworks (Angular, React, Vue)

🧑🏻‍💻 Learn from

📽️ Videos

📄 Articles/Blogs

🛠️ Get into action

A few projects you can build to implement the concepts you have learned above:

  • Convert a small JavaScript project into TypeScript, such as a simple counter with two buttons(+,-) where the user can increase or decrease the value when the respective buttons are clicked.
    • You will get an understanding of TypeScript syntax, types, and interfaces
  • Build a simple TypeScript application using a popular framework like Angular, React, or Vue.
    • You will get an understanding of TypeScript integration with JavaScript frameworks

🔖 Resource Pool #

You can checkout these additional resources to learn more about TypeScript

📄 Articles/Blogs #

📽️ Videos #

📚 Books #

🚀 Project Pool #

Here are few project ideas you can try out, these are just an inspiration to get started. Try to learn and build ideas that come to your mind.

  • Create a to-do list application using TypeScript and a JavaScript framework like Angular, React, or Vue.
  • Build a weather application using TypeScript and a weather API.
  • Convert an existing JavaScript project into TypeScript and refactor the code to take advantage of TypeScript’s features.

Explore various TypeScript libraries and tools, and create interesting projects that showcase your TypeScript skills.

Created with 💙 by Shameel Kadannamana & TinkerHub