01. Types and Interfaces

Level: Beginner

ℹ️ What You'll Learn

• Primitive types: string, number, boolean, null, undefined
• Tuple types for fixed-length arrays
• Union types (A | B) for multiple possibilities
• Type aliases with type keyword
• Interfaces for object shapes
• Optional (?) and readonly properties
• Extending and intersection of types
• Modeling SMS Student, Teacher, Exam types

The Problem

JavaScript is dynamically typed — you can assign anything to any variable, and mistakes appear only when code runs. In a School Management System, this is dangerous. An exam date might come back as a string or number from the API. A Student object might be missing the status field. TypeScript catches these problems before they reach users.

Define data structures with type safety in TypeScript.

Basic Types

// String
let name: string = "Ravi Kumar";

// Number
let age: number = 25;
let marks: number = 95.5;

// Boolean
let isActive: boolean = true;

// Any (avoid - defeats TypeScript)
let anything: any = "could be anything";

// Type inference (TypeScript guesses type)
let count = 0;           // Inferred as number
let message = "Hello";   // Inferred as string

Union Types

// Value can be one of several types
let id: string | number;
id = 101;              // OK
id = "STU-101";        // OK
id = true;             // Error

let status: "Active" | "Inactive" | "Graduated";
status = "Active";     // OK
status = "Other";      // Error

Interfaces (Objects)

// Define object structure
interface Student {
  id: number;
  name: string;
  email: string;
  className: string;
}

// Use interface
const student: Student = {
  id: 101,
  name: "Ravi Kumar",
  email: "ravi@example.com",
  className: "10"
};

Optional Properties

interface StudentForm {
  name: string;
  email: string;
  phone?: string;        // Optional
  remarks?: string;
}

// Valid - phone and remarks not required
const form: StudentForm = {
  name: "Ravi",
  email: "ravi@example.com"
};

Readonly Properties

interface School {
  readonly id: number;
  readonly name: string;
  city: string;
}

const school: School = {
  id: 1,
  name: "NexCoding Academy",
  city: "Bangalore"
};

school.id = 2;        // Error - readonly
school.city = "Delhi"; // OK

Exam Results Interface

interface ExamResult {
  id: number;
  studentId: number;
  studentName: string;
  subject: string;
  marksObtained: number;
  maxMarks: number;
  percentage: number;
  status: "Pass" | "Fail";
  date: string;
}

const result: ExamResult = {
  id: 1,
  studentId: 101,
  studentName: "Ravi Kumar",
  subject: "Mathematics",
  marksObtained: 85,
  maxMarks: 100,
  percentage: 85,
  status: "Pass",
  date: "2024-01-15"
};

Arrays

// Array of strings
let subjects: string[] = ["Math", "Science", "English"];

// Alternative syntax
let students: Array<string> = ["Ravi", "Priya"];

// Array of numbers
let marks: number[] = [95, 88, 92];

// Array of objects
interface StudentRecord {
  name: string;
  marks: number;
}

let records: StudentRecord[] = [
  { name: "Ravi", marks: 95 },
  { name: "Priya", marks: 88 }
];

Nested Interfaces

interface Address {
  street: string;
  city: string;
  pinCode: string;
}

interface StudentProfile {
  id: number;
  name: string;
  email: string;
  address: Address;
  classDetails: {
    className: string;
    section: string;
    rollNumber: number;
  };
}

const profile: StudentProfile = {
  id: 101,
  name: "Ravi Kumar",
  email: "ravi@example.com",
  address: {
    street: "123 Main St",
    city: "Bangalore",
    pinCode: "560001"
  },
  classDetails: {
    className: "10",
    section: "A",
    rollNumber: 1
  }
};

Type Aliases

// Define custom type
type Status = "Active" | "Inactive" | "Graduated";
type Id = string | number;

let studentStatus: Status = "Active";
let studentId: Id = 101;

// Type for function
type Validator = (value: string) => boolean;

const isEmail: Validator = (value) => value.includes("@");

Interface Extension

interface Person {
  name: string;
  email: string;
}

interface StudentInfo extends Person {
  className: string;
  rollNumber: number;
}

const student: StudentInfo = {
  name: "Ravi",
  email: "ravi@example.com",
  className: "10",
  rollNumber: 101
};

Key Takeaways

• Types define what kind of data
• Interfaces define object structure
• Optional properties with ?
• Union types for multiple options
• Arrays have typed elements
• Nested structures for complex data
• Next: Functions and typing

💡 Backend Developer Tip

Mirror your backend data structures in TypeScript interfaces. Student in C# → Student interface in TypeScript.

⚠️ Type Mistakes

1. Using any — Defeats TypeScript purpose
2. Missing required fields — Object incomplete
3. Wrong field types — Type mismatch errors
4. Forgetting optional ? — Requires field unnecessarily

🤖Use AI to Learn Faster

Use ChatGPT, Claude, or Copilot to go deeper on TypeScript Types. Try these prompts:

• "What's difference between interface and type?"
• "When use optional properties?"
• "How do you type arrays?"
• "Quiz me on interfaces"

💡 Tip: After reading this article, paste your own code into AI and ask "What could go wrong here and why?" — fastest way to find edge cases and deepen understanding.

Quick Definitions

• Types and Interfaces - The main TypeScript concept explained in this lesson.
• Type - A rule that describes what kind of value is allowed.
• Interface - A contract that describes the shape of an object.
• DTO model - The frontend shape of data coming from ASP.NET Core Web API.

Common Mistakes

• Using any instead of defining a useful type
• Making types too complex before understanding the data
• Forgetting that API data still needs runtime validation
• Confusing JavaScript runtime behavior with TypeScript compile-time checks
• Not reusing shared types for repeated API models

Practice Task

Create a small TypeScript example using Types and Interfaces. Keep it connected to a School Management System scenario.

Suggested practice:

1. Define a Student, Teacher, Attendance, or Marks model.
2. Write one function or class using that type.
3. Add one intentionally wrong value and read the TypeScript error.
4. Fix the type or the data shape.
5. Explain the type contract in your own words.

Quick Revision

Question	Answer
What is the main idea?	Use TypeScript to make Types and Interfaces safer and clearer.
Where is it used?	API models, forms, DOM code, helpers, and React/Next.js apps.
What should beginners avoid?	Overusing any and ignoring API validation.
What is the best debugging habit?	Read the TypeScript error and compare it with the expected data shape.

🎯 How would you explain Types and Interfaces in an interview?

Types and Interfaces is a TypeScript concept that improves JavaScript safety by making data shapes and function expectations clear. I would explain the problem it solves, show a small example, and mention how it helps with API-connected frontend code.

🎯 Where is this used in real projects?

It is used in API DTOs, form models, DOM access, helper functions, React props, service classes, and reusable frontend utilities.

Next Article

Typed Functions ->