'The object literal does not match the type of parameter' error is displayed

Question

'The object literal does not match the type of parameter' error is displayed

Encountering an issue with object literal type.

interface OptionalFoo {
  foo?: number;
}

interface Bar {}

function foobarFn(foobar: OptionalFoo & Bar) {}

foobarFn({ bar: 1 }); // error

foobarFn({ bar: 1 } as { bar: number }); // ok

foobarFn({ bar: 1 } as { bar: 1 }); // ok!

Running into a type error due to object literal with inferred type:

Argument of type '{ bar: number; }' is not assignable to parameter of type 'OptionalFoo & Bar'

The inference itself is not the root cause of the problem:

const bar = { bar: 1 }; // inferred { bar: number; }
foobarFn(bar); // ok!?

A similar issue arises with spread syntax vs Object.assign:

foobarFn({...{ bar: 1 }}); // error

foobarFn(Object.assign({}, { bar: 1 })); // ok!?

Is there a way to achieve the desired behavior with inferred object literal type (excess property check) without using in-place object literals, such as through the use of a variable like bar or a function call like Object.assign({ bar: 1 })?

typescript type-inference

Answer 1

Answer №1

To clarify, the issue at hand goes beyond just excess property checks. Excess property checks typically come into play when directly assigning an object literal to a location. However, in this case, the unexpected behavior arises when indirectly assigning an object, which would normally pass under excess property checks.

function foo(o: { bar: number }) { }
foo({ bar: 0, foo: "" }) // error with direct assignment
foo({ bar: 0, foo: ""} as { bar: 0, foo: "" }) // okay with indirect assignment

The surprising part, in my opinion, is that another check (the weak type check) fails to catch this error. According to weak type checks, if a type has only optional properties and we attempt to assign a type with no common properties to it, an error should be thrown:

function foo(o: { bar?: number }) { }
foo({ foo: "" }) // error for excess properties: Object literal may only specify known properties, and 'foo' does not exist in type
foo({ foo: ""} as { foo: "" }) // error for weak types: Type '{ foo: ""; }' has no properties in common with type '{ bar?: number; }'.

This seems like a gap in weak type checks. A weak type is defined by having at least one property, all of which are optional, and lacking certain signatures according to this PR. However, in the intersection implementation, all types within the intersection must also be weak for it to qualify as a weak type. As shown in the compiler code:

function isWeakType(type: Type): boolean {
    if (type.flags & TypeFlags.Object) {
       // ....
    }
    if (type.flags & TypeFlags.Intersection) {
        /// All intersection members have to be weak
        return every((<IntersectionType>type).types, isWeakType); 
    }
    return false;
}

Therefore, since interface Bar {} is not considered a weak type due to lacking properties, any intersection involving it will not trigger weak type checking errors. Removing Bar from the intersection would result in errors whenever an object with no common properties is assigned.

Answer 2

To clarify, the issue at hand goes beyond just excess property checks. Excess property checks typically come into play when directly assigning an object literal to a location. However, in this case, the unexpected behavior arises when indirectly assigning an object, which would normally pass under excess property checks.

function foo(o: { bar: number }) { }
foo({ bar: 0, foo: "" }) // error with direct assignment
foo({ bar: 0, foo: ""} as { bar: 0, foo: "" }) // okay with indirect assignment

The surprising part, in my opinion, is that another check (the weak type check) fails to catch this error. According to weak type checks, if a type has only optional properties and we attempt to assign a type with no common properties to it, an error should be thrown:

function foo(o: { bar?: number }) { }
foo({ foo: "" }) // error for excess properties: Object literal may only specify known properties, and 'foo' does not exist in type
foo({ foo: ""} as { foo: "" }) // error for weak types: Type '{ foo: ""; }' has no properties in common with type '{ bar?: number; }'.

This seems like a gap in weak type checks. A weak type is defined by having at least one property, all of which are optional, and lacking certain signatures according to this PR. However, in the intersection implementation, all types within the intersection must also be weak for it to qualify as a weak type. As shown in the compiler code:

function isWeakType(type: Type): boolean {
    if (type.flags & TypeFlags.Object) {
       // ....
    }
    if (type.flags & TypeFlags.Intersection) {
        /// All intersection members have to be weak
        return every((<IntersectionType>type).types, isWeakType); 
    }
    return false;
}

Therefore, since interface Bar {} is not considered a weak type due to lacking properties, any intersection involving it will not trigger weak type checking errors. Removing Bar from the intersection would result in errors whenever an object with no common properties is assigned.

'The object literal does not match the type of parameter' error is displayed

Answer №1

Similar questions

Using GraphQL to set default values in data within a useEffect hook can lead to never

Solution: How to fix the error: Invalid component type, 'Draggable' cannot be used with JSX in react-draggable

Efficient method of triggering an action on a subcomponent in React Redux without the need to pass props down the component tree

Multiple asynchronous calls in Angular 2

Passing the array as query parameters and retrieving it using the angular getAll function is the most efficient way

Enhancing User Authentication: Vue 3 with TypeScript Login

The parameter 'any' cannot be assigned to the parameter 'never' - Array provided is incompatible

Personalized path-finding tree iterator

Tips on adding an external type to a global .d.ts file

Function not functioning as expected in NestJS MongoDB unique field feature

Could someone provide a detailed explanation of exhaustMap in the context of Angular using rxjs?

Implementing Login using Google in a Nativescript iOS application: A step-by-step guide

Using Angular's ngFor directive to render 3 buttons in each row

What is the method for utilizing OR statements in Playwright assert?

How come my uploaded Excel Javascript add-on opens in an external browser instead of the task pane?

What is the best way to merge two interfaces and convert all of their fields to optional properties?

Angular 2 Demonstrate Concealing and Revealing an Element

`How can I extract HTMLElements from slots in vue3?`

Having trouble retrieving values from Promise.allSettled on Node.js 12 using TypeScript version 3.8.3

Using selectors and mappers in Typescript generics