Steps to create a JSON-compatible parameter and prevent the occurrence of the error message "Missing index signature":

Question

Steps to create a JSON-compatible parameter and prevent the occurrence of the error message "Missing index signature":

My function is defined as:

export function useSubmitHandler(url: string, data: Json): [FormEventHandler<HTMLFormElement>, boolean] {}

The definition of Json is as follows:

type JsonPrimitive = string | number | boolean | null | undefined
interface JsonMap extends Record<string, JsonPrimitive | JsonArray | JsonMap> {}
interface JsonArray extends Array<JsonPrimitive | JsonArray | JsonMap> {}
export type Json = JsonPrimitive | JsonMap | JsonArray

An error occurs when trying to pass an arbitrary interface to the function:

TS2345: Argument of type 'Fee' is not assignable to parameter of type 'Json'.   
Type 'Fee' is not assignable to type 'JsonMap'.     
Index signature is missing in type 'Fee'

https://i.sstatic.net/yOUGC.png

However, if the object is spread like {...store.data} then the error disappears.

What modifications are needed to the useSubmitHandler type to accept any JSON stringifyable object?

The structure of Fee is:

interface Fee {
    id: number|null;
    name: string;
    type: string;
    amount: string;
    default: number;
    company_id: number;
    deleted_at?: any;
    active: number;
    fee_or_discount: string;
}

The goal is for this solution to be compatible with any type.

json typescript

Answer 1

Answer №1

Option 1: Modify the `Json` type definition

type JsonPrimitive = string | number | boolean | null;
type JsonMap = {
    [key: string]: JsonPrimitive | JsonMap | JsonArray;
}
type JsonArray = Array<JsonPrimitive | JsonMap | JsonArray>;
type Json = JsonPrimitive | JsonMap | JsonArray;

Option 2: Extend the `Fee` interface with an index signature

interface Fee {
    [property: string]: any;
    id: number|null;
    name: string;
    type: string;
    amount: string;
    default: number;
    company_id: number;
    deleted_at?: any;
    active: number;
    fee_or_discount: string;
}

Option 3: Use inline type assertion for the index signature, like this:

useSubmitHandler(Router.route('fees.store')!, store.data as {[property: string]: any})

Check out

TypeScript GitHub issue Suggesting a new basic type for JSON #1897

Answer 2

Option 1: Modify the `Json` type definition

type JsonPrimitive = string | number | boolean | null;
type JsonMap = {
    [key: string]: JsonPrimitive | JsonMap | JsonArray;
}
type JsonArray = Array<JsonPrimitive | JsonMap | JsonArray>;
type Json = JsonPrimitive | JsonMap | JsonArray;

Option 2: Extend the `Fee` interface with an index signature

interface Fee {
    [property: string]: any;
    id: number|null;
    name: string;
    type: string;
    amount: string;
    default: number;
    company_id: number;
    deleted_at?: any;
    active: number;
    fee_or_discount: string;
}

Option 3: Use inline type assertion for the index signature, like this:

useSubmitHandler(Router.route('fees.store')!, store.data as {[property: string]: any})

Check out

TypeScript GitHub issue Suggesting a new basic type for JSON #1897

Answer 3

Answer №2

To address this issue, one approach is to encapsulate store.data within a function that applies an index signature.

const indexedData = <T extends {}>(obj: T): T & {[key: string]: never} => obj;

This function essentially returns the original object but augments it with additional TypeScript information. It preserves all existing values of type T, while introducing an index signature {[key: string]: never} to indicate to TypeScript that any keys not present in the type must be undefined.

You can invoke the handler like so:

runHandler(url, indexedData(store.data))

Playground Link

Alternatively, you could redefine Json without the index signature provided by using Record. However, this may require expanding the allowable properties which might not be ideal.

Answer 4

To address this issue, one approach is to encapsulate store.data within a function that applies an index signature.

const indexedData = <T extends {}>(obj: T): T & {[key: string]: never} => obj;

This function essentially returns the original object but augments it with additional TypeScript information. It preserves all existing values of type T, while introducing an index signature {[key: string]: never} to indicate to TypeScript that any keys not present in the type must be undefined.

You can invoke the handler like so:

runHandler(url, indexedData(store.data))

Playground Link

Alternatively, you could redefine Json without the index signature provided by using Record. However, this may require expanding the allowable properties which might not be ideal.

Steps to create a JSON-compatible parameter and prevent the occurrence of the error message "Missing index signature":

Answer №1

Option 1: Modify the `Json` type definition

Option 2: Extend the `Fee` interface with an index signature

Option 3: Use inline type assertion for the index signature, like this:

Check out

Answer №2

Similar questions

Creating a JSON schema from a JAXB annotated class: A step-by-step guide

The MongoDB operator that checks for multiple values within a specified field

Using HTML5 to display the {{data}} extracted from a JSON file right in the center of the text

What is the best way to store a collection of objects generated from an AJAX request that retrieves information from a JSON file using JavaScript?

typescriptIs there a more efficient approach to typing optional values without a default value in

Modifying tooltip format in React ApexChart from dots to commas

Show values in array that include a certain keyword

Fake AxiosInstance. In need of obtaining response in a single test

What is the best way to reference typescript files without using absolute paths?

Employing [style.something.px]="2" in Angular to specify the thickness of the border

Having trouble with mapping a localStorage variable containing an Array of Objects, which results in the item disappearing

Unraveling the Mystery of the Undefined Parameter in Angular Observables

Query a SQL database using PHP and retrieve data from array fields

Convert several JSON files into an HTML table using PHP - an abundance of rows

Implement dynamic options in dropdown menu using JQuery AJAX call to retrieve data in JSON format

Using object bracket notation in TypeScript to retrieve values from props with the help of string interpolation

Identifying the Correct Data Type of Objects in JSON Using Objective-C

When transferring information from the UI controller to Javascript, there is a risk of losing certain data points in the process

Change object values to capital letters

Issue with Discord.js (14.1) - Message Handling Unresponsive

Steps to create a JSON-compatible parameter and prevent the occurrence of the error message "Missing index signature":

Answer №1

Option 1: Modify the Json type definition

Option 2: Extend the Fee interface with an index signature

Option 3: Use inline type assertion for the index signature, like this:

Check out

Answer №2

Similar questions

Creating a JSON schema from a JAXB annotated class: A step-by-step guide

The MongoDB operator that checks for multiple values within a specified field

Using HTML5 to display the {{data}} extracted from a JSON file right in the center of the text

What is the best way to store a collection of objects generated from an AJAX request that retrieves information from a JSON file using JavaScript?

typescriptIs there a more efficient approach to typing optional values without a default value in

Modifying tooltip format in React ApexChart from dots to commas

Show values in array that include a certain keyword

Fake AxiosInstance. In need of obtaining response in a single test

What is the best way to reference typescript files without using absolute paths?

Employing [style.something.px]="2" in Angular to specify the thickness of the border

Having trouble with mapping a localStorage variable containing an Array of Objects, which results in the item disappearing

Unraveling the Mystery of the Undefined Parameter in Angular Observables

Query a SQL database using PHP and retrieve data from array fields

Convert several JSON files into an HTML table using PHP - an abundance of rows

Implement dynamic options in dropdown menu using JQuery AJAX call to retrieve data in JSON format

Using object bracket notation in TypeScript to retrieve values from props with the help of string interpolation

Identifying the Correct Data Type of Objects in JSON Using Objective-C

When transferring information from the UI controller to Javascript, there is a risk of losing certain data points in the process

Change object values to capital letters

Issue with Discord.js (14.1) - Message Handling Unresponsive

Option 1: Modify the `Json` type definition

Option 2: Extend the `Fee` interface with an index signature