Interface is allowing extra property when it is used as return type of a function

by

An inteface seems to accept extra property(ies) when it is assigned as a return of a function via a type.

In general, TypeScript uses structural typing, so it is perfectly fine to assign an object with additional properties to a Human interface.

const lui = {
  name: "Lui",
  age: 40
}

const human: Human = lui // works,

You can assign lui to variable human with type Human, because typeof lui is a sub-type and therefore has the same/compatible property members.

An exception to this rule are excess property checks for “freshly created object literals”, that are intended as developer aid and prohibit extra properties to be added. The general thought here is, that you exactly know what properties you want, when you define a direct object literal with no other indirection (access of variables etc. to get that object value).

Excess property checks require an immediately following explicit type annotation at the variable, property or function dealing with the fresh object literal in order to work. Otherwise the object literal type doesn’t count as “fresh” anymore (its type is widened). Let’s check your examples to illustrate the concept.

const humanCreator: HumanCreator = (name, age) => ({
  name,
  age // No error. Why?
});

You can see this as an assignment of a type compatible function to the variable with type HumanCreator. The compiler looks at the function expression (name, age) => ({ name, age }), infers parameter types and makes sure that its return type is compatible to the variable type. And indeed – {name: string; age:number} return type is assignable to Human (structural typing).

const humanCreatorr: HumanCreator = (name, age): Human => ({
  name,
  age // Error
});

const humanCreatorrr = (): Human => ({
  name: '',
  age: 0 // Error
});

These cases are different, as you immediately annotate the functions with Human return type. There is no type inference for the return type necessary for the compiler. tl;dr To enable excess property checks, annotate an explicit type for your object literal as close as possible.

Further links

More Related Contents:

  1. Create a global variable in TypeScript
  2. Way to tell TypeScript compiler Array.prototype.filter removes certain types from an array?
  3. Difference between Variance, Covariance, Contravariance and Bivariance in TypeScript
  4. How to use fetch in TypeScript
  5. Typescript property does not exist on union type
  6. Typescript primitive types: any difference between the types “number” and “Number” (is TSC case-insensitive)?
  7. Specify method’s type without converting the method to property
  8. How to watch and reload ts-node when TypeScript files change
  9. Angular 2 View will not update after variable change in subscribe
  10. Can’t import CSS/SCSS modules. TypeScript says “Cannot Find Module”
  11. Changing Property Name in Typescript Mapped Type
  12. Type for “every possible string value except …”
  13. How to combine known interface properties with a custom index signature?
  14. Unable to import svg files in typescript
  15. Call a global variable inside module
  16. Obtaining the return type of a function
  17. tsc throws `TS2307: Cannot find module` for a local file
  18. Merge Two Interfaces
  19. Typescript: ReturnType of overloaded function
  20. What TypeScript version is Visual Studio Code using? How to update it?
  21. Why does TypeScript track mutation of function static properties?
  22. Array VS Type[] in Typescript
  23. TypeScript filter out nulls from an array
  24. typescript: validate excess keys on value, returned from function
  25. Declaring abstract method in TypeScript
  26. how to remove properties via mapped type in TypeScript
  27. Setting up tsconfig with spec/test folder
  28. Does TypeScript allow type aliases?
  29. What is exactly the ‘static side’ and the ‘instance side’ in typescript?
  30. Optional class members in Typescript

Leave a Comment