TypeScript - lesson 4 | HackIndia Skills

Key point

One idea

Give every important object in your app a name. A named data shape is easier to reuse, review, and fix than random inline object types.

Why this matters

Most hackathon bugs come from wrong assumptions about data. A user may not have a profile photo. A payment status may be pending. A college event may not have a venue yet.

Aliases and interfaces let you write these rules once. Then TypeScript checks every place that uses the data.

Example

Use a type alias

A type alias is good for naming one shape or a union. Use it for API data, form data, IDs, and status values.

type ProjectStatus = "draft" | "submitted" | "reviewed";

type TeamMember = {
  id: string;
  name: string;
  college: string;
  role: "frontend" | "backend" | "design" | "other";
  githubUrl?: string;
};

type HackathonProject = {
  id: string;
  title: string;
  status: ProjectStatus;
  members: TeamMember[];
  repoUrl: string;
};

Example

Use an interface

An interface is also for object shapes. It is useful when you expect the shape to grow, or when different files add related fields.

interface UserProfile {
  id: string;
  name: string;
  email: string;
}

interface StudentProfile extends UserProfile {
  college: string;
  graduationYear: number;
}

const student: StudentProfile = {
  id: "u_101",
  name: "Asha",
  email: "[email protected]",
  college: "VIT Chennai",
  graduationYear: 2026,
};

Your to-do

Choose one

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.

Use type when you need a union like "draft" | "submitted".
Use type when you want a short name for a complex shape.
Use interface for object models that may be extended.
Pick one style in a file if both work. Consistency helps reviewers.

0 of 4 done

Common mistake

Avoid loose objects

Do not pass big objects around without a named type. You will forget fields or spell them differently in another file.

Also avoid making every field optional with ?. Optional means the value can be missing. Use it only when your UI can handle that case.

// Weak: hard to reuse and easy to copy badly
function showMember(member: { name: string; role: string; githubUrl?: string }) {
  return member.name;
}

// Better: one named shape used everywhere
function showMember(member: TeamMember) {
  return member.name;
}

Tip

Ask AI carefully

You can ask ChatGPT, Gemini, or Claude to suggest types from sample JSON. Paste a small API response or form object and ask for TypeScript types.

Check the output. Look for fields that should be optional, string values that should be unions, and numbers that were guessed wrongly.

Prompt:
Convert this sample project JSON into TypeScript types.
Use unions for status fields.
Mark fields optional only if they can be missing.

{
  "id": "p_1",
  "title": "UPI Splitter",
  "status": "submitted",
  "repoUrl": "https://github.com/name/upi-splitter"
}