How to declare Return Types for Functions in TypeScript

This tutorial shows how to declare and specify return types in TypeScript functions. You can also refer to another post on Fix for Object is possibly null

Functions in any programming language typically consist of two parts:

• Function definition

• Function invocation (or caller)

  Each function comprises a function name, body, and return value.

In TypeScript, the return value is expected to be a valid data type, whereas JavaScript does not require declaration of return types.

In TypeScript, every function is expected to return data. However, is it mandatory to explicitly declare the return type for a function?

Let’s examine the syntax for specifying the return type of a function in JavaScript.

The return type of a function is denoted by appending a colon followed by the desired type after the function declaration.

functionName() : returntype { ... }

For instance, consider the following example:

In the code snippet below, we declare a class named HelloWorld with a method welcome(). Note that the return type is not explicitly declared.

The TypeScript compiler deduces the type based on the return value, assuming it to be a string.

Although this is valid and executes successfully in TypeScript.

class HelloWorld {
  welcome() {
    return "Hello World Example "; // type inferred to be a string
  }
}

Let’s look at another example where we explicitly declare a function with a return type of Boolean.

class Utils {
  IsNull(str: string): boolean {
    if (str) {
      return true;
    }
    return false;
  }
}

The recommended practice is to always declare functions with valid return types.

class HelloWorld {
  welcome(): string {
    return "Hello World Example "; // type inferred to be a string
  }
}

#How to return multiple data types in a TypeScript function?

In TypeScript, functions can return multiple types using a union type.

The syntax is as follows.

functionName(): returnType1 | returnType2 { ... }

Let’s illustrate this with an example of string equality.

function isEqual(str1: string, str2: string): boolean | string {
  return str1 === str2 ? true : "Not Equal";
}

In the above function, we check whether two strings are equal and return either a boolean or a string.

Similarly, new types can be created using the type keyword.

type StringAndBoolean = boolean | string;
function isEqual(str1: string, str2: string): StringAndBoolean {
  return str1 == str2 ? true : "Not Equal";
}

#How to declare a function with a void return type?

Functions in TypeScript can return another function. Additionally, functions can return functions with a void return type.

Use () => void to specify a function with a void return type:

parentFunction(): () => void {
    return () => {
        console.log('Parent function print');
    };
}

#Declaration of return type for anonymous functions

Anonymous functions are functions without names, often using arrow function syntax (=>).

To specify the return type of an anonymous function, declare it after the colon (:) symbol.

Here’s an example of an anonymous function returning a string:

const getMessage = (): string => "hello test";

Similarly, for a void return type.

const printLog = (): void => console.log("hello test");

#Function returning an object

In TypeScript, objects can be of type interface or class.

Let’s declare an object using an interface:

interface Employee {
  id: number;
  name: string;
}

The following function returns an object with multiple properties. The return type of the object is declared after the colon, specifying the type of the object:

function insertEmployee(id: number, name: string): Employee {
  // DB operation
  return {
    id: 1,
    name: "john",
  };
}