Interface vs type alias decision in Typescript - Hands-On Comparison

Interface vs Type Alias Decision in TypeScript

📖 Scenario: You are building a simple contact list app. You want to store information about people including their name and phone number. You will decide whether to use an interface or a type alias to define the shape of a contact.

🎯 Goal: Learn how to create a contact data structure using both interface and type alias in TypeScript, and understand when to use each.

📋 What You'll Learn

Create an interface named ContactInterface with name and phone properties.

Create a type alias named ContactType with the same properties.

Create a variable contact1 using ContactInterface.

Create a variable contact2 using ContactType.

Print both contacts to the console.

💡 Why This Matters

🌍 Real World

Defining data shapes clearly helps avoid mistakes when building apps that handle user information.

💼 Career

Understanding when to use interfaces or type aliases is important for writing clean, maintainable TypeScript code in professional projects.

1

Create an interface for a contact

Create an interface called ContactInterface with two string properties: name and phone.

Typescript

// Your code here

Need a hint?

An interface defines the shape of an object. Use interface ContactInterface { name: string; phone: string; }.

2

Create a type alias for a contact

Create a type alias called ContactType with two string properties: name and phone.

Typescript

interface ContactInterface {
  name: string;
  phone: string;
}
// Your code here

Need a hint?

A type alias can also describe an object shape. Use type ContactType = { name: string; phone: string; };.

3

Create variables using interface and type alias

Create a variable contact1 of type ContactInterface with name as "Alice" and phone as "123-456". Then create a variable contact2 of type ContactType with name as "Bob" and phone as "789-012".

Typescript

interface ContactInterface {
  name: string;
  phone: string;
}

type ContactType = {
  name: string;
  phone: string;
};

// Your code here

Need a hint?

Use const contact1: ContactInterface = { name: "Alice", phone: "123-456" }; and similarly for contact2.

4

Print the contacts

Print contact1 and contact2 to the console using two separate console.log statements.

Typescript

interface ContactInterface {
  name: string;
  phone: string;
}

type ContactType = {
  name: string;
  phone: string;
};

const contact1: ContactInterface = { name: "Alice", phone: "123-456" };
const contact2: ContactType = { name: "Bob", phone: "789-012" };

// Your code here

Need a hint?

Use console.log(contact1); and console.log(contact2); to show the contacts.