Object type annotation inline in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare an object with inline type annotation.

Typescript

const user: [1] = { name: "Alice", age: 30 };

Drag options to blanks, or click blank then click option'

A{ name: string; age: number }

B[string, number]

Cstring

Dnumber

Attempts:

3 left

💡 Hint

Common Mistakes

Using array syntax instead of object syntax for the type.

Using primitive types like string or number instead of an object type.

The inline type annotation for an object with properties name (string) and age (number) is { name: string; age: number }.

2fill in blank

medium

Complete the code to annotate an object with optional property.

Typescript

const product: [1] = { id: 101, name: "Book" };

Drag options to blanks, or click blank then click option'

A{ id: number; name?: string; price: number }

B{ id: number; name: string; price: number }

C{ id: number; name: string; price?: number }

D{ id?: number; name: string; price: number }

Attempts:

3 left

💡 Hint

Common Mistakes

Marking required properties as optional.

Omitting the question mark for optional properties.

The property price is optional, so it is marked with a question mark (price?: number).

3fill in blank

hard

Fix the error in the inline object type annotation.

Typescript

const settings: [1] = { darkMode: true, fontSize: 14 };

Drag options to blanks, or click blank then click option'

A{ darkMode: boolean, fontSize: number }

B{ darkMode: bool; fontSize: int }

C{ darkMode: Boolean; fontSize: Number }

D{ darkMode: boolean; fontSize: number }

Attempts:

3 left

💡 Hint

Common Mistakes

Using commas instead of semicolons between properties.

Using capitalized Boolean or Number types.

In TypeScript, object properties in type annotations are separated by semicolons, not commas.

4fill in blank

hard

Complete the code to declare an object with a nested object type inline.

Typescript

const employee: [1] = { name: "John", address: { city: "NY", zip: 10001 } };

Drag options to blanks, or click blank then click option'

A{ name: string, address: { city: string; zip: number } }

B{ name: string; address: { city: string; zip: number } }

C{ name: string; address: { city: string, zip: number } }

D{ name: string, address: { city: string, zip: number } }

Attempts:

3 left

💡 Hint

Common Mistakes

Using commas instead of semicolons in object type annotations.

Mixing commas and semicolons inconsistently.

Use semicolons to separate properties in both the outer and nested object types.

5fill in blank

hard

Fill all three blanks to declare an object with inline type annotation including a method.

Typescript

const calculator: [1] = { add: (a: number, b: number) => a [2] b, subtract: (a: number, b: number) => a [3] b };

Drag options to blanks, or click blank then click option'

A{ add: (x: number, y: number) => number; subtract: (x: number, y: number) => number }

B+

C-

D{ add: (a: number, b: number) => number; subtract: (a: number, b: number) => number }

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect parameter names in the type annotation.

Using wrong operators in the method implementations.

Mixing commas and semicolons in type annotations.

The object type annotation declares methods add and subtract with correct parameter names and return types. The add method uses + and subtract uses - operators.