Table of Contents

TypeScript functions include:

• Type Annotation for parameter and return type
• Optional and Default Parameters
• Arrow functions
• Rest parameters
• Function Overloads

In this lesson we will see TypeScript additions for functions. Topics on this page (not covered by ES6):

• TypeScript vs JavaScript
• Types - parameters, return and function types.
• Parameters - function parameters options.
• Overloading - function overloading.

TypeScript vs JavaScript

The following image shows the differences between TypeScript and JavaScript functions. In this lesson we will cover only the differences over ES6.

Parameter, Return & Function Types

It is a good practice to specify the types for function parameters and for function return type (as in C). The following examples show the syntax of type specification.

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

let myAdd1 = function( x: number, y: number ): number { 
    return x + y; 
};

// same with arrow
let myAdd2 = ( x: number, y: number ): number => x + y;

function myPrint() : void {
    console.log( 'hello' );
}

Variables may be declared with function type as shown below. It is not an executable function, but just a type definition for a function. Once such a variable is declared, a real function can be assigned to it. Function assigned must have the same signature as the variable type.

// declare a variable with function type (it is not the same arrow as above)
let myAddFun: ( x: number, y: number ) =>  number;

myAddFun = myAdd1;
console.log( myAddFun ( 10, 20 ) );

// assign another function to the variable
myAddFun = ( n1: number, n2: number ) => 
{ 
    return n1 + 2 * n2; 
}
// the above can be written:
// myAddFun = (n1: number, n2: number ) => n1 + 2 * n2;

console.log( myAddFun ( 10, 20 ) );

Function Parameters

TypeScript supports default parameters as ES6. In addition it supports optional parameters.

When we declare parameters for a function then all the parameters are required we have to pass values to every parameter. When there is no value for any parameter then we can pass null value to it. TypeScript provides an Optional parameters feature. By using Optional parameters, we can declare some paramters in the function optional, so that it is not required to pass value to optional parameters.

Optional parameters always come last in the parameter list of function. We can not put optional parameter first and then required parameters in the function. We can define optional parameters in TypeScript by adding a ? to the end of parameters we want to be optional. To summarize:

• Optional parameter is denoted by ? after the parameter name
• Optional parameters must appear after all required parameters. For example, the following will give an error:

  function getSchool(var1?: number, var2: string) { } //ERROR

• Optional parameter makes value of parameters to ‘undefined’, while Default parameters provides default value to parameter if you don’t provide it any value.

In function, we can check whether client has passed the parameter value or not. If parameter value is not passed, then default value is 'undefined'.

Example:

function buildName( firstName: string, lastName?: string ) {
    if ( lastName )
        return firstName + " " + lastName;
    else
        return firstName;
}

Function Overloading

TypeScript provides the concept of function overloading. You can have multiple functions with the same name but different parameter types and return type. Overloading in TypeScript differs from regular OO languages. When you overload in TypeScript, you only have one implementation with multiple signatures. inside the implementation we can check the type of passed parameter by using typeof. For example:

function myMethod( a: string ) : number;
function myMethod( a: number ) : void;
function myMethod( a: number, b: string ) : void;

function myMethod(a: any, b?: string) : any {
    if ( typeof ( a ) == 'number' )
      return ( a * 2 );
    else 
      alert( a + b ) ;
}

As of TypeScript 1.4, you can typically remove the need for an overload using a union type. The above example can be better expressed using:

function myMethod( a: string | number, b?: string ) : any {
    if ( typeof ( a ) == 'number' )
      return ( a * 2 );
    else 
      alert( a + b ) ;
}