TypeScript Tutorial: A Guide to Using the Programming Language – thenewstack.io

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:

Some of the features that TypeScript offers over JavaScript include:

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.

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

Lets 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, lets add an IDE into the mix. Well 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.

The first thing were 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, well 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!';

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:

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);

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).

Figure 1: Weve opened a new terminal within VSCode.

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

cd helloworld

Next, well 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).

Figure 2: Both of our files as shown in the VSCode Explorer.

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

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

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

Figure 4: Our Hello, World! app run was a success.

What if you want to do all of this from the terminal window (and not use an IDE)? Thats even easier. Go back to the same terminal you used to write the Hello, World! app and make sure youre 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, youve installed TypeScript and written your first application with the language. Next time around well go a bit more in-depth with what you can do with the language.

Go here to read the rest:
TypeScript Tutorial: A Guide to Using the Programming Language - thenewstack.io