A Programming Language User’s Guide – The New Stack

JavaScript is one of the most widely used programming languages ​​for front-end 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 almost all platforms (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 benefits of using TypeScript include:

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

Some of the features offered by TypeScript over JavaScript include:

  • Optional static typing
  • Readability
  • Extensive IDE support
  • object-oriented programming
  • Support for latest ECMAScript features

One of the biggest benefits of using TypeScript is that it provides a robust environment to help you catch errors in your code as you type. This feature can significantly reduce testing and debugging time, which means you can deliver working code faster.

Ultimately, TypeScript is best used for building and managing large-scale JavaScript projects. It is neither a front-end nor a core language, but a way to extend the feature set of JavaScript.

I’ll walk you through installing TypeScript and get you started by creating a Hello, World! application.

Installing TypeScript and VSCode on Linux

Let’s install TypeScript on Linux (specifically, Ubuntu 22.04). To do this, we first need to install Node.js. Log in to 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 this happens, you may need to run the above command with sudo privileges as follows:

sudo npm install -g typescript

To check if the installation was successful, run the command:

tsc -v

You should see the TypeScript version number that was installed, for example:

Version 4.7.4

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

sudo snap install code --classic

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

Create your Hello, World! application

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

mkdir helloworld

Access this directory with:

cd helloworld

Next, we will create the application file with:

nano hw.ts

In this new file, add the first line of the application as follows:

Above you see that we use let which looks like the var variable declaration, but avoids some of the more common pitfalls found in JavaScript (such as capturing variables, weird scoping rules, etc.). In our example, we define the variable message has a string of characters who reads Hello, new battery!. Simple enough.

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

What this does is print to the console log regardless of the variable message was set to (in our case, Hello, new battery!).

Our entire application will look like this:

Save and close the file.

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

Figure 1: We opened a new terminal in VSCode.

In the terminal, change to the helloworld folder with the command:

cd helloworld

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

tsc hw.ts

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

Figure 2: Our two files, as shown in VSCode Explorer.

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

Figure 3: Selecting the right debugger is a crucial step.

Figure 3: Selecting the right debugger is a crucial step.

Once you’ve done that, VSCode will do its thing and show the results of the run (Figure 4).

Figure 4: Our Hello, World!  running the application was successful.

Figure 4: Our Hello, World! running the application was successful.

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

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

node hw.js

The output should be:

Hello, New Stack!

Congratulations, you have installed TypeScript and written your first application with the language. Next time, we’ll dig a little deeper into what you can do with the language.

About Mariel Baker

Check Also

5 Current Female Superstars Who Haven’t Appeared On WWE Programming In Over 30 Days

WWE’s female superstars continue to thrive during this new era. However, you are not alone …