TypeScript Anonymous Functions – Syntax & Examples

TypeScript Anonymous Functions

A TypeScript anonymous function is a function expression without its own declared name. It can be assigned to a variable, passed directly as a callback, stored in an object, or returned from another function.

Although the function itself is anonymous, the variable holding it can have a name. For example, the function in const add = function (a, b) { return a + b; } has no declared function name, while add is the variable through which it is called.

Anonymous functions are useful for short operations that are needed in one location, particularly callbacks. TypeScript can check their parameter types, return types, and compatibility with an expected function type.

Syntax of an Anonymous Function in TypeScript

var varName = function( [arguments] ) { 
    // function body          
}

• var declares the variable in this original syntax example. In modern TypeScript, use const when the variable will not be reassigned and let when reassignment is required.
• varName is the variable that stores the function value.
• function begins a function expression and creates a TypeScript Function.
• The parameters inside parentheses are optional. Each parameter can have an explicit TypeScript type.
• The function body contains the statements executed when the function is called.
• A return type can be written after the parameter list, although TypeScript can often infer it.

A modern form with explicit parameter and return types is:

const variableName = function (parameter: ParameterType): ReturnType {
    return value;
};

TypeScript Anonymous Function with Arguments

In the following example, an anonymous function is defined and assigned to a variable named result. TypeScript checks that both arguments are numbers and infers a numeric return type.

example.ts

var result = function(a:number, b:number) { 
    return a+b
}

var c = result(12,2) // c = 14

Calling result(12, 2) executes the stored function and assigns 14 to c. Passing an incompatible value, such as a string, produces a TypeScript type-checking error.

When the above code is transpiled, following JavaScript code is generated.

example.js

var result = function (a, b) {
    return a + b;
};
var c = result(12, 2); // c = 14

The parameter annotations are absent from the generated JavaScript because TypeScript types are used during development and are removed during transpilation.

TypeScript Anonymous Function with No Arguments

An anonymous function can have an empty parameter list when it does not need input from the caller.

example.ts

var displayMessage = function () {
    console.log("Hello User!")
}

displayMessage()

Transpiled JavaScript code would be as shown below.

example.js

var displayMessage = function () {
    console.log("Hello User!");
};
displayMessage();

Output

Hello User!

Declaring a TypeScript Function Type for an Anonymous Function

A function type describes the parameters accepted by a function and the value it returns. It can be applied to a variable before an anonymous function is assigned to it.

const calculateTotal: (price: number, quantity: number) => number =
    function (price, quantity) {
        return price * quantity;
    };

const total = calculateTotal(250, 3);
console.log(total);

The type annotation requires two numeric parameters and a numeric return value. Because the expected function type supplies the parameter types, they do not have to be repeated inside the function expression. This is called contextual typing.

750

Type Alias for Reusable Anonymous Function Types

Use a type alias when several variables or parameters share the same function signature.

type NumberOperation = (left: number, right: number) => number;

const subtract: NumberOperation = function (left, right) {
    return left - right;
};

const multiply: NumberOperation = function (left, right) {
    return left * right;
};

Both anonymous functions must accept two numbers and return a number. If either implementation returns an incompatible value, TypeScript reports an error.

Anonymous Callback Functions in TypeScript

A callback is a function supplied to another function for later or repeated execution. Array methods, event handlers, timers, and asynchronous APIs commonly accept anonymous callbacks.

const prices: number[] = [120, 80, 250];

const discountedPrices = prices.map(function (price) {
    return price * 0.9;
});

console.log(discountedPrices);

The map() method expects a callback, so TypeScript infers that price is a number from the number[] array. The anonymous function runs once for every array element and returns the value placed in the new array.

[108, 72, 225]

Passing a Typed Anonymous Callback to a Custom Function

function processValue(
    value: number,
    callback: (input: number) => string
): string {
    return callback(value);
}

const message = processValue(42, function (input) {
    return `Received: ${input}`;
});

console.log(message);

The callback parameter requires a function that accepts a number and returns a string. The inline anonymous function satisfies that contract.

Received: 42

Anonymous Function Expressions and Arrow Functions in TypeScript

TypeScript supports anonymous traditional function expressions and arrow functions. The following functions produce the same result:

const doubleWithFunction = function (value: number): number {
    return value * 2;
};

const doubleWithArrow = (value: number): number => value * 2;

An arrow function provides shorter syntax and captures this from its surrounding lexical scope. A traditional function expression receives this according to how the function is called. This difference matters in object methods, class callbacks, and event-handling code.

Choosing Between a Traditional Anonymous Function and an Arrow Function

• Use an arrow function when concise callback syntax and lexical this behavior are appropriate.
• Use a traditional function expression when the function needs a call-dependent this, its own arguments object, or constructor-compatible behavior.
• Use a named function declaration when the operation is reused broadly or a descriptive name makes the code easier to understand.
• Keep multi-step callback logic in a separately named function when an inline implementation becomes difficult to read or test.

Anonymous Functions Returned from Nested TypeScript Functions

A function can return an anonymous function. The returned function retains access to variables from its surrounding scope through a closure.

function createMultiplier(factor: number): (value: number) => number {
    return function (value: number): number {
        return value * factor;
    };
}

const triple = createMultiplier(3);
console.log(triple(5));

The returned anonymous function continues to use the factor value supplied when createMultiplier() was called.

15

Common TypeScript Anonymous Function Errors

Calling an Anonymous Function Before Variable Initialization

A function declaration can generally be called earlier in its scope because its declaration is hoisted. A function expression assigned to const or let cannot be used before the variable has been initialized.

const greet = function (): void {
    console.log("Hello");
};

greet();

Returning a Value That Does Not Match the Function Type

The implementation must return a value compatible with the declared function type.

const formatId: (id: number) => string = function (id) {
    return `ID-${id}`;
};

Returning a number from this function would conflict with its declared string return type.

Using an Anonymous Function Where a Value Is Expected

The variable stores the function itself. Add parentheses to call it when the returned value is required.

const getStatus = function (): string {
    return "ready";
};

const functionValue = getStatus;
const returnedValue = getStatus();

functionValue refers to the function, while returnedValue contains the string returned by calling it.

TypeScript Anonymous Function FAQs

What type should be used for an anonymous function in TypeScript?

Use a specific function signature such as (value: number) => string. Avoid the broad Function type when the parameters and return value are known because a precise signature provides better type checking.

Can a TypeScript anonymous function have a return type?

Yes. Place the return type after the parameter list, as in function (value: number): string { ... }. TypeScript can also infer the return type from the returned expressions when an explicit annotation is unnecessary.

Is every TypeScript arrow function anonymous?

An arrow function does not declare a function name in its syntax, although it is commonly assigned to a named variable or property. Traditional function expressions can be either anonymous or explicitly named.

When should an anonymous callback be replaced with a named function?

Replace it when the callback is reused, contains several steps, needs isolated testing, uses recursion, or becomes clearer with a descriptive name. Short, local transformations usually remain readable as anonymous callbacks.

TypeScript Anonymous Function QA Checklist

• Verify that every anonymous function parameter has an explicit or contextually inferred type.
• Confirm that each returned value matches the declared or expected function return type.
• Check whether the code requires the lexical this behavior of an arrow function or the dynamic this behavior of a traditional function expression.
• Ensure function expressions assigned to const or let are called only after initialization.
• Replace broad Function annotations with precise parameter and return signatures where possible.
• Move long or reused anonymous callbacks into named functions to improve readability and testing.

Summary of TypeScript Anonymous Function Usage

In this TypeScript Tutorial – TypeScript Anonymous Functions, we have learnt how to define an anonymous function with and without parameters using the help of detailed examples.

Anonymous functions can be assigned to variables, typed with function signatures, passed as callbacks, or returned from nested functions. Use explicit types when they clarify the contract, rely on contextual typing when the expected signature is already known, and choose between traditional and arrow syntax based on readability and this behavior.