TypeScript - First Program

In this chapter, we will write a simple program in TypeScript and compile it. We will also make some modifications to our program to see how JavaScript and TypeScript treat the code. We will see how TypeScript compiles the program and shows the errors, if any.

Let's write a simple program which adds two numbers and displays the output to the console.

Create a new file in your code editor and name it "add.ts". Write the following code in it:

File: add.ts
function addNumbers(a: number, b: number) { 
    return a + b; 
} 
var sum: number = addNumbers(10,15) 
console.log('Sum of the two numbers is: ' +sum); 

Now, open the command prompt on Windows (or a terminal in your platform), navigate to the path where you saved add.ts and compile the above TypeScript program in your terminal using the following command:

> tsc add.ts

This will compile your TypeScript program and create the following Javascript code in the file named add.js at the same location of add.ts:

File: add.js
function addNumbers(a, b) {
    return a + b;
}
var sum = addNumbers(10, 15);
console.log('Sum of the two numbers is: ' + sum);

As you can see, the TypeScript compiler compiled the TypeScript code into plain Javascript. Thus, if you now include the add.js file in your test.html file and run it in the browser, you will get the following output:

Sum of the two numbers is: 25

Code explanation:

function addNumbers(a: number, b: number) { 
            return a+b; 
} 

This is a function that takes in two input variables, a and b, and returns their sum. You will see a new syntax here a: number and b: number. This is called a Type annotation. This is used to specify a contract saying that the addNumbers function will receive two parameters a and b as numbers. We will learn more about this in the coming sections.

var sum:number = addNumbers(10,15)

Here, we are calling the addNumbers function defined above and assigning the result to a variable called sum. You will see a similar type annotation here as we had seen in the function above. This is to specify that the sum variable will receive a number, as a result of the function addNumbers.

console.log('Sum of the two numbers is: ' + sum);

Finally, we are displaying the output in the console.

Now, let's see how TypeScript compiles the program if we were to pass a string to the function addNumbers, instead of a number.

Replace var sum:number = addNumbers(10,15) in add.ts with var sum:number = addNumbers(10,'abc') and recompile the add.ts file in the terminal. You will get the following compilation error!

> tsc add.ts
add2.ts(5,32): error TS2345: Argument of type 'abc' is not assignable to parameter of type 'number'.

So, TypeScript does not compile the code if you pass a string to a function that is expecting a number!

Thus, static type-checking with type annotations, and several other TypeScript features like class, interface, and module help programmers write cleaner and more scalable code that can be developed across teams.

Learn about type annotation in TypeScript in the next chapter.