What is the reason behind Typescript's objection to an object being incompatible with its assigned type?

Question

What is the reason behind Typescript's objection to an object being incompatible with its assigned type?

While executing the TypeScript code below:

type dataType = {[key: string]: number} | {[key: string]: {[date: string]: number}} | {[key: string]: string;}


const myData1: dataType = {
  "name": "Eduardo",
  "city": "Miami",
  "state": "FL",
  "age": 22,
  "progress": {"2018": 67, "2019": 76, "2020": 89}
}

It results in an error stating that the object cannot be assigned to the type dataType even after specifying different types allowed inside the object explicitly. How can I properly allow multiple different types within an object?

This is the warning received:

Type '{ "name": string; "city": string; "state": string; "age": number; }' is not assignable to type 'dataType'.
  Type '{ "name": string; "city": string; "state": string; "age": number; }' is not assignable to type '{ [key: string]: string; }'.
    Property '"age"' is incompatible with index signature.
      Type 'number' is not assignable to type 'string'.

Your assistance will be much appreciated!

javascript typescript object types

Answer 1

Answer №1

{ [key: string]: number }

This declaration specifies that all properties must be of type number.

{ [key: string]: { [date: string]: number } }

In this definition, it states that all properties must be objects with nested properties being numbers.

{ [key: string]: string; }

Here, the requirement is for all properties to be strings.

type valueType =
    | { [key: string]: number }
    | { [key: string]: { [date: string]: number } }
    | { [key: string]: string; }

This type indicates that it can only be one of the above possibilities - either all numbers, all strings, or all objects.

It does not allow mixing different property types within an object.

Therefore, the union should actually be at the property level, not at the object level as shown above.

type ValueType = {
  [key: string]: number | string | { [date: string]: number }
}

Playground

If a more specific data structure is required, it can be defined using a single interface:

interface ValueType {
  name: string
  city: string
  state: string
  age: number
  progress: { [date: string]: number }
}

Playground

Answer 2

{ [key: string]: number }

This declaration specifies that all properties must be of type number.

{ [key: string]: { [date: string]: number } }

In this definition, it states that all properties must be objects with nested properties being numbers.

{ [key: string]: string; }

Here, the requirement is for all properties to be strings.

type valueType =
    | { [key: string]: number }
    | { [key: string]: { [date: string]: number } }
    | { [key: string]: string; }

This type indicates that it can only be one of the above possibilities - either all numbers, all strings, or all objects.

It does not allow mixing different property types within an object.

Therefore, the union should actually be at the property level, not at the object level as shown above.

type ValueType = {
  [key: string]: number | string | { [date: string]: number }
}

Playground

If a more specific data structure is required, it can be defined using a single interface:

interface ValueType {
  name: string
  city: string
  state: string
  age: number
  progress: { [date: string]: number }
}

Playground

Answer 3

Answer №2

Your code's valueType is causing an issue because it specifies that the type will consist of key-value pairs with keys as strings and values being numbers, strings, or a specific type {[date: string]: number}}. What you actually need is a type where the keys are strings and the values can be either numbers or strings within the same object.

Here is a revised version:

type valueType = {[key: string]: number | string | { [date: string]: number }};

const myData1: valueType = {
  "name": "Eduardo",
  "city": "Miami",
  "state": "FL",
  "age": 22,
  "progress": {"2018": 67, "2019": 76, "2020": 89}
}

If you prefer to have fixed keys in your type:

type valueType = { name: string, city: string, state: string, age: number, progress: { [date: string]: number } };

Answer 4

Your code's valueType is causing an issue because it specifies that the type will consist of key-value pairs with keys as strings and values being numbers, strings, or a specific type {[date: string]: number}}. What you actually need is a type where the keys are strings and the values can be either numbers or strings within the same object.

Here is a revised version:

type valueType = {[key: string]: number | string | { [date: string]: number }};

const myData1: valueType = {
  "name": "Eduardo",
  "city": "Miami",
  "state": "FL",
  "age": 22,
  "progress": {"2018": 67, "2019": 76, "2020": 89}
}

If you prefer to have fixed keys in your type:

type valueType = { name: string, city: string, state: string, age: number, progress: { [date: string]: number } };

What is the reason behind Typescript's objection to an object being incompatible with its assigned type?

Answer №1

Answer №2

Similar questions

Bypassing restrictions on AJAX requests across different domains

How to extract the HTML content from specific text nodes using Javascript

Indicate the array as a tuple

Encountering a 401 Unauthorized error due to CORS origin issue when making a post request with HttpClient in Angular

Struggling with implementing jquery Ajax and a php script to fetch information from a mysql database

The function WebGLRenderer() from three.js allows for rendering in

Getting the WebElement object by manually clicking an element while in an active WebDriver Session

What causes functions operating on mapped objects with computed keys to not correctly infer types?

Creating an HTTP POST request using JavaScript

What is the best way to create a personalized email form using javascript and reactjs without it opening in a new window?

invoke two JavaScript functions without displaying any message

What is the best way to change a blob into a base64 format using Node.js with TypeScript?

Challenges with Converting Data Types in the R Programming Language

Enhanced JavaScript Autocompletion in Integrated Development Environments

Unable to trigger an event from an asynchronous method in TypeScript

What is the function of this.handleClick that is positioned on the LEFT side of the = operator?

Exploring the concept of object inheritance in Angular 5 with Typescript

Leveraging RouteProvider in Angular

Switching between playing and pausing on multiple audio tracks

How do I use jQuery to make a div appear when the previous one closes?