Functions in TypeScript

This is the first entrance of tecnical articles, and the first one is related to … functions in TypeScript.

Functions

Functions are a group of sentences that solves a specific problem,

Either if you are coding in Javascript or TypeScript, functions has a header (where you define the name of the function) and a body with the instructions, that can be defined in several ways:

• Named functions
• Anonimous functions/methods
• Lambda functions
• Class functions

Several options, as you can see. In all cases, functions acepts arguments, and even you can force them to be assigned to a concrete type. But, what happend when you have no idea how many arguments are you passing to a functions? In order to solve this, you can use ? before the last parameter when defining the function.

Another issue is assigning default values (the same as Python) when creating the functions. Another interesting issue comes when using …variable: string[], the way of allowing a variable number of parameters (as Javascript allows), and they all are stored under the array variable.

function buildName(firstName: string, ...restOfName: string[]) {
return firstName + " " + restOfName.join(" ");
}

var foo = buildName("Joseph", "Samuel", "Lucas"); var foo = buildName("Maria", "Lu");

Using this tips you have all possibilities with arguments and functions.

Now, time for different types of functions.

Named functions

The first option is different to Javascript named functions because you can assign types, to arguments and to the return of the function as well.

function foo(msg: string) { console.log(msg); }

Almost no differences with the same function written in Javascript:

function foo(msg) { console.log(msg); }

Anonimous functions

Maybe, the kind of functions is the most used by me in Javascript, and as before, the difference is only assigning types in arguments and the value returned:

var foo = function(x: number, y: number): number { return x+y; }

In Javascript, is very similar:

var foo = function(x, y) { return x+y; }

If the functions is not returning anything, you can typed it as void (this is done in Java and C#).

Lambda functions

Lambda functions are one line functions that you can store on a variable, or execute it directly. You don’t need to write return becuase is understood that this functions always return something. This lambda functions are not exclusive for TypeScript, but also you can find them in languages such as C# or Python.

In TypeScript, lambda functions are identified because of the use of =>, the separator between the argument and the code returned:

var foo = (x: number, y: number) => x+y;

If you write the function without using lambda, it would be like this:

var foo = function (x, y) { return x + y; };

In my opinion, this way offers a developers several ways of doing the same job, and it can be a mess for some programmers, my case! I don’t use them normally.

Class functions

When you define class functions, one feature is that the kwyword functions is not written:

class NewClass {

foo(x: number, y:number): number { return x+y; }

}

An example of TypeScript functions

Turn to write some code. Let’s create a simple form, where you write two numbers or strings, and you want to add them. Here you have the TypeScript code, the code you are interested in.

(function () {
    
    //Lambda function
    var $ = (id) => document.getElementById(id);

    var totalButton: HTMLButtonElement = <HTMLButtonElement>$('sumar');
    var uno: HTMLInputElement = <HTMLInputElement>$('uno');
    var dos: HTMLInputElement = <HTMLInputElement>$('dos');
    var resultado = $('resultado');
    
    var ejecuta = function(): void {
        console.log(uno.value);
        console.log(dos.value);
        resultado.innerHTML = uno.value + dos.value;
    }
    totalButton.addEventListener('click', (e) => {
        ejecuta()
    })
    uno.addEventListener('change', (e) => {
        // resultado.innerHTML = dos.value + uno.value;
        ejecuta();
    })
    
})();

First of all, all code is written under an anonymous function. Also, you can find very inteersting the use of HTMLInputElement as a type for dealing with form elements, in this case an input. More, I have defined a lambda function $ in order to return a DOM element by ID (there are other ways to retrieve objects from the DOM).

I have used AddEventListener for linking an event to a button. The original idea is that when the button is pressed, all the action is run, but finally, I decided to run the action when the content of the input changes, with inmediatly response.

You can access to the example here, but remember that the TypeScript code is translated into Javascript. Next step is understanding classes in TypeScript.

I think this easy exercise is very interesting for starting to play with TypeScript, so, I hope you enjoy and … happy coding!