Functions in TypeScript

A function is a reusable block of code that performs a specific task. TypeScript enhances JavaScript functions by adding type safety, ensuring that parameters and return values match the expected data types.

Syntax

function functionName(parameters): returnType {

// function body

return value;

}

Example

function greet(): void {

console.log(“Welcome to TypeScript”);

}

greet();

Output

Welcome to TypeScript

1. Function Without Parameters

function display(): void {

console.log(“Hello Playwright”);

}

display();

Output

Hello Playwright

2. Function With Parameters

function add(num1: number, num2: number): number {

return num1 + num2;

}

let result = add(10, 20);

console.log(result);

Output

30

3. Function With Return Type

function getName(): string {

return “Anand”;

}

console.log(getName());

Output

Anand

4. Function Without Return Value (void)

function printMessage(message: string): void {

console.log(message);

}

printMessage(“Welcome”);

Output

Welcome

5. Optional Parameters

Use ? to make a parameter optional.

function employee(name: string, age?: number): void {

console.log(name);

console.log(age);

}

employee(“Anand”);

employee(“Rahul”, 30);

Output

Anand

undefined

Rahul

30

6. Default Parameters

function greet(name: string = “Guest”) {

console.log(“Hello ” + name);

}

greet();

greet(“Anand”);

Output

Hello Guest

Hello Anand

7. Rest Parameters

Accept multiple values.

function total(…marks: number[]): number {

let sum = 0;

for (let mark of marks) {

sum += mark;

}

return sum;

}

console.log(total(10,20,30));

console.log(total(10,20,30,40,50));

Output

60

150

8. Anonymous Function

A function without a name.

let square = function(num:number):number{

return num*num;

}

console.log(square(5));

Output

25

9. Arrow Function

Modern syntax introduced in ES6.

const multiply = (a:number,b:number):number => {

return a*b;

}

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

Output

200

Short Form

const cube = (n:number):number => n*n*n;

console.log(cube(3));

Output

27

10. Function Expression

const divide = function(a:number,b:number):number{

return a/b;

}

console.log(divide(20,5));

Output

4

11. Recursive Function

A function calling itself.

function factorial(num:number):number{

if(num==1)

return 1;

return num*factorial(num-1);

}

console.log(factorial(5));

Output

120

12. Callback Function

function calculate(a:number,b:number,

operation:(x:number,y:number)=>number)

{

return operation(a,b);

}

let result=calculate(10,20,

(a,b)=>a+b);

console.log(result);

Output

30

13. Function Overloading

function display(value:string):void;

function display(value:number):void;

function display(value:any):void{

console.log(value);

}

display(“Playwright”);

display(100);

Output

Playwright

100

14. Generic Function

function print<T>(value:T):T{

return value;

}

console.log(print<number>(100));

console.log(print<string>(“TypeScript”));

console.log(print<boolean>(true));

Output

100

TypeScript

true

15. Higher-Order Function

A function that accepts another function.

function execute(operation:()=>void){

operation();

}

execute(()=>{

console.log(“Executing…”);

});

Output

Executing…

16. Immediately Invoked Function Expression (IIFE)

(function(){

console.log(“IIFE Executed”);

})();

Output

IIFE Executed

Function Types

let operation:(a:number,b:number)=>number;

operation=(a,b)=>a+b;

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

Difference Between Function Declaration and Arrow Function

Function Declaration	Arrow Function
Uses function keyword	Uses => syntax
Has its own this	Inherits this from parent
Can be hoisted	Cannot be used before declaration
Traditional syntax	Short and concise

Tags: Functions in TypeScript, Typescript Training