Skip to main content

Functions in Typescript

Introduction to Functions in TypeScript​

Functions are the building blocks of any application. In TypeScript, they provide a way of encapsulating a group of logical statements into a block, which can be executed whenever necessary. This tutorial will walk you through a comprehensive understanding of Functions in TypeScript.

What are Functions?​

In TypeScript, functions are reusable procedures that divide your code into manageable sections. Functions make your code more readable, maintainable, and reusable. They can be called multiple times and reused in different parts of your application.

Function Declaration​

In TypeScript, you can declare a function in the following way:

function greet(name: string): void {
    console.log("Hello, " + name);
}

In the above example, greet is a function that takes one argument name of type string. The void keyword denotes that this function does not return a value.

Function Call​

You can call (or execute) the function using the function name followed by the argument(s) in parentheses. Here's how you can call the greet function:

greet("TypeScript");

Function Return Types​

In TypeScript, you can specify the return type of a function. Here's an example:

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

In this example, add is a function that takes two parameters a and b of type number and returns a number.

Optional Parameters​

TypeScript provides the ability to mark a parameter as optional using the ? symbol. However, optional parameters must always follow required parameters.

function greet(name: string, greeting?: string): void {
    if (greeting) {
        console.log(`${greeting}, ${name}`);
    } else {
        console.log(`Hello, ${name}`);
    }
}

Default Parameters​

In TypeScript, you can assign a default value to a parameter. If a value is not provided for the parameter when the function is called, TypeScript will use the default value.

function greet(name: string, greeting: string = "Hello"): void {
    console.log(`${greeting}, ${name}`);
}

Rest Parameters​

TypeScript also supports rest parameters, which allow a function to accept any number of arguments. They are marked with the ... syntax.

function sum(...numbers: number[]): number {
    return numbers.reduce((prev, current) => prev + current, 0);
}

Function Overloads​

Function overloading allows a function to have multiple definitions with different numbers or types of parameters. TypeScript uses the top-down approach to find the matching overload.

function greet(name: string): void;
function greet(id: number, name: string): void;

function greet(idOrName: any, name?: string): void {
    if (name) {
        console.log(`Hello, ${name} with ID: ${idOrName}`);
    } else {
        console.log(`Hello, ${idOrName}`);
    }
}

In conclusion, functions in TypeScript are powerful and flexible, providing various ways to define and call functions. They play a significant role in structuring and organizing TypeScript code. As you continue to explore TypeScript, you'll find the use of functions essential to building scalable and maintainable applications.