TypeScript Tutorial: A Guide to Using the Programming Language

JavaScript is one of the most widely-used programming languages for frontend web development on the planet. Developed by Microsoft, TypeScript serves as a strict syntactical superset of JavaScript that aims to extend the language, make it more user-friendly, and apply to modern development. TypeScript is an open source language and can be used on nearly any platform (Linux, macOS, and Windows).

TypeScript is an object-oriented language that includes features like class, interface, Arrow functions, ambient declaration, and class inheritance. Some of the advantages of using TypeScript include:

• Runs on any browser or JavaScript engine.
• Uses the same syntax as JavaScript and all TypeScript code is converted into JavaScript.
• TypeScript code can be called from existing JavaScript code.
• Works with existing JavaScript frameworks.
• Provides support for JavaScript libraries.
• Supports the latest JavaScript features.
• Easy integration with third-party tools.
• Fewer runtime errors.
• Better code quality and documentation

Some of the features that TypeScript offers over JavaScript include:

• Optional static typing
• Readability
• Vast IDE Support
• Object-Oriented Programming
• Support for the latest ECMAScript features

One of the biggest advantages of using TypeScript is that it offers a robust environment to help you spot errors in your code as you type. This feature can dramatically cut down on testing and debugging time, which means you can deliver working code faster.

Ultimately, TypeScript is best used to build and manage large-scale JavaScript projects. It is neither a frontend nor backend language, but a means to extend the feature set of JavaScript.

I’m going to walk you through the installation of TypeScript and get you started by creating a very basic Hello, World! application.

Installing TypeScript and VSCode on Linux

Let’s get TypeScript installed on Linux (specifically, Ubuntu 22.04). In order to do this, we must first install Node.js. Log into your Ubuntu Desktop instance, open a terminal window and install both Node.js and npm with the command:

sudo apt-get install nodejs npm -y

With Node.js and npm installed, we can now install TypeScript with npm using the command:

npm install -g typescript

If that errors out, you might have to run the above command with sudo privileges like so:

sudo npm install -g typescript

To verify if the installation was successful, issue the command:

tsc -v

You should see the version number of TypeScript that was installed, such as:

Version 4.7.4

Now that you have TypeScript installed, let’s add an IDE into the mix. We’ll install VSCode (because it has TypeScript support built-in). For this we can use Snap like so:

sudo snap install code --classic

Once the installation is complete, you can fire up VSCode from your desktop menu.

Create your Hello, World! app

The first thing we’re going to do is create a folder to house our Hello, World! application. On your Linux machine, open a terminal window and issue the command:

mkdir helloworld

Change into that directory with:

cd helloworld

Next, we’ll create the app file with:

nano hw.ts

In that new file, add the first line of the app like so:

let message: string = 'Hello, New Stack!';

Above you see we use let which is similar to the var variable declaration but avoids some of the more common gotchas found in JavaScript (such as variable capturing, strange scoping rules, etc.). In our example, we set the variable message to a string that reads Hello, New Stack!. Pretty simple.

The second line for our Hello, World! app looks like this:

console.log(message);

What this does is print out to the console log whatever the variable message has been set to (in our case, Hello, New Stack!).

Our entire app will look like this:

let message: string = 'Hello, New Stack!';
console.log(message);

Save and close the file.

With VSCode open, click Terminal > New Terminal, which will open a terminal in the bottom half of the window (Figure 1).

At the terminal, change into the helloworld folder with the command:

cd helloworld

Next, we’ll generate a JavaSript file from our TypeScript file with the command:

tsc hw.ts

Open the VSCode Explorer and you should see both hw.js and hw.ts (Figure 2).

Select hw.js and then click Run > Run Without Debugging. When prompted (Figure 3), select node.js as your debugger.

Once you do that, VSCode will do its thing and output the results of the run (Figure 4).

What if you want to do all of this from the terminal window (and not use an IDE)? That’s even easier. Go back to the same terminal you used to write the Hello, World! app and make sure you’re still in the helloworld directory. You should still see both the TypeScript and JavaScript files.

To run the Hello, World! app from the command line, you use node like so:

node hw.js

The output should be:

Hello, New Stack!

Congratulations, you’ve installed TypeScript and written your first application with the language. Next time around we’ll go a bit more in-depth with what you can do with the language.