The data structure does not match the exact object type

Question

The data structure does not match the exact object type

Why isn't this code snippet functioning as expected? It seems that 'beta' has keys of type string and their values are compatible (id is a number type, and temp is also a number type). Additionally, the Record function should make the values of all keys any, which should be compatible with everything.

const alpha:  Record<string, any> = {
  id: 1,
  temp: 2
};

const beta : {
  id: number;
  temp: number
} = alpha;

So why does it produce this error message?

Type 'Record<string, any>' is missing the following properties from type '{ id: number; temp: number; }': id, temp

typescript

Answer 1

Answer №1

beta requires properties id and temp.

By specifying a type for alpha, TypeScript interprets it as Record<string, any> instead of {id: number; temp: number}.

This means that there is no assurance that Record<string, any> includes id and temp.

The explicit type declaration for alpha needs to be removed.

In situations like this, it's best to let TypeScript handle the types for you without being explicitly declared.

const alpha = {
  id: 1,
  temp: 2
};

const beta : {
  id: number;
  temp: number
} = alpha;

Here's how TypeScript deals with these variables:

declare let alpha: Record<string, any>;

declare let beta: { id: number; temp: number };

alpha = beta // ok

beta = alpha // error

Notice that beta can be assigned to alpha, so you can use the explicit type Record<string, any> for the alpha object.

However, the reverse is not true - alpha cannot be assigned to beta because beta is a subtype of alpha.

Consider alpha as a super type and beta as a subtype

Answer 2

beta requires properties id and temp.

By specifying a type for alpha, TypeScript interprets it as Record<string, any> instead of {id: number; temp: number}.

This means that there is no assurance that Record<string, any> includes id and temp.

The explicit type declaration for alpha needs to be removed.

In situations like this, it's best to let TypeScript handle the types for you without being explicitly declared.

const alpha = {
  id: 1,
  temp: 2
};

const beta : {
  id: number;
  temp: number
} = alpha;

Here's how TypeScript deals with these variables:

declare let alpha: Record<string, any>;

declare let beta: { id: number; temp: number };

alpha = beta // ok

beta = alpha // error

Notice that beta can be assigned to alpha, so you can use the explicit type Record<string, any> for the alpha object.

However, the reverse is not true - alpha cannot be assigned to beta because beta is a subtype of alpha.

Consider alpha as a super type and beta as a subtype

The data structure does not match the exact object type

Answer №1

Similar questions

Material UI Error TS1128: Expected declaration or statement for ButtonUnstyledProps

What is the best way to create a mapping function in JavaScript/TypeScript that accepts multiple dynamic variables as parameters?

Explaining the functionality of reserved words like 'delete' within a d.ts file is essential for understanding their

Tips for utilizing buttons with the antd framework in Visual Studio Code

Having trouble displaying child nodes in MatTreeView with Angular 14?

Issue TS1259: The module "".../node_modules/@types/bn.js/index"" can only be imported as the default using the 'esModuleInterop' flag

What is the best way to incorporate resources from a different location in an Angular project?

What steps can I take to have TypeScript limit the type of an array based on filter inference?

Tracking code execution in React, Enzyme, and Istanbul reveals uncovered functions running during tests

Using a generic type as a value in an abstract class <T, K extends keyof T> allows for flexible and dynamic data manipulation

Ways to address the Generic Object Injection Sink eslint error (security/detect-object-injection)

Encountering a Lint No Nested Ternary Error while utilizing the ternary operator

Display a customized modal showcasing the data of a particular user

Utilizing Lazy Loading Modules within an Angular 2 (v5) App

An error has occurred: TypeError - The class constructor $b802fbb11c9bd2dc$export$2e2bcd8739ae039 must be called with 'new'

The designated function name can be either "onButtonClick" or "onClickButton"

Utilizing the moment function within an Angular application

Add the slide number and total count in between the navigation arrows of the owl carousel

Specify the object key type when using a `for-in` loop

Limit the utilization of toString through a TypeScript interface or type