TypeScript
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.
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.
0 of 8 lessons done · proved by a submitted project with a public repository
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;
};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,
};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.
0 of 4 done
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;
}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"
}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.
0 of 5 done
Answer the quick check to finish this lesson.