Excess property checking behavior in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define an object matching the interface.

Typescript

interface Person { name: string; age: number; }
const person: Person = { name: "Alice", age: [1] };

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

A25

B"25"

Ctrue

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes around numbers, making them strings.

Assigning boolean or null instead of a number.

The age property must be a number, so 25 is correct.

2fill in blank

medium

Complete the code to cause the excess property error when assigning an object literal.

Typescript

interface Car { make: string; model: string; }
const myCar: Car = { make: "Toyota", model: "Corolla", [1]: 2020 };

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

Aprice

Byear

Cowner

Dcolor

Attempts:

3 left

💡 Hint

Common Mistakes

Adding properties not declared in the interface causes errors.

Trying to assign extra properties directly in object literals.

The interface Car does not include year, so adding it causes an excess property error.

To fix the error, remove or avoid adding properties not defined in the interface.

3fill in blank

hard

Fix the error in the code by completing the type assertion.

Typescript

interface Book { title: string; author: string; }
const myBook = { title: "1984", author: "Orwell", pages: 328 } as [1];

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

ABook

Bany

Cobject

Dstring

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect types in assertions.

Not using type assertions when needed.

Using as Book tells TypeScript to treat the object as a Book, ignoring excess properties.

4fill in blank

hard

Fill both blanks to create a function that accepts an object matching the interface but allows extra properties.

Typescript

interface User { username: string; email: string; }
function registerUser(user: [1]) {
  console.log(user.username);
}

const newUser = { username: "john", email: "[e-mail]", [2]: true };
registerUser(newUser);

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

AUser & Record<string, any>

BUser

Cany

DisAdmin

Attempts:

3 left

💡 Hint

Common Mistakes

Using only the interface type without allowing extra properties.

Not defining the extra property in the object.

Using User & Record<string, any> allows extra properties.

The extra property isAdmin is allowed because of the intersection with Record<string, any>.

5fill in blank

hard

Fill all three blanks to create a function that accepts an object with required and optional properties, allowing excess properties.

Typescript

interface Config { host: string; port?: number; }
function connect(config: [1]) {
  console.log(`Connecting to ${config.host}:${config.[2] ?? 80}`);
}

const serverConfig = { host: "localhost", port: 8080, [3]: true };
connect(serverConfig);

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

AConfig & Record<string, unknown>

Bport

Csecure

DConfig

Attempts:

3 left

💡 Hint

Common Mistakes

Not allowing extra properties in the parameter type.

Accessing optional properties without checks.

The function parameter type Config & Record<string, unknown> allows extra properties.

The optional property port is accessed safely with ?? 80 as default.

The extra property secure is allowed due to the intersection with Record<string, unknown>.