Typing on function behaves differently if as type, interface or on the function

[mmahalwy]

Bug Report

No error:

type CustomType = { name: string };
interface MyFunc {
 (arg: string): CustomType;
}

const myFunc: MyFunc = (arg) => {
 return { name: arg, extraKey: 1234 };
};

No error:

type CustomType = { name: string }
type MyFunc = (arg: string) => CustomType;

const myFunc: MyFunc = (arg) => {
 return { name: arg, extraKey: 1234 };
};

Errors:

type CustomType = { name: string }

const myFunc = (arg: string): CustomType => {
 return { name: arg, extraKey: 1234 };
};

// error: Type '{ name: string; extraKey: number; }' is not assignable to type 'CustomType'.
// Object literal may only specify known properties, and 'extraKey' does not exist in type 'CustomType'.

🔎 Search Terms

Function types not erroring when using type or interface.

🕗 Version & Regression Information

Version 4.2.3

Tested from version 3.3.3 to 4.2.3

⏯ Playground Link

N/A

Playground link with relevant code

💻 Code

See above

🙁 Actual behavior

Only the last example fails.

🙂 Expected behavior

All examples above should error. The function returns an object with incorrect keys.

[MartinJohns]

This is working as intended. In your no error versions you don't specify a return type for your functions, so the return type is inferred. Because the return type is inferree based on your returned value you don't get any excess properties. Then the compiler checks if your value (the function) is compatible with the annotated type of your variable (MyFunc).

[mmahalwy]

I may have missed this Martin Johns (@MartinJohns). For this example, why is the return type inferred? I thought I set it explicitly as CustomType. See:

type CustomType = { name: string }
type MyFunc = (arg: string) => CustomType;

const myFunc: MyFunc = (arg) => {
 return { name: arg, extraKey: 1234 };
};

[MartinJohns]

Because your anonymous arrow function has no type annotation for the return type:

// No return type annotation
(arg) => { return { name: arg, extraKey: 1234 }; }

// With return type annotation
(arg): { name: string } => { return { name: arg, extraKey: 1234 }; }

Keep in mind that additional properties are legal in TypeScript. The excess property checks feature is often called "more of a linter feature" by the TypeScript team.

[mmahalwy]

Right, I understand that example Martin Johns (@MartinJohns) but since I am setting the type on the function constant, I'd expect it to adhere to the return type annotation:

type MyFunc = (arg: string) => CustomType;
const myFunc: MyFunc;

[RyanCavanaugh]

See also #40311 which attempts to change this

[mmahalwy]

Ryan Cavanaugh (@RyanCavanaugh) thanks for linking that. Would LOVE to see that PR merged 🙏

[typescript-bot]

This issue has been marked 'Working as Intended' and has seen no recent activity. It has been automatically closed for house-keeping purposes.