TypeScript Tutorial: Introduction & Setup — Part 1

Welcome to this introductory guide on TypeScript. TypeScript has gained a lot of traction among developers, and in this article, we’ll explore what TypeScript is and how to set it up.

What is TypeScript?

TypeScript is a programming language that can be seen as an alternative to JavaScript. More precisely, it’s a superset of JavaScript. This means it extends JavaScript, adding new features and syntax. Everything you can do in JavaScript, you can do in TypeScript, plus more!

However, there’s a catch: browsers don’t natively understand TypeScript like they do JavaScript. Therefore, we have to compile TypeScript into JavaScript for browsers to comprehend.

This extra step shouldn’t deter you from using TypeScript, as the compilation is often straightforward, and the language offers a multitude of advantages. One of these advantages is the ability to use strict types. In TypeScript, once you declare a variable of a certain type (e.g., a number), you can’t later reassign that variable to a different type (e.g., a string or boolean). This strict typing can make error-checking and debugging more straightforward, leading to cleaner and less error-prone code.

In contrast, JavaScript uses dynamic typing, where variable types can change at any time, potentially leading to more errors.

Moreover, TypeScript allows developers to leverage modern JavaScript features that might not yet be fully supported in all browsers (e.g., arrow functions, `let`, `const`, destructuring). Since TypeScript gets compiled down to older, more widely supported JavaScript, you don’t have to worry about browser compatibility issues for these newer features.

Additionally, TypeScript introduces features absent in standard JavaScript, like generics, interfaces, tuples, and more. We’ll delve into these features in subsequent sections.

Prerequisites

Before diving into TypeScript, it’s essential to have a solid understanding of JavaScript, including the DOM, asynchronous code, arrow functions, classes, etc. If you’re new to JavaScript, consider checking out some comprehensive JavaScript courses to lay a strong foundation.

Apart from the theoretical knowledge, you’ll need:

1. Node.js and npm: You need Node.js installed on your machine so that we can use npm (Node Package Manager) to install and compile TypeScript. If you haven’t already, download and install Node.js from [node.js.org](https://node.js.org/).

2. A Text Editor: Visual Studio Code is recommended since it has built-in TypeScript support, but any text editor will suffice.

3. Course Files: While this article provides a comprehensive overview, accessing course files can be beneficial. Find these in the ‘typescript-tutorial’ repository.

Setting Up TypeScript

To make the most of TypeScript, you’ll need the TypeScript compiler to convert your TypeScript code into regular JavaScript.

Here’s how to install the TypeScript compiler:

1. Open a terminal or command prompt.
2. Use the following command to install TypeScript globally on your computer:

npm install -g typescript

After successfully installing the TypeScript compiler, you’re all set! In the upcoming sections, we’ll look at how to write and compile TypeScript.

Stay tuned for a deeper dive into TypeScript, where we’ll build a mini-project — a finance logger — to solidify our understanding of this powerful language.