Beginner-Friendly Topic
Take your time - it's perfectly normal to re-read this topic 2-3 times. Try the interactive code editor below to run code yourself. Use the Q&A section to check your understanding before moving on.You've got this!
Typed Functions - Parameters & Return Types
Functions are the atomic unit of TypeScript code. Typing them correctly - parameters, return values, optional defaults, and rest parameters - prevents a whole class of calling bugs. TypeScript infers return types from the function body, but explicitly annotating them on public APIs is considered best practice.
Function Typing - All Parameter Patterns
// ── Required parameters ───────────────────────────────────────
function add(a: number, b: number): number {
return a + b;
}
// ── Optional parameters - must come AFTER required ─────────────
function greet(name: string, greeting?: string): string {
return `${greeting ?? "Hello"}, ${name}!`;
}
greet("Alice"); // ✅ "Hello, Alice!"
greet("Bob", "Hey"); // ✅ "Hey, Bob!"
// ── Default parameter values ───────────────────────────────────
function createTask(
title: string,
priority: Priority = "medium",
status: TaskStatus = "todo",
): Task {
return {
id: Date.now(),
title,
priority,
status,
description: null,
assignee: null,
dueDate: null,
tags: [],
createdAt: new Date(),
updatedAt: new Date(),
};
}
// ── Rest parameters ────────────────────────────────────────────
function addTags(task: Task, ...tags: string[]): Task {
return { ...task, tags: [...task.tags, ...tags] };
}
addTags(task, "design", "urgent", "backend"); // ✅
// ── Named / destructured parameters ───────────────────────────
function createUser({
name,
email,
role = "member",
}: {
name: string;
email: string;
role?: "member" | "admin";
}): User {
return { id: Date.now(), name, email, role, createdAt: new Date() };
}
// ── Explicit return type annotation (recommended for public APIs) ──
// Without annotation, TS infers - but explicit prevents accidental return type drift:
export function getTaskById(id: number, tasks: Task[]): Task | undefined {
return tasks.find((t) => t.id === id);
}
// ── void vs never return types ────────────────────────────────
function logError(message: string): void {
console.error(message);
// void = function returns, but callers shouldn't use the return value
}
function throwError(message: string): never {
throw new Error(message);
// never = function never returns (throws or loops forever)
}Common Mistakes
- Putting optional parameters before required ones - `function f(a?: string, b: number)` is a TS error. Optional and default params must come last.
- Not annotating return types on exported functions - without an explicit return annotation, refactoring the internals can silently change the inferred return type and break callers.
- Using `arguments` object - TypeScript doesn't type `arguments`. Use rest parameters (`...args: string[]`) for variadic functions.
Tip
Tip
Practice Typed Functions Parameters Return Types in small, isolated examples before integrating into larger projects. Breaking concepts into small experiments builds genuine understanding faster than reading alone.
Visual architecture and concepts for Typed Functions - Parameters & Return Types
Practice Task
Note
Practice Task - (1) Write a working example of Typed Functions Parameters Return Types from scratch without looking at notes. (2) Modify it to handle an edge case (empty input, null value, or error state). (3) Share your solution in the Priygop community for feedback.
Quick Quiz
Common Mistake
Warning
A common mistake with Typed Functions Parameters Return Types is skipping edge case testing - empty inputs, null values, and unexpected data types. Always validate boundary conditions to write robust, production-ready typescript code.
Key Takeaways
- Functions are the atomic unit of TypeScript code.
- Putting optional parameters before required ones - `function f(a?: string, b: number)` is a TS error. Optional and default params must come last.
- Not annotating return types on exported functions - without an explicit return annotation, refactoring the internals can silently change the inferred return type and break callers.
- Using `arguments` object - TypeScript doesn't type `arguments`. Use rest parameters (`...args: string[]`) for variadic functions.