Broaden the TypeScript interface with indexed types

Question

Broaden the TypeScript interface with indexed types

Imagine a straightforward indexed interface:

interface FormData {
    [K: string]: string;
}

This little fella works like a charm. However, there comes a time when I want to allow a property to be an array of strings.

interface AcmeFormData extends FormData {
    foobar: string[];
}

Typescript throws an error stating

Property 'foobar' of type 'string[]' is not assignable to string index type 'string'.

After checking the documentation, it appears that the following should work, but it also raises concerns.

interface FormData {
    [K: string]: string;
    foobar: string[];
}

I want to mention that I'd prefer to steer clear of using a union type ([K: string]: string | string[];) because most of the time, the data will only be a single string value and therefore I would rather avoid adding type hints.

Is this doable? Or am I trying to push the limits of Typescript?

typescript

Answer 1

Answer №1

To achieve this, consider using an intersection instead of the extends keyword. For instance:

interface FormData {
    [K: string]: string;
}

type AcmeFormData = FormData & { foobar: string[] };

declare const example: AcmeFormData;

example.foobar       // string[]
example.anythingelse // string

However, be cautious as this approach can lead to inaccuracies in index signatures. TypeScript may infer incorrect types based on the modified signature:

for (let key in example) {
    // The value 'val' is inferred as type string, but beware!
    // It will actually be a string[] for the 'foobar' key.
    // TypeScript won't recognize this, causing runtime errors even though it compiles without issues.

    const val = example[key].toLowerCase();
}

Answer 2

To achieve this, consider using an intersection instead of the extends keyword. For instance:

interface FormData {
    [K: string]: string;
}

type AcmeFormData = FormData & { foobar: string[] };

declare const example: AcmeFormData;

example.foobar       // string[]
example.anythingelse // string

However, be cautious as this approach can lead to inaccuracies in index signatures. TypeScript may infer incorrect types based on the modified signature:

for (let key in example) {
    // The value 'val' is inferred as type string, but beware!
    // It will actually be a string[] for the 'foobar' key.
    // TypeScript won't recognize this, causing runtime errors even though it compiles without issues.

    const val = example[key].toLowerCase();
}

Answer 3

Answer №2

The issue with the current setup arises from using [K: string]: string in the interface, which mandates that all keys must have string values including foobar. To resolve this, I suggest structuring it as follows:

interface NewData {
  parameters: { [param: string]: string }
  additionalInfo: number[]
}

Answer 4

The issue with the current setup arises from using [K: string]: string in the interface, which mandates that all keys must have string values including foobar. To resolve this, I suggest structuring it as follows:

interface NewData {
  parameters: { [param: string]: string }
  additionalInfo: number[]
}

Broaden the TypeScript interface with indexed types

Answer №1

Answer №2

Similar questions

Angular 2 is throwing an error: Unhandled Promise rejection because it cannot find a provider for AuthService. This error is occurring

Error: Attempting to initiate a backward navigation action while already in the process. Utilizing Natiescript

:host background color may be missing, but the font size has been boosted?

Determine the data type of a parameter by referencing a prior parameter

Iterate through each element in the array using headlessui tabs for mapping

An issue has occurred with error code TS2688: The type definition file for 'jquery' cannot be located. [Angular Application] --

PhpStorm IDE does not recognize Cypress custom commands, although they function properly in the test runner

Incorporating typings for bootstrap-table while compiling TypeScript in an ASP.NET Core application

Step-by-step guide on building a wrapper child component for a React navigator

Error: Import statement cannot be used outside a module (@cucumber/cucumber) while using Node.JS, Playwright, and Cucumber framework

Encountering an error message stating "Type does not match FunctionComponent<Props>" and "Type is lacking the properties from type 'React Element<any, any>'"

Issue: unable to establish a connection to server at localhost port 5000 while using Next.js getServerSideProps function

Issues encountered when attempting to use Angular2 with SystemJs and typescript transpiler

The issue arose when attempting to save a nested list of schema types in Typegoose and Mongoose, resulting in a failed Cast to

Assign a predetermined value to a dropdown list within a FormGroup

How can I ensure that a particular component type passes the typescript check in a react-typescript project?

The attribute 'XX' is not recognized within the 'useState' type

Retrieve object from nested array based on its id using Angular 6

I am looking for guidance on removing the bottom line from the ionic 4 segment indicator. Any advice or tips on

Modify the request body of a multipart/form-data, then apply the validationPipe