TypeScript Functions: How to Create and Use Functions in TypeScript

Are you learning TypeScript programming? Do you want to know how to create and use TypeScript functions? Then, you're in the right place! TypeScript functions are essential for code re-usability, and they allow developers to write clean and efficient code. In this article, we will explore the world of TypeScript functions, and we will learn how to create and use them in your TypeScript project.

What are TypeScript Functions?

In TypeScript, a function is a block of code that performs a specific task. TypeScript functions are similar to JavaScript functions, but with some additional features. TypeScript functions can be defined with explicit parameter types and return types, allowing strict type checking. TypeScript functions also support arrow notation, which makes them concise and easy to read.

In TypeScript, we can define functions in two different ways: function declarations and function expressions.

Function Declarations

A function declaration is defined using the function keyword. Function declarations can be used before they are declared because of TypeScript's hoisting feature. Here is an example of a function declaration that prints a message to the console:

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

In the code above, we define a function called greet that takes a string parameter name and returns nothing (void).

Function Expressions

A function expression is defined by assigning a function to a variable or constant. Function expressions are scope dependent, which means they need to be declared before they are used. Here is an example of a function expression that adds two numbers:

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

In the code above, we define a function expression called add that takes two number parameters a and b and returns a number.

Invoking TypeScript Functions

To execute a function, we need to call it by its name and pass any required parameters. Here is an example of how to invoke the greet and add functions:

greet('Mary');
const result = add(3, 4);

The greet function is called with the argument Mary, and the add function is called with the arguments 3 and 4.

TypeScript Function Parameters

In TypeScript, we can define the types of function parameters explicitly. Explicit parameter types help us catch type errors at compile time, making our code more predictable and less error-prone. Here is an example of a function that takes two parameters, one of type string, and the other of type number:

function showDetails(name: string, age: number): void {
    console.log(`Name: ${name}, Age: ${age}`);
}

The function showDetails takes two parameters, name of type string and age of type number.

TypeScript Function Return Types

In TypeScript, we can define the types of function return values explicitly. Similar to parameter types, explicit return types help us catch type errors at compile time, making our code more predictable and less error-prone. Here is an example of a function that returns a number:

function getLength(str: string): number {
    return str.length;
}

The function getLength takes one parameter str of type string, and it returns a value of type number, which is the length of the string.

TypeScript Arrow Functions

TypeScript arrow functions are a concise way of defining functions that is available starting from ECMAScript 6. Arrow functions can make the code more readable, and they can be easier to maintain. Here is an example of an arrow function that returns the square of a number:

const square = (num: number): number => num * num;

The square function takes one parameter num of type number, and it returns a value of type number, which is the square of the parameter.

TypeScript Optional Parameters

In TypeScript, we can define optional function parameters by using the ? symbol after the parameter name. The optional parameters will be undefined if they are not passed a value. Here is an example of a function that takes an optional parameter:

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

The buildName function takes two parameters, firstName of type string and an optional lastName parameter of type string. If the lastName parameter is provided, it will be added to the firstName parameter. If no value is passed to the lastName parameter, the function will return the firstName parameter.

TypeScript Default Parameters

TypeScript provides default parameter values for functions, which are a way of specifying a default value for a parameter if it is not provided by the caller. Here is an example of a function that uses default parameter values:

function showMessage(message: string = "Hello World"): void {
    console.log(message);
}

The showMessage function takes one parameter of type string, and if the parameter is not provided, the function will print the string Hello World to the console.

TypeScript Rest Parameters

In TypeScript, we can use rest parameters to define functions that accept an indefinite number of parameters. Rest parameters are indicated by three dots ... before the parameter name. Here is an example of a function that uses rest parameters:

function multiply(n: number, ...vals: number[]): number {
    let result = n;
    for (let i = 0; i < vals.length; i++) {
        result *= vals[i];
    }
    return result;
}

The multiply function takes one parameter n of type number and an indefinite number of rest parameters vals of type number. The function multiplies the value of n by all of the rest parameters and returns the result.

Conclusion

TypeScript functions are an essential part of any TypeScript project. They allow us to write clean and efficient code, making our applications more manageable and less error-prone. In this article, we explored TypeScript functions, and we learned how to create and use them in our TypeScript projects. We covered different types of functions, including function declarations, function expressions, arrow functions, optional parameters, default parameters, and rest parameters. Now it's your turn to put what you've learned into practice! Happy coding!

Additional Resources