Why object types are needed in Typescript - Challenge Your Understanding

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this TypeScript code?

Consider this TypeScript code that uses an object type to define a person's details. What will be printed to the console?

Typescript

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

const person: Person = { name: "Alice", age: 30 };
console.log(`Name: ${person.name}, Age: ${person.age}`);

A Name: Alice, Age: 30

B Name: undefined, Age: undefined

C Name: , Age: 30

D Name: Alice, Age: undefined

💡 Hint

Look at how the object person is created and how its properties are accessed.

The object person has properties name and age correctly assigned. Accessing these properties prints their values.

🧠 Conceptual

intermediate

Why do we use object types in TypeScript?

Which of the following best explains why object types are needed in TypeScript?

A To make JavaScript run faster by converting objects to numbers.

B To allow objects to be used as keys in arrays.

C To define the shape and structure of objects so the compiler can check for correct property usage.

D To prevent objects from being changed after creation.

💡 Hint

Think about what TypeScript adds on top of JavaScript regarding objects.

Object types let TypeScript know what properties an object should have and their types, helping catch mistakes early.

🔧 Debug

advanced

What error does this TypeScript code produce?

Look at this code snippet. What error will TypeScript show?

Typescript

type Car = { make: string; year: number };

const myCar: Car = { make: "Toyota" };
console.log(myCar.year);

A Property 'year' is missing in type '{ make: string; }' but required in type 'Car'.

B No error, code runs fine.

C Type 'Car' is not assignable to type 'string'.

D Cannot assign type 'string' to type 'number'.

💡 Hint

Check if all required properties are present when creating myCar.

The object assigned to myCar is missing the required year property, so TypeScript reports an error.

📝 Syntax

advanced

Which option correctly defines an object type with optional properties?

In TypeScript, how do you define an object type where the property middleName is optional?

A type Person = { firstName: string; middleName: string?; lastName: string };

B type Person = { firstName: string; middleName: optional string; lastName: string };

C type Person = { firstName: string; middleName: string | undefined; lastName: string };

D type Person = { firstName: string; middleName?: string; lastName: string };

💡 Hint

Look for the correct syntax to mark a property as optional in TypeScript.

The question mark ? after the property name marks it as optional in TypeScript object types.

🚀 Application

expert

How many properties does this object have at runtime?

Given this TypeScript code, how many properties does the user object have when the program runs?

Typescript

type User = { id: number; name: string; email?: string };

const user: User = { id: 1, name: "Bob" };

if (user.email) {
  console.log(user.email);
}

A 3 properties

B 2 properties

C 1 property

D 0 properties

💡 Hint

Optional properties may or may not exist on the object at runtime depending on assignment.

The user object has only id and name properties assigned. The optional email is not present, so total is 2.

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