In this tutorial, I will explain everything you need to know about working with functions in TypeScript. Recently, while working on a project for a client in New York, I encountered a scenario where the complexity of our TypeScript functions was causing maintainability issues. You will learn how to create and use functions in TypeScript here.
What Is a Function in TypeScript?
A function in TypeScript is a reusable block of code designed to perform a specific task. Functions are fundamental building blocks in TypeScript, just as in JavaScript, but TypeScript enhances them with static types, providing better type safety and code predictability.
Benefits of Using TypeScript Functions
Here are some advantages of using functions in TypeScript.
- Type Safety: By defining parameter and return types, TypeScript ensures that functions are used correctly, reducing runtime errors.
- Readability: Type annotations make the function’s purpose and usage clear to other developers.
- Tooling Support: Enhanced by TypeScript’s type system, code editors can provide better autocompletion, refactoring, and error-checking features.
TypeScript Function Syntax
In TypeScript, a function can be declared using the function
keyword, followed by the function name, a list of parameters enclosed in parentheses, and a body enclosed in curly braces. Here’s a simple example:
function greet(name: string): string {
return `Hello, ${name}!`;
}
Here are the components of a TypeScript function:
- Function Name: The name of the function which is used to call it.
- Parameters: Inputs to the function, defined within parentheses. Each parameter can have a type annotation.
- Return Type: The type of value that the function returns, specified after the parameter list and a colon.
- Function Body: The block of code that defines what the function does, enclosed in curly braces.
TypeScript Function Example
Here is a simple example of a TypeScript function.
function greet(name: string): string {
return `Hello, ${name}!`;
}
- Function Name:
greet
- Parameter:
name
of typestring
- Return Type:
string
- Function Body: Returns a greeting message that includes the provided name.
Call a TypeScipt Function
Let me explain now how to call a function in TypeScript.
To execute or “call” a function, you use its name followed by parentheses, optionally passing arguments if the function requires parameters.
console.log(greet("Alice")); // Output: Hello, Alice!
The complete code will be like below:
function greet(name: string): string {
return `Hello, ${name}!`;
}
console.log(greet("Alice")); // Output: Hello, Alice!
The exact output is in the screenshot below.

Check out TypeScript Generic Anonymous Functions
Advanced TypeScipt Functions Features
TypeScript also supports advanced function features such as optional parameters, default parameters, rest parameters, function overloading, and arrow functions.
Function Types
TypeScript allows you to define the types of parameters and the return type of a function. This ensures that the function is used correctly throughout your codebase.
function add(a: number, b: number): number {
return a + b;
}
console.log(add(5, 10)); // Output: 15
Here is the exact output in the screenshot below:

Optional Parameters
Sometimes, not all parameters are required. TypeScript allows you to define optional parameters using the ?
operator.
function buildAddress(street: string, city: string, state?: string): string {
return state ? `${street}, ${city}, ${state}` : `${street}, ${city}`;
}
console.log(buildAddress("123 Main St", "Springfield")); // Output: 123 Main St, Springfield
console.log(buildAddress("123 Main St", "Springfield", "IL")); // Output: 123 Main St, Springfield, IL
Default Parameters
You can also provide default values for parameters. If no argument is provided, the default value is used.
function greetUser(name: string = "Guest"): string {
return `Hello, ${name}!`;
}
console.log(greetUser()); // Output: Hello, Guest!
console.log(greetUser("Alice")); // Output: Hello, Alice!
I executed the above code using VS code, and you can see the exact output in the screenshot below:

Rest Parameters
Rest parameters allow you to pass an arbitrary number of arguments to a function. They are denoted by three dots (...
).
function multiply(factor: number, ...numbers: number[]): number[] {
return numbers.map(num => num * factor);
}
console.log(multiply(2, 1, 2, 3)); // Output: [2, 4, 6]
Function Overloading
TypeScript supports function overloading, which allows you to define multiple signatures for a function. This is useful when a function can be called with different types or numbers of arguments.
function contact(name: string, phone: string): void;
function contact(name: string, email: string, phone: string): void;
function contact(name: string, emailOrPhone: string, phone?: string): void {
if (phone) {
console.log(`Contact ${name} via email: ${emailOrPhone} or phone: ${phone}`);
} else {
console.log(`Contact ${name} via phone: ${emailOrPhone}`);
}
}
contact("Alice", "alice@example.com", "123-456-7890"); // Output: Contact Alice via email: alice@example.com or phone: 123-456-7890
contact("Bob", "123-456-7890"); // Output: Contact Bob via phone: 123-456-7890
Arrow Functions
Arrow functions provide a concise syntax and lexically bind the this
value. They are particularly useful for inline functions.
const greet = (name: string): string => `Hello, ${name}!`;
console.log(greet("Charlie")); // Output: Hello, Charlie!
Higher-Order Functions
Functions in TypeScript can accept other functions as arguments or return them. These are known as higher-order functions.
function applyOperation(a: number, b: number, operation: (x: number, y: number) => number): number {
return operation(a, b);
}
const sum = (x: number, y: number): number => x + y;
const product = (x: number, y: number): number => x * y;
console.log(applyOperation(5, 3, sum)); // Output: 8
console.log(applyOperation(5, 3, product)); // Output: 15
Here is the exact output in the screenshot below:

TypeScript Functions Tutorials
Here are some tutorials on TypeScript functions.
- Generic Arrow Functions in TypeScript
- How to Get Return Type of a Function in TypeScript?
- How to Pass a Function as a Parameter in TypeScript?
- How to Use Default Function Parameters in TypeScript?
- How to Use Default Parameter Values in TypeScript?
- How to Return Multiple Values in TypeScript?
- How to Specify Return Type in TypeScript Arrow Functions?
- How to Use TypeScript Optional Function Parameters?
- How to Add Functions to Interfaces in TypeScript?
- TypeScript TypeError: “is not a function”
Conclusion
I hope you learned how to create and use functions in TypeScript. I have also explained a few features, such as function types, optional and default parameters, rest parameters, function overloading, arrow functions, and higher-order functions, with examples.