TypeScript - lesson 7 | HackIndia Skills

Key point

One rule

Do not reach for any when TypeScript complains. Read the error, find what TypeScript expected, then fix the data, the type, or the check.

any turns off the useful part of TypeScript. It can make your demo build while leaving the crash inside.

How errors speak

Most TypeScript errors have two sides. One side says what value you gave. The other says what type was expected.

Start with the last line of the error. Then move up only if you need the file path or the exact call site.

Example

Read this error

This app stores hackathon expenses. The function wants a number. The UI is passing a string from an input field.

type Expense = {
  title: string;
  amount: number;
};

function addExpense(expense: Expense) {
  console.log(`${expense.title}: ₹${expense.amount}`);
}

const amountFromInput = "499";

addExpense({
  title: "Domain name",
  amount: amountFromInput,
});

// TypeScript error:
// Type 'string' is not assignable to type 'number'.

Your to-do

Fix the mismatch

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.

Read what you passed: amountFromInput is a string.
Read what was expected: amount must be a number.
Convert at the boundary, where the input enters your app.
Handle bad input before calling the typed function.

0 of 4 done

const rawAmount = "499";
const amount = Number(rawAmount);

if (Number.isNaN(amount)) {
  throw new Error("Enter a valid amount");
}

addExpense({
  title: "Domain name",
  amount,
});

Common mistake

The any shortcut

This silences the error, but it also removes protection. Now amount could be a string, object, or undefined, and TypeScript will not warn you.

Use any only when you have a clear reason and a comment explaining it. In a hackathon repo, avoid it in normal app code.

const amountFromInput: any = "499";

addExpense({
  title: "Domain name",
  amount: amountFromInput,
});

Tip

Use unknown first

When data comes from localStorage, fetch, a form, or an AI-generated mock file, you may not trust its shape. Use unknown, then check it before using it.

This keeps TypeScript strict without pretending you know the data.

function parseExpense(data: unknown): Expense {
  if (
    typeof data === "object" &&
    data !== null &&
    "title" in data &&
    "amount" in data &&
    typeof data.title === "string" &&
    typeof data.amount === "number"
  ) {
    return {
      title: data.title,
      amount: data.amount,
    };
  }

  throw new Error("Invalid expense data");
}

Tip

Use AI carefully

You can paste a TypeScript error into ChatGPT, Gemini, or Claude and ask: “Explain this error and suggest a type-safe fix without using any.”

Check the answer. It should keep useful types, add checks near untrusted data, and not hide the problem with type assertions like as any.