TypeScript Tutorial: Functions in TypeScript (Chapter 4)

I am aware that you know what a function looks like in JavaScript, but still let’s have a look again with a perspective of TypeScript language. Functions in TypeScript are very similar to the one you have defined till now in JavaScript, at least when you begin with them. This chapter will give you the idea and you will realise that they are actually much evolved and advanced.

A TypeScript Tutorial for beginners on TypeScript

Functions in TypeScript

Let’s start by looking on a simple plain JavaScript way of declaring a function. Here is how you have defined the functions till now and these are not different than functions in TypeScript.

// a named function
function sum(num1, num2) {
    return num1 + num2;
}

// an anonymous function
var sum = function(num1, num2) {
    return num1 + num2;
}

I am sure you will be thinking what’s the difference, nothing actually till now this is exactly same in both languages. All the functions you define in JavaScript are 100% valid functions in TypeScript. (You remember that TypeScript in an extension of JavaScript).

Constraint the Parameters with Types

If you use the above functions you can use and pass any data type and it will execute and will give you results also. Let’s see the outcomes of the few calls to above function.

console.log(sum(1, 2)); // prints 3

console.log(sum('John ', 'Doe')); // prints John Doe 

console.log(sum('IsScuccess: ', true)); // prints IsScuccess: true

So, I can literally pass any type of data and that function is doing its task flawlessly. But are you sure, that was the intended behaviour of this function. No! It should sum two numbers. So let’s see what functions in TypeScript looks like by introducing the parameter types.

function sum(num1:number, num2:number) {
    return num1 + num2;
}

console.log(sum(1, 2)); // prints 3

console.log(sum('John ', 'Doe')); // compile error

console.log(sum('IsScuccess: ', true)); // compile error

Now we are talking TypeScript (partially though). The compiler will complain, throw error, but that’s all it can do. It will still compile and the generated JavaScript will still behave the way it was earlier. It is just a notification to you that you are doing something wrong. So, with TypeScript you get the intimation in advance that you might be doing it wrong when you are passing a non-numeric data to the function parameters.

Introduction to Return Type

No, I have not seen that coming. You can constraint the functions in TypeScript for the return type too. That means if the function is trying to return a type other than the intended type or you have forgot to return anything, TypeScript will complain … Again Only Complain. Let’s evolve above function here by adding a return type to it.

// a function with return type
function sum(num1:number, num2:number):number {
    let result = num1 + num2 + '';
}

Oops! there is nothing returned from the function and thats a pain point for TypeScript. Let’s try to fix that.

function sum(num1:number, num2:number):number {
    let result = num1 + num2 + '';
    return result;
}

Wait … what? TypeScript is still complaining of your misdeeds. It will … why not? One side you are telling that you need a number as output from the function and within the function you are corrupting that sense by returning a string. number + string = string, I am sure of that. Let’s wake the function in all its glory.

function sum(num1:number, num2:number):number {
    let result = num1 + num2;
    return result;
}

Yup! no mistake this time. That’s the true nature of human kind. We learn from our mistakes. I intentionally pick that route, so that you can learn from my mistakes and I hope you did.

Whats More …

Now, it can be a possibility that you don’t intend to return any thing from that function. So, you can use (Introducing: Void data type) “void” as a return type. In this case, if you “by mistake” return anything from the function, you will give TypeScript another reason to cry. Bellow snippet show the use of void.

function submitUpdates(postId: number, updateTime:Date):void {
    // do some work like call a webhook and forget
}

That’s not all, you have much more to learn with functions in TypeScript, but it is a talk for some other day. You will be able to start your journey with this much knowledge and leave the thriving part for the day in future. I am not saying that the knowledge is not important, but we will come back to this topic, when you have touched all the aspects of this tutorial here. I will take a leave for now and will let you continue your studies. Have a nice day … happy learning!

Go to Beginning with TypeScript Tutorial Index page.

Leave a Reply