What does it signify when it is stated that "it is not a descendant of the indexer"?

Question

What does it signify when it is stated that "it is not a descendant of the indexer"?

Currently, I am diving into Typescript with the help of this informative guide on indexer types.

There is a specific piece of code that has me puzzled:

interface NumberDictionary {
    [index: string]: number;
    length: number;    // okay, length should be a number
    name: string;      // error, 'name' type is not compatible with indexer
}

To start, why include 'length' in the index type?

let myDict : NumberDictionary;
myDict[10] = 23;

I'm confused about why there is a "length" property in the NumberDictionary when it's supposed to have an index like a[10]. Is an index type essentially an array, considering JavaScript arrays have lengths? If so, why define a length property in this example? Is it necessary? Apologies for my confusion – you can tell I'm trying to wrap my head around it.

Secondly,

name: string;// error, the type of 'name' is not a subtype of the indexer

The comment here has me scratching my head. Why does 'name' need to be a subtype of the indexer? Isn't an indexer something like a[10] = "Tom"? So, what exactly is a subtype of the indexer in this scenario?

typescript

Answer 1

Answer №1

I am confused by the comment made about this particular line. Why does the name have to be a subtype of the indexer?

This is because when accessing a string in TypeScript, it will automatically assume the type is number (based on `[index: string]: number;`). If `name: string;` was allowed, then the following code snippets would assume `number`, even though you may expect it to be a `string`:

let x: NamedDictionary = Object.create(null);
let n = "name";
let y = x[n]; // TypeScript assumes `number`
let z = x["name"]; // Do you want `string` here?

Notice the inconsistency between `y` and `z` ^

Answer 2

I am confused by the comment made about this particular line. Why does the name have to be a subtype of the indexer?

This is because when accessing a string in TypeScript, it will automatically assume the type is number (based on `[index: string]: number;`). If `name: string;` was allowed, then the following code snippets would assume `number`, even though you may expect it to be a `string`:

let x: NamedDictionary = Object.create(null);
let n = "name";
let y = x[n]; // TypeScript assumes `number`
let z = x["name"]; // Do you want `string` here?

Notice the inconsistency between `y` and `z` ^

Answer 3

Answer №2

Addressing the initial query, NumberDictionary serves as an object interface rather than an array interface. The index signature allows for referencing any index within the object.

A NumberDictionary object must include two essential values: length and name. Additional attributes can be included only if they adhere to the index signature (index and value type).

Object Interface

    interface NumberDictionary {
        [index: string]: number | string;
        length: number;
        name: string;
    }
    
    let nd: NumberDictionary = { length: 10, name: "Ten", lang: "en" };

Index Signature

    [index: string]: number | string;

This indicates that additional property like lang: string can be added to the object without triggering type errors.

If it's known that lang: string should be optional in the object, then it needs to be specified in the interface definition.

    interface NumberDictionary {
        [index: string]: number | string;
        length: number;
        name: string;
        lang?: string;
    }
    
    let nd: NumberDictionary = { length: 10, name: "Ten", lang: "en" };

Answer 4

Addressing the initial query, NumberDictionary serves as an object interface rather than an array interface. The index signature allows for referencing any index within the object.

A NumberDictionary object must include two essential values: length and name. Additional attributes can be included only if they adhere to the index signature (index and value type).

Object Interface

    interface NumberDictionary {
        [index: string]: number | string;
        length: number;
        name: string;
    }
    
    let nd: NumberDictionary = { length: 10, name: "Ten", lang: "en" };

Index Signature

    [index: string]: number | string;

This indicates that additional property like lang: string can be added to the object without triggering type errors.

If it's known that lang: string should be optional in the object, then it needs to be specified in the interface definition.

    interface NumberDictionary {
        [index: string]: number | string;
        length: number;
        name: string;
        lang?: string;
    }
    
    let nd: NumberDictionary = { length: 10, name: "Ten", lang: "en" };

What does it signify when it is stated that "it is not a descendant of the indexer"?

Answer №1

Answer №2

Object Interface

Index Signature

Similar questions

How can we limit the CSS properties that can be used in an interpolated manner by defining a restricted TS type for CSS props based on emotions?

The collapsible tree nodes overlap one another in the D3.js visualization

NPM Package: Accessing resources from within the package

Typescript filtering function that results in an empty array

Encountered an issue with a module not being found while trying to install a published React component library that is built using Rollup. The error message states:

Creating an interface for React props

Guide to inheriting functions from a parent component in Angular 2

Incorporate Select2 functionality within the Angular2 application

Bringing in CSS variables to a Typescript document

To initiate the development environment, execute the following command: `cross-env NODE_ENV=

Yep, implementing conditional logic with the `when` keyword and radio buttons

Angular's queryParams do not appear to properly connect with the query parameters

Error display in Elastic Apm Rum Angular implementation

When using the async pipe with Angular's ngFor, an error message indicates that the argument is

script code to limit selection of dates within a predefined range

Using a specific type of keys, attempting to set two instances of those keys simultaneously will result in an error of that type

Applying TPS rate to existing API endpoints at the method level within API Gateway using AWS CDK

Defining a JSON file interface in Angular to populate a dropdown box with dependencies

Typescript with Angular: Despite having 7 values in the map, Map.get is returning undefined

React Material-UI is notorious for its sluggish performance