score:2

Accepted answer

This took some digging to figure out the main question as I see it: why does TypeScript allow you to assign an object with properties to a property declared as an empty object?

The answer seems to be buried in the TypeScript spec a bit

In effect, a type's apparent members make it a subtype of the 'Object' or 'Function' interface unless the type defines members that are incompatible with those of the 'Object' or 'Function' interface.

That is to say, {} is treated the same as Object for type purposes. This allows you to create an object with additional properties of type {} which is what you are doing. Note that this.state.foo should not be allowed since the property foo doesn't exist on {}. Similarly, you wouldn't be able to do this.state.foo =.

As for why you can pass an object with unknown properties to Object or setState, that has to do with TypeScript's type compatibility. See: https://www.typescriptlang.org/docs/handbook/interfaces.html for one explanation

Notice that our object actually has more properties than this, but the compiler only checks that at least the ones required are present and match the types required.

This also explains:

Object literals get special treatment and undergo excess property checking when assigning them to other variables, or passing them as arguments.

So the answer to your question seems to be that where you're using {} here, TypeScript is treating it as if you're using Object which is not an object literal type.

I'm not sure how you would enforce the state having no properties, but on the other hand, I'm not sure how that would be useful. If you want a component with no properties, use a stateless or function component.


Related Query

More Query from same tag