How come the type checker is not throwing an error for this indexable type?

Question

How come the type checker is not throwing an error for this indexable type?

I recently delved into the Microsoft Typescript Handbook and found myself intrigued by the indexable types chapter. To gain a deeper understanding, I decided to experiment with the code provided. Strangely enough, upon running this particular piece of code, I was surprised that it did not prompt any errors:

interface NumberDictionary {
  [index: number]: number;
  length: number;
  name: number;
}

// 'x' is not a number, 's' is not a number
let foo: NumberDictionary = { x: 's', length: 2, name: 3 };

Oddly enough, upon removing the initial line in the interface, an error did arise indicating that 'x' was not part of the declared interface.

typescript

Answer 1

Answer №1

When you specify an index type, you are essentially stating that the concrete implementation will guarantee the ability to retrieve a number when accessing obj[42].

The type of other properties in the object does not affect this declaration.

With this index specified, it is mandatory for properties like length and name to be numbers, while the others are not strictly enforced. Surprisingly, even though x may seem out of place, it is still permitted with the index declaration. Without the index, TypeScript would enforce the structure of foo as expected and disallow x. However, with the index present, there seems to be no issue raised. Quite strange.

One possible explanation could be that introducing an index interface loosens the type checking to allow both obj["bar"] and obj.bar syntaxes, even if they are ultimately converted to strings internally by TypeScript:

JavaScript converts numerical indexes to strings before using them to access object properties. So, indexing with 100 (a number) is equivalent to indexing with "100" (a string).

(excerpt from the TS handbook referenced in the question)

Therefore, the compiler likely enables index-based calls like foo["anything"], without raising concerns if an undeclared key like anything exists in the value of foo.

Answer 2

When you specify an index type, you are essentially stating that the concrete implementation will guarantee the ability to retrieve a number when accessing obj[42].

The type of other properties in the object does not affect this declaration.

With this index specified, it is mandatory for properties like length and name to be numbers, while the others are not strictly enforced. Surprisingly, even though x may seem out of place, it is still permitted with the index declaration. Without the index, TypeScript would enforce the structure of foo as expected and disallow x. However, with the index present, there seems to be no issue raised. Quite strange.

One possible explanation could be that introducing an index interface loosens the type checking to allow both obj["bar"] and obj.bar syntaxes, even if they are ultimately converted to strings internally by TypeScript:

JavaScript converts numerical indexes to strings before using them to access object properties. So, indexing with 100 (a number) is equivalent to indexing with "100" (a string).

(excerpt from the TS handbook referenced in the question)

Therefore, the compiler likely enables index-based calls like foo["anything"], without raising concerns if an undeclared key like anything exists in the value of foo.

How come the type checker is not throwing an error for this indexable type?

Answer №1

Similar questions

The routing navigate method is failing to direct to the desired component

Utilizing a function in an infinite loop within *ngFor along with an asynchronous pipe for an HTTP call

Organize library files into a build directory using yarn workspaces and typescript

Resolve ESLint errors in _document.tsx file of next.js caused by Document<any> and ctx.renderPage = () with TypeScript usage

Steps for importing jQuery to vendor.ts in Angular 2 webpack

Troubleshooting Missing Exports from Local Modules in React Vite (Transitioning from Create React App)

The implementation of conditional parameter types in TypeScript

Is it possible to utilize a partial entity for saving with TypeORM?

Develop customizable enumerations for use in expandable interfaces

After defining Partial<T>, encountering an error trying to access an undefined property is unexpected

What do you do when schema.parseAsync cannot be found?

What is the best way to emphasize when the path matches exactly with '/'?

Issues encountered when integrating ag-grid-react with typescript

A guide on selecting the best UI container based on API data in React using TypeScript

Exploring the benefits of using getServerSideProps with NextJS and Typescript for

leveraging two connected hooks

Utilizing Nodemailer and ReadableStreams to send email attachments stored in S3

rxjs - monitoring several observables and triggering a response upon any alteration

Exploring TypeScript interfaces with optional properties and returning types

Search timeout restriction