TypeScript Functions – Explained

TypeScript is a strongly-typed superset of JavaScript that adds optional static typing and other features to the language. In this article, we will be exploring TypeScript functions, which are a fundamental part of the language. We will cover the basics of creating and using functions in TypeScript, including parameter and return types, function overloading, and arrow functions. Whether you’re new to TypeScript or looking to improve your understanding of functions in the language, this article will provide you with a solid foundation to build on.

Before diving into TypeScript Functions, it might be helpful to learn about Type Annotation first.

Table of Contents

• Function Parameter Types
• Multiple Function Parameters
• Default Function Parameters
• Return Types
• Anonymous Function Contextual Typing
• Void Type
• Never Type
• Conclusion

ℹ️ This article has a corresponding Replit repository that you can copy and play around with. Create a free Replit account and click on the Fork Repl button below. This is the best way to practice programming!

Function Parameter Types

In TypeScript, function parameter types are used to specify the type of values that a function expects to receive as arguments. Parameter types are defined using a colon (:) after the parameter name, followed by the type that the parameter should be. For example, the following function takes two parameters, x and y, both of which are expected to be numbers:

function add(x: number, y: number){
  return x + y;
}Code language: TypeScript (typescript)

Multiple Function Parameters

In TypeScript, we can also have multiple function parameters where each parameter has its own data type:

const anotherFunction = (name: string, age: number, employed: boolean) =>  {
  console.log(name, age, employed)
}Code language: TypeScript (typescript)

Default Function Parameters

Parameter types can also be optional or have default values. An optional parameter is denoted by adding a question mark (?) after the parameter name, while a default parameter value is specified using the equals sign (=) followed by the default value. For example:

function greet(name: string, message: string = "Hello"): string {
  return `${message}, ${name}!`;
}

greet("Alice"); // "Hello, Alice!"
greet("Bob", "Hi"); // "Hi, Bob!"Code language: TypeScript (typescript)

In this example, the message parameter is optional and has a default value of "Hello". This means that if the caller does not provide a value for message, it will default to "Hello".

Return Types

In TypeScript, a function’s return type specifies the type of value that the function will return when it is called.

Return types are denoted by a colon (:) after the function’s parameter list, followed by the return type. For example, consider the following function that takes two numbers as arguments and returns their sum:

function addNumbers(a: number, b: number): number {
  return a + b;
}Code language: TypeScript (typescript)

In this example, the return type of the function is specified as number, indicating that the function will return a numeric value.

Return types are important because they allow the TypeScript compiler to perform type checking on function calls. When a function is called, the compiler checks that the function’s return value is compatible with the return type that is declared in the function’s signature. If there is a type mismatch, the compiler will generate a compile-time error.

Return types can also be optional or undefined. If a function doesn’t explicitly specify a return type, TypeScript will try to infer the return type based on the function’s implementation. If the function doesn’t return a value, its return type is void. If a function can return either a value or undefined, its return type can be specified as ReturnType | undefined. For example:

function getUserById(id: number): UserType | undefined {
  const user = findUserById(id);
  return user ? user : undefined;
}Code language: TypeScript (typescript)

In this example, the getUserById function returns a value of type UserType if a user is found with the specified id, or undefined if no user is found.

Anonymous Function Contextual Typing

In TypeScript, anonymous functions can benefit from contextual typing. Contextual typing is a feature that allows TypeScript to infer the type of an expression based on its surrounding context.

When an anonymous function is used as an argument to another function or is assigned to a variable or property, TypeScript can use the type information of the surrounding context to infer the function’s parameter and return types. For example:

let numbers = [1, 2, 3, 4, 5];
let doubledNumbers = numbers.map(function(num) {
  return num * 2;
});Code language: TypeScript (typescript)

In this example, the map method of the numbers array takes an anonymous function as an argument. TypeScript infers that the num parameter of this function should be of type number, based on the type of the numbers array. It also infers that the return type of the function should be number[], based on the fact that the map method returns a new array.

Contextual typing is particularly useful for functions that are used as callbacks or event handlers, where the type information of the surrounding context can help TypeScript enforce type safety. For example:

document.addEventListener("click", function(event) {
  console.log(`Clicked at (${event.clientX}, ${event.clientY})`);
});Code language: TypeScript (typescript)

In this example, the anonymous function is used as an event handler for the click event of the document object. TypeScript infers that the event parameter of this function should be of type MouseEvent, based on the type of the click event.

Contextual typing can simplify the process of defining anonymous functions by reducing the need for explicit type annotations. By relying on the type information of the surrounding context, TypeScript can provide more concise and readable code while still ensuring type safety.

Void Type

In TypeScript, the void type is used to indicate the absence of a value. Functions that do not return a value have a return type of void, and variables of type void can only be assigned the value undefined or null.

The void type is often used in function definitions to indicate that a function does not return a value. For example:

function logMessage(message: string): void {
  console.log(message);
}Code language: TypeScript (typescript)

In this example, the logMessage function takes a string parameter and logs it to the console. Since the function does not return a value, its return type is void.

Using void as a return type for functions can help catch errors in the code, as it prevents accidentally returning a value where none is expected.

Never Type

In TypeScript, the never type is used to indicate that a function will never complete execution normally, either by throwing an error or by entering into an infinite loop. Variables of type never can never be assigned a value, and the never type is a subtype of all other types.

The never type is often used in function definitions to indicate that a function will never complete execution normally. For example:

function throwError(message: string): never {
  throw new Error(message);
}Code language: TypeScript (typescript)

In this example, the throwError function takes a string parameter and throws an Error with the provided message. Since the function never completes execution normally and always throws an error, its return type is never.

Using never as a return type for functions can help catch errors in the code, as it ensures that functions that should never complete normally are correctly defined.

Conclusion

In conclusion, TypeScript provides a number of features that can help improve the robustness, maintainability, and scalability of JavaScript code. By adding static typing, classes, interfaces, enums, and other features to the language, TypeScript can catch errors at compile time, provide better tooling and IDE support, and make code more readable and self-documenting.

TypeScript also supports various types, such as number, string, boolean, any, void, and never, that can be used to define variables and function parameters, and return types. By using these types, developers can help ensure that their code is type-safe and that it meets the intended functionality and design.

Furthermore, TypeScript supports features such as function parameter types, return types, anonymous function contextual typing, and more. These features can help developers write more concise, readable, and maintainable code while still ensuring type safety and error detection.

Overall, TypeScript is a powerful tool that can help developers write better JavaScript code, and developers are increasingly adopting it in a wide range of industries and domains.