Why object types are needed in Typescript - See It in Action

Why object types are needed

📖 Scenario: Imagine you are building a simple app to keep track of books in a library. Each book has a title, an author, and a year it was published. You want to make sure that every book you add has all these details correctly typed.

🎯 Goal: You will create an object type to describe a book, then create a book object using that type. This helps your program know exactly what information a book should have and avoid mistakes.

📋 What You'll Learn

Create an object type called Book with properties title (string), author (string), and year (number).

Create a variable called myBook of type Book with the exact values: title = "The Great Gatsby", author = "F. Scott Fitzgerald", year = 1925.

Add a variable called isClassic and set it to true if the book year is before 1950, otherwise false.

Print the book title and whether it is a classic in the format: "The Great Gatsby is a classic: true".

💡 Why This Matters

🌍 Real World

Object types are used in real apps to make sure data like user profiles, products, or books have the right information and format.

💼 Career

Knowing object types is important for writing safe and clear code in TypeScript, which many companies use for web development.

1

Create the Book object type

Create an object type called Book with these exact properties: title as string, author as string, and year as number.

Typescript

// Define the Book type with title, author, and year properties
// Your code here

Hint

Use type Book = { ... } and list the properties with their types inside curly braces.

2

Create a myBook variable of type Book

Create a variable called myBook of type Book and assign it an object with title set to "The Great Gatsby", author set to "F. Scott Fitzgerald", and year set to 1925.

Typescript

type Book = {
  title: string;
  author: string;
  year: number;
};

// Create myBook variable of type Book with given values
// Your code here

Hint

Use const myBook: Book = { ... } and fill in the exact property values.

3

Add a variable isClassic to check if the book is a classic

Add a variable called isClassic and set it to true if myBook.year is less than 1950, otherwise set it to false.

Typescript

type Book = {
  title: string;
  author: string;
  year: number;
};

const myBook: Book = {
  title: "The Great Gatsby",
  author: "F. Scott Fitzgerald",
  year: 1925
};

// Create isClassic variable based on myBook.year
// Your code here

Hint

Use a ternary operator or if-else to set isClassic based on myBook.year.

4

Print the book title and if it is a classic

Write a console.log statement to print the book title and whether it is a classic in this exact format: "The Great Gatsby is a classic: true".

Typescript

type Book = {
  title: string;
  author: string;
  year: number;
};

const myBook: Book = {
  title: "The Great Gatsby",
  author: "F. Scott Fitzgerald",
  year: 1925
};

const isClassic = myBook.year < 1950 ? true : false;

// Print the title and isClassic status
// Your code here

Hint

Use a template string with console.log to print the message exactly.

Practice

1. Why do we need object types in TypeScript?

easy

A. To create HTML elements automatically

B. To make variables hold only numbers

C. To describe the shape of data with named properties

D. To run JavaScript code faster

Solution

1. Step 1: Understand what object types represent

   Object types describe how data is structured by naming its properties and their types.

2. Step 2: Recognize the purpose of object types

   They help ensure that data used in code matches the expected shape, preventing mistakes.

3. Final Answer:

   To describe the shape of data with named properties -> Option C

4. Quick Check:

   Object types = describe data shape [OK]

Hint: Object types define data shape with property names [OK]

Common Mistakes:

• Thinking object types only hold numbers
• Confusing object types with performance tools
• Believing object types create HTML elements

2. Which of the following is the correct syntax to define an object type in TypeScript?

easy

A. let Person = (name: string, age: number);

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

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

D. const Person = [name: string, age: number];

Solution

1. Step 1: Identify object type syntax

   In TypeScript, object types are defined using the type keyword followed by property names and types inside curly braces.

2. Step 2: Compare options

   type Person = { name: string; age: number; }; correctly uses type Person = { name: string; age: number; };. Others are function or array syntax, not object types.

3. Final Answer:

   type Person = { name: string; age: number; }; -> Option B

4. Quick Check:

   Object type syntax = type + { properties } [OK]

Hint: Object types use 'type' and curly braces with properties [OK]

Common Mistakes:

• Using function syntax instead of type
• Using array syntax for object types
• Missing curly braces around properties

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

type Car = { make: string; year: number };
const myCar: Car = { make: "Toyota", year: 2020 };
console.log(myCar.year);

medium

A. 2020

B. Toyota

C. undefined

D. Error: Property 'year' does not exist

Solution

1. Step 1: Understand the object type and assignment

   The type Car expects properties make (string) and year (number). The object assigned matches this.

2. Step 2: Check the console.log output

   Logging myCar.year prints the number 2020, the value assigned to year.

3. Final Answer:

   2020 -> Option A

4. Quick Check:

   Accessing property year = 2020 [OK]

Hint: Access object property to get its value [OK]

Common Mistakes:

• Confusing property names and values
• Expecting string instead of number
• Thinking property does not exist

4. Identify the error in this TypeScript code:

type User = { username: string; age: number };
const user: User = { username: "Anna" };

medium

A. Missing property 'age' in object assignment

B. Wrong type for 'username', should be number

C. Extra property 'username' not allowed

D. Syntax error in type declaration

Solution

1. Step 1: Check object properties against type

   The type User requires both username and age properties.

2. Step 2: Find missing or incorrect properties

   The object only has username, missing age, causing a TypeScript error.

3. Final Answer:

   Missing property 'age' in object assignment -> Option A

4. Quick Check:

   All required properties must be present [OK]

Hint: Check all required properties are included [OK]

Common Mistakes:

• Ignoring missing properties
• Assuming extra properties cause error
• Confusing property types

5. You want to create a function that accepts an object with properties title (string) and optional year (number). Which object type correctly describes this?

hard

A. type Movie = { title: string; year: number; };

B. type Movie = { title?: string; year: number; };

C. type Movie = { title: string | number; year?: string; };

D. type Movie = { title: string; year?: number; };

Solution

1. Step 1: Understand optional properties in object types

   Optional properties are marked with a question mark ? after the property name.

2. Step 2: Match the requirement

   The property title is required (string), and year is optional (number). type Movie = { title: string; year?: number; }; matches this exactly.

3. Final Answer:

   type Movie = { title: string; year?: number; }; -> Option D

4. Quick Check:

   Optional property uses '?' [OK]

Hint: Use '?' to mark optional properties in object types [OK]

Common Mistakes:

• Marking required properties as optional
• Wrong property types
• Missing '?' for optional properties