runtime.boot

Full Stack Systems
Production Mindset

CodeWithMihir

Engineering thoughtful products from interface to infrastructure.

CodeWithMihir

TypeScript Tutorial

TypeScript Function Parameter Types Explained with Examples

Learn how to type function parameters in TypeScript, including primitive parameters, object parameters, union parameters, callbacks, and implicit any errors.

Welcome back! I am Mihir, and in this lesson we will learn function parameter types in TypeScript.

Function parameters are one of the most important places to write types because they define what callers are allowed to pass.


Why Parameter Types Matter

Without parameter types, TypeScript may not know what a function expects.

function greet(name) {
  return `Hello, ${name}`;
}

With strict mode enabled, TypeScript warns:

Parameter 'name' implicitly has an 'any' type.

Better:

function greet(name: string) {
  return `Hello, ${name}`;
}

Now TypeScript knows name must be a string.


Primitive Parameter Types

function createUser(name: string, age: number, isAdmin: boolean): void {
  console.log(name, age, isAdmin);
}

createUser("Mihir", 25, false);

Invalid:

createUser("Mihir", "25", "no");

The parameter types do not match.


Parameter Types and Return Inference

TypeScript can infer the return type when parameters are typed.

function add(a: number, b: number) {
  return a + b;
}

TypeScript knows this returns number.

You can also write it explicitly:

function add(a: number, b: number): number {
  return a + b;
}

Object Parameters

You can type object parameters inline.

function printUser(user: { name: string; email: string }): void {
  console.log(user.name);
  console.log(user.email);
}

For larger objects, use a type alias:

type User = {
  name: string;
  email: string;
};

function printUser(user: User): void {
  console.log(user.name);
}

This is easier to reuse.


Destructured Parameters

When destructuring, type the whole object.

type Product = {
  title: string;
  price: number;
};

function printProduct({ title, price }: Product): void {
  console.log(`${title}: ${price}`);
}

Avoid trying to type each destructured variable in a confusing way.


Union Parameter Types

Parameters can accept multiple possible types.

function printId(id: string | number): void {
  if (typeof id === "string") {
    console.log(id.toUpperCase());
  } else {
    console.log(id.toFixed(0));
  }
}

The function accepts strings and numbers, then narrows before using type-specific methods.


Literal Parameter Types

Use literal unions for controlled options.

type SortOrder = "asc" | "desc";

function sortProducts(order: SortOrder): void {
  console.log(`Sorting ${order}`);
}

sortProducts("asc");

Invalid:

sortProducts("up");

Callback Parameter Types

Functions can accept other functions as parameters.

function runAfterDelay(callback: () => void): void {
  setTimeout(callback, 1000);
}

runAfterDelay(() => {
  console.log("Done");
});

Callback with parameters:

function processName(name: string, formatter: (value: string) => string): string {
  return formatter(name);
}

const result = processName("mihir", (value) => value.toUpperCase());

TypeScript knows value is a string from the callback type.


Array Parameters

function calculateTotal(prices: number[]): number {
  return prices.reduce((total, price) => total + price, 0);
}

calculateTotal([100, 200, 300]);

Invalid:

calculateTotal(["100", "200"]);

The array must contain numbers.


Readonly Array Parameters

If a function should not modify an array, use readonly.

function printNames(names: readonly string[]): void {
  names.forEach((name) => console.log(name));
}

Inside the function, this is invalid:

names.push("Riya");

This protects the input from accidental mutation.


Common Mistake: Using any for Parameters

Avoid this:

function save(data: any): void {
  console.log(data.title);
}

Better:

type Post = {
  title: string;
};

function save(data: Post): void {
  console.log(data.title);
}

Specific parameter types make functions safer and easier to use.


Quick Reference Summary

ConceptExample
String parametername: string
Number parameterprice: number
Boolean parameteractive: boolean
Object parameteruser: User
Union parameterid: string | number
Literal parameterorder: "asc" | "desc"
Callback parametercallback: () => void
Array parameterprices: number[]

Practice

Create a typed function for a course:

type Course = {
  title: string;
  lessons: number;
};

function printCourse(course: Course, published: boolean): void {
  console.log(`${course.title} has ${course.lessons} lessons.`);
  console.log(published ? "Published" : "Draft");
}

printCourse({ title: "TypeScript", lessons: 20 }, true);

Try passing "true" instead of true and see what TypeScript says.


What You've Learned

You now understand:

  • Why function parameters should be typed
  • How to type primitive parameters
  • How return types can be inferred
  • How to type object parameters
  • How to type destructured parameters
  • How union and literal parameter types work
  • How to type callback parameters
  • How to type array parameters
  • Why any should be avoided for parameters

What's Next?

In the next lesson, we will learn Function Return Types in TypeScript.

We will make function outputs clear and predictable.


Need Help?

  • Have questions, confusion, or want to know more? Contact me

Parameter types are function contracts. They tell every caller exactly what is allowed.