A function's behavior will vary depending on whether it is a property of an object or not

Question

A function's behavior will vary depending on whether it is a property of an object or not

I've been observing some peculiar behavior:

In a typical scenario, TypeScript usually raises an error when an object contains too many keys, like this:

type Foo = {
  a: string; 
}

const a: Foo = {
  a: "hello", 
  b: "foo" // Object literal may only specify known properties, and 'b' does not exist in type 'Foo'.(2322)
}; 

function returnsFoo() : Foo {
  return {
    a: 'hello', 
    b: "world" // Object literal may only specify known properties, and 'b' does not exist in type 'Foo'.(2322)
  }
}

However, I noticed that if instead of directly declaring a function, I define a type that includes a function as a property, this error mysteriously disappears:

type ObjectThatHasAFunctionThatReturnsFoo = {
  defaultData: () => Foo; 
}; 

const b: ObjectThatHasAFunctionThatReturnsFoo = {
  defaultData: ()=> ({
    a: "hello", 
    //@ts-expect-error - but no error. 
    b: "asa"
  })
}

What could be the reason behind this unexpected behavior?

typescript

Answer 1

Answer №1

For more information, please refer to the documentation

When assigning object literals to variables or passing them as arguments, excess property checking occurs for special treatment. You will encounter an error if the object literal contains properties that are not present in the "target type":

To avoid these checks, you can assign the object to another variable. This way, the compiler will not flag it as an error.

It seems like there is no error in your code:

type Foo = {
    a: string;
}

const a: Foo = {
    a: "hello",
    b: "foo" 
};

function returnsFoo(): Foo {
    return {
        a: 'hello',
        b: "world" 
    }
}

type ObjectThatHasAFunctionThatReturnsFoo = {
    defaultData: () => Foo;
};


const b: ObjectThatHasAFunctionThatReturnsFoo = {
    defaultData: () => ({
        a: "hello",
        b: "foo"
    })
}

Here

This is because the function foo is essentially assigned to the defaultData property.

Since you are neither assigning the object literal to another variable nor using it as an argument, there are no excess property checks performed

That's right - the extra property 'b' indicates a developer mistake

To address this issue, you may consider incorporating some validation:

type Foo = {
    a: string;
}

type Valid = {
    defaultData: () => Foo;
};
type Validation<T> =
    T extends { defaultData: infer Fn }
    ? Fn extends (...args: any[]) => any
    ? ReturnType<Fn> extends Foo
    ? Foo extends ReturnType<Fn>
    ? T
    : never
    : never
    : never
    : never

const builder = <T extends Valid>(arg: Validation<T>) => arg

builder({
    defaultData: () => ({  // expected error
        a: "hello",
        b: "foo"
    })
})

builder({
    defaultData: () => ({  // ok
        a: "hello",
    })
})

For further insights on generic validation, you can visit my blog

Answer 2

For more information, please refer to the documentation

When assigning object literals to variables or passing them as arguments, excess property checking occurs for special treatment. You will encounter an error if the object literal contains properties that are not present in the "target type":

To avoid these checks, you can assign the object to another variable. This way, the compiler will not flag it as an error.

It seems like there is no error in your code:

type Foo = {
    a: string;
}

const a: Foo = {
    a: "hello",
    b: "foo" 
};

function returnsFoo(): Foo {
    return {
        a: 'hello',
        b: "world" 
    }
}

type ObjectThatHasAFunctionThatReturnsFoo = {
    defaultData: () => Foo;
};


const b: ObjectThatHasAFunctionThatReturnsFoo = {
    defaultData: () => ({
        a: "hello",
        b: "foo"
    })
}

Here

This is because the function foo is essentially assigned to the defaultData property.

Since you are neither assigning the object literal to another variable nor using it as an argument, there are no excess property checks performed

That's right - the extra property 'b' indicates a developer mistake

To address this issue, you may consider incorporating some validation:

type Foo = {
    a: string;
}

type Valid = {
    defaultData: () => Foo;
};
type Validation<T> =
    T extends { defaultData: infer Fn }
    ? Fn extends (...args: any[]) => any
    ? ReturnType<Fn> extends Foo
    ? Foo extends ReturnType<Fn>
    ? T
    : never
    : never
    : never
    : never

const builder = <T extends Valid>(arg: Validation<T>) => arg

builder({
    defaultData: () => ({  // expected error
        a: "hello",
        b: "foo"
    })
})

builder({
    defaultData: () => ({  // ok
        a: "hello",
    })
})

For further insights on generic validation, you can visit my blog

A function's behavior will vary depending on whether it is a property of an object or not

Answer №1

Similar questions

Tips for RETRIEVING a particular cookie value in Angular version 14

What are the reasons for the inability to send form-data in Postman?

Provide a boolean value of true or false to indicate whether all delete operations were successfully completed

Running a TypeScript program that has been compiled with module resolution is not working as expected

Experiencing a Typescript issue while trying to set a string as the state of a React component with a specified TS type

Obtain references to templates in component classes

The usage of @Inject('Window') in Angular/Jasmine leads to test failures, but removing it results in code failures

ways to coordinate two subscriptions so that one initiates only when the other one emits

Avoiding the use of reserved keywords as variable names in a model

Struggled with setting up the WebSocket structure in typescript

Tips for effectively handling the data received from a webservice when logging into a system

How can you debug a Node.js CLI tool using WebStorm?

Is it possible to include images in code comments within the Visual Studio Code environment?

Dealing with client-side exceptions in a Next.js 13 application's directory error handling

Is it time to refresh the package-lock.json file?

Lazy loading in Angular 2 hits a snag when using a module that is shared

TS2345: Cannot assign type '(item: cType) => cType' to type '(value: Object, index: number, array: Object[]) => cType' within the parameter

Assign a true or false value to every attribute of an object

Ways to populate missing cells with a default hyphen symbol

The 'target' property is not found on the specified 'string' type