Mismatch between interface and generic object detected in TypeScript

Question

Mismatch between interface and generic object detected in TypeScript

I am facing an issue with matching an object of type foobar to a generic object definition where each attribute is of the "number" type.

interface foobar {
    a: number,
    b: number
}

function baz(param: {[key: string]: number}) {
    // some math stuff here
}

const obj: foobar = {
    a: 1,
    b: 2
};

baz(obj); // encountering error here

The TypeScript error message states:

TS2345: Argument of type 'foobar' is not assignable to parameter of type '{ [key: string]: number; }'. Index signature is missing in type 'foobar'.

Is there a solution to match the interface object to a generic object containing only number values?

typescript

Answer 1

Answer №1

Is there a way to assign the object's interface to a generic object that only contains number values?

No, TypeScript cannot determine if you didn't write code like this:

// OK: This is valid code
const obj1 = { a: 1, b: 2, c: "oops" };
// OK: Structural type matches
const obj: foobar = obj1;
// Crash occurs when baz encounters c: "oops"
baz(obj); // error here

In this scenario, it would be best to remove the type annotation from this line:

const obj = {
    a: 1,
    b: 2
};

Since it's a const initialized with an object literal, TypeScript can confirm there are no additional properties on the object, making it safer to use where an index signature is needed. Introducing a type annotation undermines this behavior.

Answer 2

Is there a way to assign the object's interface to a generic object that only contains number values?

No, TypeScript cannot determine if you didn't write code like this:

// OK: This is valid code
const obj1 = { a: 1, b: 2, c: "oops" };
// OK: Structural type matches
const obj: foobar = obj1;
// Crash occurs when baz encounters c: "oops"
baz(obj); // error here

In this scenario, it would be best to remove the type annotation from this line:

const obj = {
    a: 1,
    b: 2
};

Since it's a const initialized with an object literal, TypeScript can confirm there are no additional properties on the object, making it safer to use where an index signature is needed. Introducing a type annotation undermines this behavior.

Mismatch between interface and generic object detected in TypeScript

Answer №1

Similar questions

Reactive Form value is not displaying in view because of FormControlName issue

Efficiently finding a group of substrings within a JavaScript string

Searching for a value within an array of objects in Typescript/Vue 3. The objects are of an unknown data type

The element mat-divider in Angular is unrecognized

Passing a variable from an observable to another function in Angular2: A step-by-step guide

Is it possible to utilize BE-provided Enum in the FE and if so, how can

Construct a string by combining the elements of a multi-dimensional array of children, organized into grouped

The Promise instantiated using Promise.reject() is executed instantly

Guide to configuring a function to display the maximum value on a boxplot in Highcharts

Why does 'FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory' occur with npm start including azure?

typescript: How to restrict an array's type in a specific order

`The simultaneous processing of two inputs using forkJoin`

Validating React Typescript Props: Ensuring that two specific props do not exist simultaneously

Determining the data type of an object key in Typescript

Executing functions in Vue TypeScript during initialization, creation, or mounting stages

The issue of `Console.log` displaying as undefined arises after subscribing to a provider in Ionic3

Button for enabling and disabling functionality, Delete list in Angular 2

Setting the initial state for your ngrx store application is a crucial step in ensuring the

Encountering this issue: Unable to access the property 'length' of an undefined variable

Simulating a PubSub publish functionality