TypeScript Functions

Functions are fundamental building blocks in TypeScript. They are reusable blocks of code that perform specific tasks. TypeScript adds static type annotations to JavaScript functions, making them safer and easier to maintain.

What is a Function?

A function is a group of statements that together perform a task. In TypeScript, functions can be named or anonymous, and they can have explicitly typed parameters and return values.

Basic Function Syntax

function functionName(param1: type1, param2: type2): returnType {
    // function body
    return value;
}

Components:

• functionName: A descriptive name for the function.
• param1, param2: Input values the function receives, with explicitly defined types.
• returnType: The data type of the value the function returns (e.g., number, string, void).
• return: Sends a value back to the caller (not needed for void functions).

Simple Function Example

// Function declaration
function greet(): void {
    console.log("Hello, World!");
}
 
// Function call
greet(); 

Output:

Hello, World!

Functions with Parameters

Parameters allow you to pass data to functions. In TypeScript, you must specify the type of each parameter:

function greetUser(name: string): void {
    console.log(`Hello, ${name}!`);
}
 
greetUser("Alice");
greetUser("Bob");

Output:

Hello, Alice!
Hello, Bob!

If you try to pass an incorrect type, TypeScript will show a compile-time error:

// Error: Argument of type 'number' is not assignable to parameter of type 'string'
greetUser(123); 

Functions with Return Values

Functions can return values to the caller. You specify the return type after the parameter list:

function add(a: number, b: number): number {
    return a + b;
}
 
const result: number = add(5, 3);
console.log(`5 + 3 = ${result}`);

Output:

5 + 3 = 8

Arrow Functions (Anonymous Functions)

TypeScript fully supports ES6 arrow functions, which provide a more concise syntax:

const multiply = (x: number, y: number): number => {
    return x * y;
};
 
// Even shorter for single-line returns:
const subtract = (a: number, b: number): number => a - b;
 
console.log(`4 * 7 = ${multiply(4, 7)}`);
console.log(`10 - 4 = ${subtract(10, 4)}`);

Output:

4 * 7 = 28
10 - 4 = 6

Topics in This Section

Learn more about advanced function topics:

• Multiple Parameters: Learn how to pass multiple values to functions and use optional parameters
• Default Parameters: Understand how to set default values for function parameters

Void and Any Functions

Functions that don’t return a value explicitly use the void return type. If you don’t know the type, you can use any, though it’s generally discouraged in TypeScript as it disables type checking.

function printLine(): void {
    console.log("----------------------");
}
 
printLine();
console.log("Hello, TypeScript Functions!");
printLine();

Output:

----------------------
Hello, TypeScript Functions!
----------------------

Best Practices

1. Always explicitly type parameters: TypeScript’s power comes from types; don’t leave parameters as any.
2. Explicitly state return types: Even though TypeScript can often infer return types, stating them explicitly makes the contract clear.
3. Keep functions small: Each function should do one thing well.
4. Use descriptive names: calculateArea() is better than calc().
5. Prefer arrow functions for callbacks: They keep the this context clear.

TypeScript functions bring the safety of strongly-typed languages to the flexibility of JavaScript!