TypeScript - lesson 5 | HackIndia Skills

Key point

Main idea

A function is a contract. Type the inputs it accepts and the output it promises.

In a hackathon project, most bugs hide in small helper functions: price totals, filters, form validation, API formatting. Function types make those bugs visible early.

Where to type

Type parameters first. Then type the return value when the function is shared, exported, or important to your app flow.

TypeScript can infer many return types. But for functions used by UI, API calls, or payments, writing the return type makes your intent clear to teammates and recruiters reading your repo.

Example

Basic function types

Here is a small college-event helper. It calculates the payable amount after a student discount.

The return type is number. If someone returns a string like "₹120", TypeScript will complain before the build passes.

type TicketType = "student" | "regular";

function calculateTicketPrice(basePrice: number, ticketType: TicketType): number {
  if (ticketType === "student") {
    return basePrice * 0.7;
  }

  return basePrice;
}

const amountToPay = calculateTicketPrice(200, "student");

Your to-do

Type real work

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Start with one function that changes data, not a tiny console log.
Add types to every parameter.
Add a return type if the function is exported or used in more than one file.
Use union types when only a few values are valid.
Run your type-check command after each small change.

0 of 5 done

Example

Objects in functions

Most useful functions take objects. Use the aliases and interfaces you learned earlier instead of repeating shapes everywhere.

This makes the function readable and keeps your app data consistent.

interface Expense {
  title: string;
  amount: number;
  paidBy: string;
}

function formatExpense(expense: Expense): string {
  return `${expense.title}: ₹${expense.amount} paid by ${expense.paidBy}`;
}

const chaiExpense: Expense = {
  title: "Team chai",
  amount: 120,
  paidBy: "Asha"
};

console.log(formatExpense(chaiExpense));

Tip

Optional vs default

Use an optional parameter when the value may be missing. Use a default parameter when you want a fallback.

Default parameters are cleaner for common UI helpers, because the function always has a usable value inside.

function createGreeting(name: string, college = "your college"): string {
  return `Hi ${name} from ${college}`;
}

createGreeting("Ravi");
createGreeting("Ravi", "VIT");

function sendInvite(email: string, phone?: string): string {
  if (phone) {
    return `Invite sent to ${email} and ${phone}`;
  }

  return `Invite sent to ${email}`;
}

Common mistake

Do not hide errors

Do not use any for function parameters just to remove red lines. That turns TypeScript back into JavaScript at the exact place where bugs enter.

If you are unsure, ask AI to suggest a type from sample data. Then check the result yourself: are numbers really numbers, can values be missing, and are there only fixed options?

// Weak: accepts anything
function saveUser(user: any) {
  return user.email.toLowerCase();
}

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

function saveUser(user: User): string {
  return user.email.toLowerCase();
}