Functions in TypeScript

Introduction

In this section, we will explore how to define and call functions in TypeScript. TypeScript extends JavaScript by adding static typing, which allows us to specify the types of function parameters and return values. This helps catch errors early during development and improves code readability.

Concept

A function in TypeScript is a block of code that performs a specific task. It can take inputs (parameters) and optionally return an output (return value). When defining functions in TypeScript, you can specify the types of these parameters and the return type explicitly.

Function Syntax

The basic syntax for defining a function in TypeScript is as follows:

function functionName(param1: Type1, param2: Type2): ReturnType {
    // function body
    return returnValue;
}

- `functionName`: The name of the function.
- `param1`, `param2`: Parameters that the function takes. Each parameter has a type annotation (`Type1`, `Type2`).
- `ReturnType`: The type of the value returned by the function.
- `returnValue`: The actual value returned by the function.

### Example

Let's define a simple function that adds two numbers and returns their sum:

<CodeBlock language="typescript">
{`function addNumbers(a: number, b: number): number {
    return a + b;
}`}
</CodeBlock>

In this example:
- `addNumbers` is the name of the function.
- `a` and `b` are parameters with type `number`.
- The return type of the function is also `number`.

### Calling Functions

To call a function, you simply use its name followed by parentheses containing any required arguments:

<CodeBlock language="typescript">
{`let result = addNumbers(5, 3);
console.log(result); // Output: 8`}
</CodeBlock>

In this example:
- We call the `addNumbers` function with arguments `5` and `3`.
- The result of the function call is stored in the variable `result`.
- Finally, we print the result to the console.

## Examples

### Example 1: Function with No Return Value

Sometimes, a function might not return any value. In such cases, you can specify the return type as `void`.

<CodeBlock language="typescript">
{`function greet(name: string): void {
    console.log(\`Hello, \${name}!\`);
}`}
</CodeBlock>

In this example:
- The `greet` function takes a single parameter `name` of type `string`.
- It logs a greeting message to the console but does not return any value.

### Example 2: Function with Optional Parameters

TypeScript allows you to define optional parameters by adding a question mark (`?`) after the parameter name. Optional parameters can be omitted when calling the function.

<CodeBlock language="typescript">
{`function greet(name: string, greeting?: string): void {
    if (greeting) {
        console.log(\`\${greeting}, \${name}!\`);
    } else {
        console.log(\`Hello, \${name}!\`);
    }
}`}
</CodeBlock>

In this example:
- The `greet` function has an optional parameter `greeting`.
- If a greeting is provided, it uses that; otherwise, it defaults to "Hello".

### Example 3: Function with Default Parameters

You can also provide default values for parameters. If the caller does not pass a value for such a parameter, the default value is used.

<CodeBlock language="typescript">
{`function greet(name: string, greeting = "Hello"): void {
    console.log(\`\${greeting}, \${name}!\`);
}`}
</CodeBlock>

In this example:
- The `greet` function has a default parameter `greeting` with the value `"Hello"`.
- If no greeting is provided when calling the function, it defaults to "Hello".

## What's Next?

In the next section, we will dive deeper into function parameters, including rest parameters and parameter destructuring. Stay tuned!