Skip to content

Latest commit

 

History

History
64 lines (37 loc) · 4.42 KB

File metadata and controls

64 lines (37 loc) · 4.42 KB

Learning TypeScript

Table of contents

Introduction

TypeScript is a programming language that extends JavaScript's capabilities by including optional static type checking and other features. TypeScript is a superset of JavaScript. In other words, TypeScript adds new features on top of the existing JavaScript language, such as optional static typing, classes, interfaces, and more, while still maintaining compatibility with the existing JavaScript ecosystem.

If you aren't that familiar with JavaScript, you can learn about JavaScript and TypeScript and their relationship here.

If you are already familiar with JavaScript, you can learn more about TypeScript and see some examples here.

To play around with and experiment using TypeScript, feel free to visit the playground page.

Why use TypeScript

TypeScript allows developers to catch potential errors early in the development process (at compile-time instead of runtime) and write more maintainable and scalable code. This can greatly reduce the likelihood of bugs and make code more reliable and easier to maintain, as well as improve code readability and make it easier to write reusable code. This makes TypeScript the preferred choice when building large-scale applications, especially in web development. Its syntax is similar to JavaScript, making it easy to learn and adopt for developers familiar with JavaScript.

To learn more about why you should consider using TypeScript over JavaScript, visit this blog here.

How to use TypeScript

You can integrate TypeScript into any JavaScript code, but it is most commonly used for web development using JavaScript frameworks such as React and Angular.

Here is how to create projects with the above frameworks using TypeScript.

React

You can find the complete guide here. To learn more about React and TypeScript, you can also follow this YouTube video by Ben Awad.

To create a React project with TypeScript enabled, follow these basic steps:

  1. Make sure you have Node.js installed on your machine. If you don't have Node.js installed, you can visit the official Node.js page here and follow the installation steps.

  2. Open a terminal and navigate to the directory where you want to create your app.

  3. Run the following command to create a new React app with TypeScript:

    npx create-react-app my-app --template typescript

That's it! Now you can use TypeScript files in your React project!

Angular

Angular comes with TypeScript enabled by default. In fact, Angular is built entirely in TypeScript, and is the recommended language for developing Angular applications. This is a summary of the guide found here. To learn more about Angular and TypeScript, you can watch this in-depth YouTube course by Mosh.

  1. Make sure you have Node.js installed on your machine. If you don't have Node.js installed, you can visit the official Node.js page here and follow the installation steps.

  2. Open a terminal and install the Angular CLI by using the following command

    npm install -g @angular/cli

  3. Open a terminal and navigate to the directory where you want to create your app.

  4. Run the following command to create a new workspace and initial starter app:

    ng new my-app'

Additional Resources