TypeScript Tutorial: Go beyond ‘Hello, World!’
Last week, I posted an introductory piece about TypeScript (“TypeScript Tutorial: A Guide to Using the Programming Language“) where I not only introduced you to the language but walked you through creating your first application. Said application was the ubiquitous “Hello, World!” which does one thing — print out the phrase “Hello, World!” in the terminal.
That’s awesome… but only serves to help you take your first steps with the language. Of course, TypeScript can do much more than just print out “Hello, World!” and I want to help you take those next important steps.
In case you didn’t already read the first piece, make sure you do as that will not only walk you through the “Hello, World!” app, it also demonstrates how to install TypeScript on the Linux platform with the help of Node.js and npm. So, before you continue reading this, make sure to get TypeScript installed and read about the “Hello, World!” app creation.
Done and done.
Let’s move on.
Expanding the ‘Hello, World!’ App
And you thought you were done with that little app. Never. What were going to do is highlight one of TypeScript’s cool features which enables it to print the message into a web browser. In the first piece, we built the app which generated the hw.js file. If we run that app with the command node hw.js, we’d see the correct output of Hello, New Stack! (threw you for a loop there).
But what if we wanted to print that output in a web browser? We can do that and it’s pretty simple. Let’s walk through it.
First, change into the directory you created the new project in. From the original piece, that directory is named “helloworld”, so change into with:
cd ~/helloworld
You should see two files: hw.js and hw.ts. The hw.ts file is where we built the app and hw.js is the JavaScript file generated from the code, using the tsc hw.ts command.
What we’ll do now is create a basic HTML index file that calls the hw.js application and prints the output in a web browser. Because TypeScript is a superset of JavaScript, you might find this usage to be pretty familiar (if you’ve ever worked with JavaScript).
The first thing we’ll do is create an index.html file with the command:
nano index.html
We’ll add the usual HTML elements to this file to start. So, copy/paste the following (or craft your own basic index file) into the new file:
|
1 2 3 4 5 6 7 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TypeScript: Hello, New Stack!</title> </head> |
With the head section done, let’s focus on the body. What we’re going to do is use the script src call to point to the hw.js JavaScript file. That section looks like this:
|
1 2 3 4 |
<body> <script src="/home/jack/helloworld/hw.js"></script> </body> </html> |
Notice, in the above section, I have the explicit path to the hw.js file. If you were to add ~/helloworld/hw.js, the app would have problems. Because of that, you want to make sure to type out the full path to the JavaScript application.
Save and close the file.
Now, open that file with your default web browser and it should print out Hello, New Stack! (Figure 1).
Figure 1: Success! Our app was able to output to the browser.
Now, let’s get beyond “Hello, World!”.
Adding Numbers with TypeScript
Let’s use TypeScript to add two numbers together. This will demonstrate not only how to use variables with the language but also how to use the add function.
Create a new ts file with:
nano numbers.ts
The first line of the app will call the add function and looks like this:
|
1 |
function add(x, y) { |
We end that line with a brace because we’re not finished with this section. We need to then add:
|
1 2 |
return x + y; } |
The entire first section defines our function that will add the values of x and y that we’ll define in the next line that looks like this:
|
1 |
var sum = add(3.14, 10); |
The above line adds our x (3.14) to our y (10) but doesn’t do anything else. We then need to print out the value we’ve assigned to the sum variable with the line:
|
1 |
console.log(sum); |
Our entire application looks like this:
|
1 2 3 4 5 6 |
unction add(x:number, y:number) { return x+y; } let sum = add(3.14,10); console.log(sum); |
You’re on fire!
Save and close the file. Next, we’ll compile that into JavaScript with:
tsc numbers.ts
That will create the numbers.js file, which we can run with:
node numbers.js
The results of running the app will print out 13.14 (because we added 3.14 to 10).
Okay, this is great. What about taking input from a user? That’s possible as well, using the parseInt function. Let’s create a simple application that asks the user for their name and prints it out. Before we do this, we need to install type definitions for Node.js with:
npm i --save-dev @types/node
After taking care of that, create the new file with:
nano name.ts
In that file, paste the following:
|
1 2 3 4 5 6 7 8 9 |
const readline = require('readline').createInterface({ input: process.stdin, output: process.stdout }); readline.question('What is your name?', name => { console.log(`Hello, ${name}!`); readline.close(); }); |
In the above code we:
- Set the const variable readline to accept input from the user with the createInterface function.
- Print out the question “Who are you? and assign the input to the variable name.
- Print out whatever was assigned to name.
Save and close the file. Compile the app into JavaScript with:
tsc name.tc
Now, run the app with:
node name.js
You’ll be asked for your name and the app will then print the name out in the console.
And there you have it! Your next steps with the TypeScript language. To dive further into this fantastic language, make sure to visit the official TypeScript documentation.