1. Introduction
Functions are the building blocks of reusable logic in any program. JavaScript functions accept any argument types and can return anything, which makes bugs easy to introduce silently. TypeScript extends JavaScript functions with type annotations for parameters and return values, so the compiler can catch mismatched arguments, missing return statements, and incorrect usages before the code ever runs.
Cricket analogy: When Jasprit Bumrah bowls a yorker, the umpire signals a no-ball on the spot rather than letting scorers discover the error at the end of the innings; TypeScript's parameter and return types catch a mismatched argument the instant you write it, not after the program runs.
TypeScript supports all the ways JavaScript declares functions — function declarations, function expressions, and arrow functions — and lets you annotate each one with a function type signature. This gives editors accurate autocomplete and gives teams a contract that documents exactly what a function expects and produces.
Cricket analogy: Whether MS Dhoni finishes an over with a yorker, a slower ball, or a bouncer, the scorecard records the same delivery-by-delivery contract; TypeScript lets function declarations, expressions, and arrow functions all carry the same explicit type signature.
2. Syntax
// Function declaration
function add(a: number, b: number): number {
return a + b;
}
// Function expression
const subtract = function (a: number, b: number): number {
return a - b;
};
// Arrow function
const multiply = (a: number, b: number): number => a * b;
// Standalone function type (used to type a variable)
let operation: (a: number, b: number) => number;
operation = add;3. Explanation
Each parameter is annotated as name: Type, and the return type is written after the closing parenthesis as : Type. If a function returns nothing, its return type is void. TypeScript can often infer the return type from the function body, but writing it explicitly is good practice for public APIs because it prevents accidental changes to the return type from silently propagating to callers.
Cricket analogy: A scorecard lists each bowler's figures as overs-runs-wickets in a fixed format everyone reads the same way; TypeScript writes each parameter as name: Type and the return type after the parentheses, so a public API's contract can't quietly change.
A standalone function type, such as (a: number, b: number) => number, describes the shape of a function without implementing it. This is useful for typing variables, parameters, or object properties that hold a function value, like callbacks passed to Array.prototype.map or event handlers.
Cricket analogy: A team's fielding plan specifies where a bowler like Mohammed Shami should bowl without dictating exactly how he grips the ball; a standalone function type like (a: number, b: number) => number describes a function's shape without implementing it.
TypeScript uses 'contextual typing' to infer parameter types automatically when a function is assigned to an already-typed variable or passed where a specific function type is expected, so you do not always need to annotate every parameter explicitly, for example inside array.map(x => x * 2).
Omitting the return type does not make a function 'untyped' — TypeScript infers it from the return statements. If different branches return different types (e.g. number in one branch and string in another) without an explicit annotation, the inferred return type becomes a union like number | string, which can silently widen your API and surprise callers.
4. Example
function formatPrice(amount: number, currency: string): string {
return `${currency}${amount.toFixed(2)}`;
}
const discount: (price: number) => number = (price) => price * 0.9;
const finalPrice = discount(200);
console.log(formatPrice(finalPrice, "$"));
console.log(typeof discount);5. Output
$180.00
function6. Key Takeaways
- Parameters and return values can be annotated with
: Typefor compile-time checking. - TypeScript supports function declarations, function expressions, and arrow functions, all typed the same way.
- A standalone function type like
(a: number) => numberdescribes a function's shape without implementing it. - Contextual typing lets TypeScript infer parameter types when the expected function type is already known.
- Omitting an explicit return type causes TypeScript to infer it, which can widen into a union if branches disagree.
voidis used for functions that do not return a meaningful value.
Practice what you learned
1. What is the correct way to annotate a function that takes two numbers and returns a number?
2. If a function has branches returning `number` in one path and `string` in another, and no explicit return type is written, what does TypeScript infer?
3. Which type correctly describes a variable that holds a function taking a `number` and returning a `string`?
4. What return type should a function use if it performs an action but returns no meaningful value?
5. Why does TypeScript not require a type annotation on `x` in `[1,2,3].map(x => x * 2)`?
6. Which function declaration style is NOT supported by TypeScript typing?
Was this page helpful?
You May Also Like
Optional and Default Parameters in TypeScript
Make function parameters optional or give them default values, and understand how TypeScript infers their types.
Function Overloads in TypeScript
Declare multiple callable signatures for a single function so callers get precise types for each usage pattern.
Rest Parameters in TypeScript
Collect an arbitrary number of trailing arguments into a typed array parameter.
Type Inference in TypeScript
How TypeScript figures out types automatically from values, without explicit annotations.
Related Reading
Related Study Notes in Programming
Browse all study notesApache Spark Study Notes
Programming · 30 topics
ProgrammingApache Flink Study Notes
Programming · 30 topics
ProgrammingHadoop Study Notes
Programming · 30 topics
ProgrammingSnowflake Study Notes
Programming · 30 topics
ProgrammingApache Airflow Study Notes
Programming · 30 topics
Programmingdbt (Data Build Tool) Study Notes
Programming · 30 topics