Why interfaces are needed in Typescript - See It in Action

Why interfaces are needed

📖 Scenario: Imagine you are building a simple app to manage a list of people and their contact details. You want to make sure every person has a name and an email address. Using interfaces helps you keep your data organized and consistent.

🎯 Goal: You will create an interface to define the shape of a person object, then create a list of people using that interface. This will show why interfaces are useful to keep your data structured and avoid mistakes.

📋 What You'll Learn

Create an interface called Person with properties name (string) and email (string)

Create an array called people that holds objects following the Person interface

Add two person objects to the people array with exact names and emails

Use a for loop to print each person's name and email

💡 Why This Matters

🌍 Real World

Interfaces are used in real apps to make sure data like user profiles, products, or messages always have the right information.

💼 Career

Knowing interfaces is important for writing clear, error-free TypeScript code in professional software development.

1

Create the Person interface

Write an interface called Person with two properties: name of type string and email of type string.

Typescript

// Your code here

Hint

An interface is like a blueprint for objects. Use the interface keyword followed by the name and curly braces.

2

Create the people array using the Person interface

Create a variable called people that is an array of Person objects. Initialize it as an empty array.

Typescript

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

// Your code here

Hint

Use const people: Person[] = []; to create an empty array of Person objects.

3

Add two person objects to the people array

Add two objects to the people array with these exact values: { name: "Alice", email: "[e-mail]" } and { name: "Bob", email: "[e-mail]" }.

Typescript

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

const people: Person[] = [];

// Your code here

Hint

Put the two objects inside the array using square brackets and commas.

4

Print each person's name and email

Use a for loop with variables person to go through people. Inside the loop, print the person's name and email using console.log with this format: Name: Alice, Email: [e-mail].

Typescript

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

const people: Person[] = [
  { name: "Alice", email: "[e-mail]" },
  { name: "Bob", email: "[e-mail]" }
];

// Your code here

Hint

Use for (const person of people) and inside the loop use console.log with a template string.

Practice

1. Why do we use interfaces in TypeScript?

easy

A. To replace functions with classes

B. To define the shape of objects and ensure consistent structure

C. To execute code faster at runtime

D. To store data permanently in a database

Solution

1. Step 1: Understand the purpose of interfaces

   Interfaces describe how an object should look, like a blueprint for data.

2. Step 2: Identify the correct use case

   They help keep code consistent by checking object structure during development.

3. Final Answer:

   To define the shape of objects and ensure consistent structure -> Option B

4. Quick Check:

   Interfaces = object shape consistency [OK]

Hint: Interfaces describe object shapes to avoid mistakes [OK]

Common Mistakes:

• Thinking interfaces affect runtime speed
• Confusing interfaces with database storage
• Using interfaces to replace functions

2. Which of the following is the correct syntax to declare an interface in TypeScript?

easy

A. interface Person { name: string; age: number; }

B. class Person { name: string; age: number; }

C. type Person = { name: string; age: number; }

D. function Person(name: string, age: number) {}

Solution

1. Step 1: Recall interface declaration syntax

   Interfaces use the keyword interface followed by the name and curly braces.

2. Step 2: Compare options

   interface Person { name: string; age: number; } uses interface correctly; others use class, type alias, or function.

3. Final Answer:

   interface Person { name: string; age: number; } -> Option A

4. Quick Check:

   interface keyword + braces = correct syntax [OK]

Hint: Look for 'interface' keyword with curly braces [OK]

Common Mistakes:

• Confusing interface with class syntax
• Using type alias instead of interface
• Writing function instead of interface

3. What will be the output of this TypeScript code?

interface User { id: number; name: string; }

const user: User = { id: 1, name: "Alice" };
console.log(user.name);

medium

A. undefined

B. 1

C. "Alice"

D. Error: Property 'name' does not exist

Solution

1. Step 1: Understand the interface and object

   The interface User requires id and name. The object matches this shape.

2. Step 2: Check the console.log statement

   It prints user.name, which is "Alice" as assigned.

3. Final Answer:

   "Alice" -> Option C

4. Quick Check:

   Accessing user.name prints "Alice" [OK]

Hint: Check object property values matching interface [OK]

Common Mistakes:

• Expecting id to print instead of name
• Thinking interface affects runtime output
• Assuming property is missing causing error

4. Identify the error in this TypeScript code using an interface:

interface Product { id: number; name: string; }

const product: Product = { id: 10 };

medium

A. Cannot assign object to interface type

B. Interface name should be lowercase

C. Extra property 'id' not allowed in Product

D. Missing property 'name' in object assigned to Product

Solution

1. Step 1: Check interface properties

   Product interface requires both id and name properties.

2. Step 2: Compare object properties

   The object only has id, missing name, causing a type error.

3. Final Answer:

   Missing property 'name' in object assigned to Product -> Option D

4. Quick Check:

   All interface properties must be present [OK]

Hint: Check all interface properties are in the object [OK]

Common Mistakes:

• Ignoring missing required properties
• Thinking interface names must be lowercase
• Believing extra properties cause errors

5. You want to create a function that accepts any object with a title string property and an optional description string property. Which interface best fits this need?

hard

A. interface Item { title: string; description?: string; }

B. interface Item { title?: string; description: string; }

C. interface Item { title: string; description: string; }

D. interface Item { title: string | number; description?: string; }

Solution

1. Step 1: Understand required and optional properties

   The function needs title as required string, description optional string.

2. Step 2: Analyze each interface option

   interface Item { title: string; description?: string; } matches exactly: title required, description optional. Others either make title optional or wrong type.

3. Final Answer:

   interface Item { title: string; description?: string; } -> Option A

4. Quick Check:

   Required title + optional description = interface Item { title: string; description?: string; } [OK]

Hint: Use '?' for optional properties in interfaces [OK]

Common Mistakes:

• Making required properties optional
• Using wrong types for properties
• Forgetting '?' for optional fields